css谷歌logo制作

CSS 制作 Google 标志

通过纯 CSS 实现 Google 标志，主要依赖 ::before 和 ::after 伪元素、背景渐变、旋转和定位技术。以下是分步实现方法：

基本结构

HTML 结构仅需一个容器元素：

<div class="google-logo"></div>

CSS 样式设计

.google-logo {
  position: relative;
  width: 240px;
  height: 80px;
}

.google-logo::before,
.google-logo::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

/* 蓝色部分 */
.google-logo::before {
  width: 80px;
  height: 80px;
  background: #4285F4;
  left: 0;
}

/* 红色部分 */
.google-logo::after {
  width: 80px;
  height: 80px;
  background: #EA4335;
  right: 0;
}

/* 绿色和黄色部分通过额外元素实现 */
.google-logo span {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

/* 绿色部分 */
.google-logo span:nth-child(1) {
  background: #34A853;
  left: 80px;
}

/* 黄色部分 */
.google-logo span:nth-child(2) {
  background: #FBBC05;
  left: 160px;
}

字母样式（可选）

如需添加字母 "G"，可增加以下样式：

.google-logo::before {
  /* 在蓝色圆上添加字母 */
  color: white;
  font-family: Arial, sans-serif;
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  line-height: 80px;
  content: "G";
}

动画效果（可选）

添加悬停旋转动画：

.google-logo:hover {
  transform: rotate(360deg);
  transition: transform 1s ease;
}

关键点说明：

1. 使用四个圆形元素拼合标志
2. 通过绝对定位控制位置
3. 采用 Google 品牌标准色：
   • 蓝色 #4285F4
   • 红色 #EA4335
   • 绿色 #34A853
   • 黄色 #FBBC05

完整实现需根据实际需求调整尺寸和定位参数。