当前位置：首页 > CSS

css制作goole

2026-01-08 20:52:33CSS

使用CSS制作Google标志

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

字体选择

Google标志使用自定义字体"Product Sans"，但可以通过CSS的font-family属性选择相近的无衬线字体（如Arial或Roboto）作为替代：

.logo {
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  font-size: 48px;
}

字母颜色

每个字母需要单独设置颜色，通过span元素包裹并赋予不同颜色：

<div class="logo">
  <span style="color: #4285F4;">G</span>
  <span style="color: #EA4335;">o</span>
  <span style="color: #FBBC05;">o</span>
  <span style="color: #4285F4;">g</span>
  <span style="color: #34A853;">l</span>
  <span style="color: #EA4335;">e</span>
</div>

悬停效果

添加简单的悬停动画增强交互性：

.logo span {
  transition: transform 0.3s;
}
.logo span:hover {
  transform: scale(1.2);
}

完整示例代码

结合HTML和CSS的完整实现：

<!DOCTYPE html>
<html>
<head>
  <style>
    .logo {
      font-family: 'Arial', sans-serif;
      font-weight: bold;
      font-size: 48px;
      display: inline-block;
    }
    .logo span {
      transition: transform 0.3s;
      display: inline-block;
    }
    .logo span:hover {
      transform: scale(1.2);
    }
  </style>
</head>
<body>
  <div class="logo">
    <span style="color: #4285F4;">G</span>
    <span style="color: #EA4335;">o</span>
    <span style="color: #FBBC05;">o</span>
    <span style="color: #4285F4;">g</span>
    <span style="color: #34A853;">l</span>
    <span style="color: #EA4335;">e</span>
  </div>
</body>
</html>