当前位置：首页 > CSS

css制作googlelogo效果

2026-03-11 23:16:40CSS

使用CSS制作Google Logo效果

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

css制作googlelogo效果

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;
}