css制作Googlelogo

使用CSS制作Google Logo

Google的logo由四个彩色字母组成，可以通过CSS的::before和::after伪元素结合背景色和旋转实现。

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

.google-logo {
  display: flex;
  font-family: 'Product Sans', Arial, sans-serif;
  font-size: 48px;
  font-weight: bold;
  letter-spacing: -2px;
  position: relative;
}

.google-logo span {
  position: relative;
}

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

/* 字母G的钩子效果 */
.blue::before {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border: 8px solid #4285F4;
  border-radius: 50%;
  border-right-color: transparent;
  transform: rotate(45deg);
  left: -5px;
  top: -5px;
}

纯CSS绘制简化版Logo

使用CSS的border和transform属性绘制彩色圆环：

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

.google-circle {
  width: 100px;
  height: 100px;
  position: relative;
  border-radius: 50%;
}

.arc {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 10px solid transparent;
  border-radius: 50%;
  clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 50%);
}

.blue { border-top-color: #4285F4; transform: rotate(0deg); }
.red { border-right-color: #EA4335; transform: rotate(90deg); }
.yellow { border-bottom-color: #FBBC05; transform: rotate(180deg); }
.green { border-left-color: #34A853; transform: rotate(270deg); }

动画效果实现

为logo添加悬停旋转动画：

.google-circle:hover {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

响应式调整

通过媒体查询适应不同屏幕尺寸：

@media (max-width: 600px) {
  .google-logo { font-size: 32px; }
  .google-circle { width: 60px; height: 60px; }
  .arc { border-width: 6px; }
}

这些方法分别实现了不同复杂度的Google logo效果，第一种更接近实际字母形态，第二种则是抽象的彩色圆环表现。可根据实际需求选择实现方式，并通过调整颜色代码（HEX值）精确匹配Google的品牌色。