当前位置：首页 > CSS

css制作谷歌logo

2026-04-02 01:00:55CSS

使用CSS制作谷歌Logo

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

HTML结构

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

CSS样式

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

.letter {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.g-blue { background-color: #4285F4; }
.g-red { background-color: #EA4335; }
.g-yellow { background-color: #FBBC05; }
.g-green { background-color: #34A853; }

/* 第一个G字母的弯曲部分 */
.g-blue::before {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border: 8px solid white;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(45deg);
  top: -8px;
  left: 20px;
}

动画效果增强

可以为Logo添加悬停动画效果：

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

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

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

响应式调整

添加媒体查询确保不同设备上的显示效果：

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

文字版本替代方案

如果需要显示完整的"Google"文字：

css制作谷歌logo

<div class="google-text">Google</div>

.google-text {
  font-family: 'Product Sans', Arial, sans-serif;
  font-size: 72px;
  font-weight: bold;
  background: linear-gradient(
    to right,
    #4285F4,
    #EA4335,
    #FBBC05,
    #4285F4,
    #34A853,
    #EA4335
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}