css制作Googlelogo

使用CSS制作Google Logo

通过CSS可以创建一个简洁的Google Logo，主要利用div元素和CSS属性实现颜色块和文字效果。

HTML结构

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

CSS样式

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

.blue, .red, .yellow, .green {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.blue {
  background: #4285F4;
  left: 0;
}

.red {
  background: #EA4335;
  left: 60px;
  top: -10px;
}

.yellow {
  background: #FBBC05;
  left: 120px;
}

.green {
  background: #34A853;
  left: 180px;
  top: -10px;
}

.text {
  position: absolute;
  font-family: 'Product Sans', Arial, sans-serif;
  font-size: 60px;
  font-weight: bold;
  left: 80px;
  top: 40px;
  color: #5F6368;
}

调整细节

• 颜色值使用Google官方品牌色：#4285F4（蓝）、#EA4335（红）、#FBBC05（黄）、#34A853（绿）。
• 文字字体推荐使用Google的Product Sans，若不可用则降级到Arial或sans-serif。
• 通过position: absolute精确控制四个色块的位置，模拟字母“G”的拼接效果。

响应式优化

添加媒体查询以适应不同屏幕尺寸：

@media (max-width: 600px) {
  .google-logo {
    transform: scale(0.7);
  }
}