css制作Googlelogo

使用CSS制作Google Logo

Google Logo由多个彩色字母组成，可以通过CSS的::before和::after伪元素、背景渐变和字体属性实现。

HTML结构

<div class="google-logo">
  <span class="letter g1">G</span>
  <span class="letter o1">o</span>
  <span class="letter o2">o</span>
  <span class="letter g2">g</span>
  <span class="letter l">l</span>
  <span class="letter e">e</span>
</div>

CSS样式

.google-logo {
  font-family: 'Product Sans', Arial, sans-serif;
  font-size: 80px;
  font-weight: bold;
  display: flex;
  gap: 2px;
}

.letter {
  position: relative;
}

.g1 {
  color: #4285F4;
}

.o1 {
  color: #EA4335;
}

.o2 {
  color: #FBBC05;
}

.g2 {
  color: #4285F4;
}

.l {
  color: #34A853;
}

.e {
  color: #EA4335;
}

使用纯CSS绘制Logo（无文本）

如果需要完全用CSS绘制图形化的Google Logo，可以使用多个div和CSS渐变：

HTML结构

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

CSS样式

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

.arc {
  width: 40px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
}

.blue {
  background: conic-gradient(
    from 45deg,
    #4285F4 90deg,
    transparent 90deg
  );
  left: 0;
}

.red {
  background: conic-gradient(
    from -45deg,
    #EA4335 90deg,
    transparent 90deg
  );
  left: 40px;
}

.yellow {
  background: conic-gradient(
    from 135deg,
    #FBBC05 90deg,
    transparent 90deg
  );
  left: 80px;
}

.green {
  background: conic-gradient(
    from -135deg,
    #34A853 90deg,
    transparent 90deg
  );
  left: 120px;
}

动画效果

可以为Logo添加悬停动画：

.google-logo:hover .letter {
  animation: bounce 0.5s ease;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

响应式调整

@media (max-width: 600px) {
  .google-logo {
    font-size: 40px;
  }
}

以上方法提供了两种实现方式：基于文本字符的简单版本和完全用CSS绘制的图形版本。选择取决于具体需求，文本版本更轻量，图形版本更灵活。