当前位置：首页 > CSS

用css制作goole

2026-04-01 22:54:00CSS

使用CSS制作Google标志

Google标志由多个彩色字母组成，可以通过CSS的字体、颜色和布局属性来实现。

HTML结构

用css制作goole

<div class="google-logo">
  <span class="blue">G</span>
  <span class="red">o</span>
  <span class="yellow">o</span>
  <span class="blue">g</span>
  <span class="green">l</span>
  <span class="red">e</span>
</div>

CSS样式

用css制作goole

.google-logo {
  font-family: 'Product Sans', Arial, sans-serif;
  font-size: 80px;
  font-weight: bold;
  display: flex;
}

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

添加字母倾斜效果

Google标志中的第二个"o"和"e"有轻微倾斜，可以通过transform属性实现。

.google-logo span:nth-child(3) {
  transform: skew(-15deg);
}

.google-logo span:nth-child(6) {
  transform: skew(-15deg);
}

响应式调整

为了使标志在不同屏幕尺寸下保持比例，可以添加媒体查询。

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

完整代码示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .google-logo {
      font-family: 'Product Sans', Arial, sans-serif;
      font-size: 80px;
      font-weight: bold;
      display: flex;
    }
    .blue { color: #4285F4; }
    .red { color: #EA4335; }
    .yellow { color: #FBBC05; }
    .green { color: #34A853; }
    .google-logo span:nth-child(3) {
      transform: skew(-15deg);
    }
    .google-logo span:nth-child(6) {
      transform: skew(-15deg);
    }
    @media (max-width: 600px) {
      .google-logo {
        font-size: 40px;
      }
    }
  </style>
</head>
<body>
  <div class="google-logo">
    <span class="blue">G</span>
    <span class="red">o</span>
    <span class="yellow">o</span>
    <span class="blue">g</span>
    <span class="green">l</span>
    <span class="red">e</span>
  </div>
</body>
</html>