css制作googlelogo效果

使用CSS制作Google Logo效果

Google Logo由四个字母（G、o、o、g、l、e）组成，每个字母使用不同的颜色（蓝色、红色、黄色、蓝色、绿色、红色）。可以通过HTML和CSS实现类似效果。

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 {
  font-family: 'Product Sans', Arial, sans-serif;
  font-size: 72px;
  font-weight: bold;
  display: flex;
}

.letter {
  padding: 0 2px;
}

.g {
  color: #4285F4;
}

.o1 {
  color: #EA4335;
}

.o2 {
  color: #FBBC05;
}

.g2 {
  color: #4285F4;
}

.l {
  color: #34A853;
}

.e {
  color: #EA4335;
}

添加动画效果（可选）

可以为字母添加简单的悬停动画效果：

.letter {
  transition: transform 0.3s ease;
}

.letter:hover {
  transform: scale(1.2) rotate(10deg);
}

使用伪元素创建更复杂效果

可以通过伪元素为字母添加装饰效果：

.e::after {
  content: ".";
  color: #34A853;
  font-size: 80px;
  vertical-align: top;
  line-height: 0;
}

响应式调整

确保Logo在不同屏幕尺寸下保持合适大小：

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

注意事项

1. 使用Google官方字体'Product Sans'可获得最接近原版效果，但需注意版权问题
2. 颜色代码使用Google官方品牌色：
   • 蓝色：#4285F4
   • 红色：#EA4335
   • 黄色：#FBBC05
   • 绿色：#34A853
3. 字母间距和大小比例需要精细调整以达到最佳视觉效果