css制作太阳模型
使用CSS绘制太阳模型
通过CSS的border-radius和box-shadow属性可以创建简单的太阳模型，结合动画实现发光效果。
HTML结构：
<div class="sun"></div>基础样式：
.sun {
width: 100px;
height: 100px;
background: radial-gradient(circle, #f5d76e 30%, #f39c12 100%);
border-radius: 50%;
box-shadow: 0 0 50px #f1c40f;
}添加光芒效果
使用伪元素创建射线状光芒：
.sun::before {
content: "";
position: absolute;
width: 120px;
height: 120px;
background: radial-gradient(circle, transparent 40%, #f1c40f 70%);
border-radius: 50%;
top: -10px;
left: -10px;
z-index: -1;
}实现脉动动画
通过关键帧动画模拟太阳发光效果：
@keyframes pulse {
0% { box-shadow: 0 0 30px #f1c40f; }
50% { box-shadow: 0 0 70px #f1c40f; }
100% { box-shadow: 0 0 30px #f1c40f; }
}
.sun {
animation: pulse 3s infinite ease-in-out;
}完整示例代码
<!DOCTYPE html>
<html>
<head>
<style>
.sun {
width: 100px;
height: 100px;
background: radial-gradient(circle, #f5d76e 30%, #f39c12 100%);
border-radius: 50%;
box-shadow: 0 0 50px #f1c40f;
position: relative;
animation: pulse 3s infinite ease-in-out;
}
.sun::before {
content: "";
position: absolute;
width: 120px;
height: 120px;
background: radial-gradient(circle, transparent 40%, #f1c40f 70%);
border-radius: 50%;
top: -10px;
left: -10px;
z-index: -1;
}
@keyframes pulse {
0% { box-shadow: 0 0 30px #f1c40f; }
50% { box-shadow: 0 0 70px #f1c40f; }
100% { box-shadow: 0 0 30px #f1c40f; }
}
</style>
</head>
<body>
<div class="sun"></div>
</body>
</html>进阶效果选项
- 添加旋转光晕：
.sun::after { content: ""; position: absolute; width: 150px; height: 150px; background: conic-gradient( transparent 0deg 30deg, rgba(241,196,15,0.3) 30deg 60deg, transparent 60deg ); border-radius: 50%; top: -25px; left: -25px; animation: rotate 10s linear infinite; }
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
2. 调整颜色渐变：
```css
background: radial-gradient(
circle at 30% 30%,
#fffde7 0%,
#f5d76e 40%,
#f39c12 100%
);
