当前位置：首页 > CSS

css谷歌logo制作

2026-04-02 00:30:30CSS

使用CSS绘制谷歌Logo

谷歌Logo由四个彩色字母组成，可以通过CSS的伪元素和背景色实现。以下是具体实现方法：

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

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

CSS样式代码：

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

.google-logo::before {
  content: "G";
  position: absolute;
  left: 0;
  color: #4285F4;
  font-size: 80px;
  font-weight: bold;
  font-family: 'Product Sans', Arial, sans-serif;
}

.google-logo::after {
  content: "oogle";
  position: absolute;
  left: 60px;
  color: #EA4335;
  font-size: 80px;
  font-weight: bold;
  font-family: 'Product Sans', Arial, sans-serif;
}

.google-logo span:first-child {
  position: absolute;
  left: 120px;
  color: #FBBC05;
  font-size: 80px;
  font-weight: bold;
  font-family: 'Product Sans', Arial, sans-serif;
}

.google-logo span:last-child {
  position: absolute;
  left: 180px;
  color: #34A853;
  font-size: 80px;
  font-weight: bold;
  font-family: 'Product Sans', Arial, sans-serif;
}

纯CSS绘制方案（无文本）

如需完全用CSS绘制（不使用文字），可采用以下方案：

<div class="google-logo">
  <div class="blue"></div>
  <div class="red"></div>
  <div class="yellow"></div>
  <div class="green"></div>
</div>

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

.google-logo div {
  position: absolute;
  width: 60px;
  height: 80px;
}

.blue {
  left: 0;
  background: #4285F4;
  clip-path: polygon(0 0, 100% 0, 100% 60%, 60% 60%, 60% 100%, 0 100%);
}

.red {
  left: 60px;
  background: #EA4335;
  clip-path: circle(40px at 30px 40px);
}

.yellow {
  left: 120px;
  background: #FBBC05;
  clip-path: polygon(0 20%, 100% 20%, 100% 80%, 0 80%);
}

.green {
  left: 180px;
  background: #34A853;
  clip-path: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 40% 60%, 0 60%, 0 40%, 40% 40%);
}

动画效果增强

添加悬停动画效果：

css谷歌logo制作

.google-logo:hover div {
  transform: translateY(-10px);
  transition: transform 0.3s ease;
}

.blue { transition-delay: 0.1s; }
.red { transition-delay: 0.2s; }
.yellow { transition-delay: 0.3s; }
.green { transition-delay: 0.4s; }