css制作谷歌图标
使用CSS绘制谷歌图标
谷歌图标由四个彩色字母组成，可以通过CSS的伪元素和背景色属性实现。以下是具体实现方法：
<div class="google-logo">
<span class="blue"></span>
<span class="red"></span>
<span class="yellow"></span>
<span class="green"></span>
</div>.google-logo {
position: relative;
width: 200px;
height: 200px;
}
.google-logo span {
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
}
.blue {
background: #4285F4;
top: 20px;
left: 20px;
}
.red {
background: #EA4335;
top: 20px;
right: 20px;
}
.yellow {
background: #FBBC05;
bottom: 20px;
left: 20px;
}
.green {
background: #34A853;
bottom: 20px;
right: 20px;
}添加字母效果
若要更接近真实谷歌图标，可以添加字母G的白色部分：
.google-logo::before {
content: "G";
position: absolute;
font-family: 'Product Sans', Arial, sans-serif;
font-size: 90px;
font-weight: bold;
color: white;
z-index: 10;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}响应式调整
使图标能适应不同屏幕尺寸：
@media (max-width: 600px) {
.google-logo {
width: 100px;
height: 100px;
}
.google-logo span {
width: 40px;
height: 40px;
}
.google-logo::before {
font-size: 45px;
}
}动画效果
添加简单的悬停动画：
.google-logo:hover span {
transform: scale(1.1);
transition: transform 0.3s ease;
}注意事项
- 使用标准谷歌色值确保颜色准确
- 考虑添加
Product Sans字体引用以获得最佳视觉效果 - 对于更复杂的实现，可以使用SVG或Canvas技术
- 确保各元素的z-index正确设置以避免重叠问题
以上代码将创建一个简洁的谷歌图标CSS实现，可根据需要调整尺寸、颜色和动画效果。
