css制作googlelogo效果

使用CSS制作Google Logo效果

Google Logo由四个颜色的字母组成，可以通过CSS的::before和::after伪元素以及背景渐变实现颜色效果。

HTML结构

<div class="google-logo">
  <span class="letter g">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 {
  display: flex;
  font-family: 'Product Sans', Arial, sans-serif;
  font-size: 80px;
  font-weight: bold;
  gap: 8px;
}

.letter {
  position: relative;
}

/* 第一个G - 蓝色 */
.g {
  color: #4285F4;
}

/* 第一个o - 红色 */
.o1 {
  color: #EA4335;
}

/* 第二个o - 黄色 */
.o2 {
  color: #FBBC05;
}

/* 第二个g - 蓝色 */
.g2 {
  color: #4285F4;
}

/* l - 绿色 */
.l {
  color: #34A853;
}

/* e - 红色 */
.e {
  color: #EA4335;
}

添加倾斜效果

.google-logo {
  transform: skew(-10deg);
}

.letter {
  transform: skew(10deg);
}

阴影效果（可选）

.google-logo {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

动画效果（可选）

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

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

.google-logo:hover .letter:nth-child(2) {
  animation-delay: 0.1s;
}

.google-logo:hover .letter:nth-child(3) {
  animation-delay: 0.2s;
}

.google-logo:hover .letter:nth-child(4) {
  animation-delay: 0.3s;
}

.google-logo:hover .letter:nth-child(5) {
  animation-delay: 0.4s;
}

.google-logo:hover .letter:nth-child(6) {
  animation-delay: 0.5s;
}

实现要点

• 使用Product Sans字体（Google官方字体）或Arial作为替代
• 每个字母单独设置颜色以匹配Google品牌色
• 通过transform属性实现整体倾斜效果
• 可选添加悬停动画增强交互性
• 适当调整字体大小和间距以达到最佳视觉效果

这种方法完全使用CSS实现，无需图像，支持高清显示和任意缩放。