css制作太阳模型
使用CSS制作太阳模型
通过CSS的border-radius和box-shadow属性可以创建一个简单的太阳模型，结合动画效果可实现发光或旋转效果。
HTML结构
<div class="sun"></div>基础圆形太阳
.sun {
width: 100px;
height: 100px;
background: radial-gradient(circle, #f5d76e, #f39c12);
border-radius: 50%;
box-shadow: 0 0 50px #f1c40f;
}添加光线效果
通过伪元素或额外元素创建太阳光线，使用transform和gradient增强立体感：
.sun::after {
content: "";
position: absolute;
width: 120px;
height: 120px;
background: radial-gradient(circle, transparent 30%, #f1c40f 70%);
border-radius: 50%;
top: -10px;
left: -10px;
z-index: -1;
animation: pulse 3s infinite;
}
@keyframes pulse {
0% { opacity: 0.8; transform: scale(0.95); }
50% { opacity: 1; transform: scale(1.05); }
100% { opacity: 0.8; transform: scale(0.95); }
}实现旋转动画
通过CSS动画让太阳产生自转效果：
.sun {
animation: rotate 20s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}复杂光线变体
使用多个box-shadow层叠创建更强烈的光晕：
.sun {
box-shadow:
0 0 20px #f1c40f,
0 0 40px #f39c12,
0 0 60px #e67e22;
}响应式调整
通过CSS变量控制太阳大小，适应不同场景：
:root {
--sun-size: 100px;
}
.sun {
width: var(--sun-size);
height: var(--sun-size);
}注意事项：
- 使用
position: absolute时需确保父容器有position: relative - 光线颜色建议使用HSL色彩模式便于调整亮度（如
hsl(45, 100%, 50%)） - 性能优化：减少
box-shadow的扩散值过大可能影响渲染性能
