css制作Googlelogo
使用CSS制作Google Logo
Google的logo由四个彩色字母组成，可以通过CSS的::before和::after伪元素结合背景色和旋转实现。
<div class="google-logo">
<span class="blue"></span>
<span class="red"></span>
<span class="yellow"></span>
<span class="blue"></span>
<span class="green"></span>
<span class="red"></span>
</div>.google-logo {
display: flex;
font-family: 'Product Sans', Arial, sans-serif;
font-size: 48px;
font-weight: bold;
letter-spacing: -2px;
position: relative;
}
.google-logo span {
position: relative;
}
.blue { color: #4285F4; }
.red { color: #EA4335; }
.yellow { color: #FBBC05; }
.green { color: #34A853; }
/* 字母G的钩子效果 */
.blue::before {
content: '';
position: absolute;
width: 30px;
height: 30px;
border: 8px solid #4285F4;
border-radius: 50%;
border-right-color: transparent;
transform: rotate(45deg);
left: -5px;
top: -5px;
}纯CSS绘制简化版Logo
使用CSS的border和transform属性绘制彩色圆环：
<div class="google-circle">
<div class="arc blue"></div>
<div class="arc red"></div>
<div class="arc yellow"></div>
<div class="arc green"></div>
</div>.google-circle {
width: 100px;
height: 100px;
position: relative;
border-radius: 50%;
}
.arc {
position: absolute;
width: 100%;
height: 100%;
border: 10px solid transparent;
border-radius: 50%;
clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 50%);
}
.blue { border-top-color: #4285F4; transform: rotate(0deg); }
.red { border-right-color: #EA4335; transform: rotate(90deg); }
.yellow { border-bottom-color: #FBBC05; transform: rotate(180deg); }
.green { border-left-color: #34A853; transform: rotate(270deg); }动画效果实现
为logo添加悬停旋转动画：
.google-circle:hover {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}响应式调整
通过媒体查询适应不同屏幕尺寸：
@media (max-width: 600px) {
.google-logo { font-size: 32px; }
.google-circle { width: 60px; height: 60px; }
.arc { border-width: 6px; }
}这些方法分别实现了不同复杂度的Google logo效果，第一种更接近实际字母形态，第二种则是抽象的彩色圆环表现。可根据实际需求选择实现方式，并通过调整颜色代码（HEX值）精确匹配Google的品牌色。
