当前位置：首页 > CSS

css制作Googlelogo

2026-04-01 05:31:12CSS

使用CSS制作Google Logo

Google的Logo由四个彩色字母组成（G、o、o、g、l、e），可以通过CSS的::before和::after伪元素结合背景色和变形实现。

HTML结构

<div class="google-logo">
  <span class="letter g"></span>
  <span class="letter o1"></span>
  <span class="letter o2"></span>
  <span class="letter g2"></span>
  <span class="letter l"></span>
  <span class="letter 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;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.g {
  background: #4285F4;
}

.o1 {
  background: #EA4335;
}

.o2 {
  background: #FBBC05;
}

.g2 {
  background: #4285F4;
}

.l {
  background: #34A853;
}

.e {
  background: #EA4335;
}

/* 添加G字母的横线 */
.g::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 12px;
  background: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

使用纯CSS绘制更复杂的Google Logo

如果需要更接近原版Logo的设计，可以使用CSS的clip-path和渐变：

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

.g {
  position: absolute;
  width: 52px;
  height: 52px;
  background: 
    linear-gradient(135deg, #4285F4 50%, transparent 50%),
    linear-gradient(to right, #EA4335, #FBBC05, #34A853);
  border-radius: 50%;
  left: 0;
  clip-path: polygon(
    0 0, 100% 0, 100% 50%, 
    60% 50%, 60% 60%, 50% 60%,
    50% 50%, 0 50%
  );
}

/* 其他字母类似处理 */

响应式调整

为了使Logo适应不同屏幕尺寸，可以添加媒体查询：

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

动画效果

可以为Logo添加悬停动画：

css制作Googlelogo

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

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

这些方法提供了从简单到复杂的多种CSS实现方式，可以根据项目需求选择适合的方案。