css制作goole
使用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>注意事项
- 颜色代码使用Google官方品牌色：蓝色
#4285F4、红色#EA4335、黄色#FBBC05、绿色#34A853 - 字母"g"和第二个"o"使用相同蓝色，保持与原标志一致
- 响应式设计可通过调整
font-size的媒体查询实现
