具有css3梯度的太阳爆发效应

我已经四处寻找并尝试了几天，但我似乎不能百分之百地正确。。。我试图通过css3渐变实现以下效果：

我得到的最接近的是：

html{
背景：
线性梯度（80度，透明50%，#ddd 50%，#ddd），
线性梯度（90度，透明50%，#ddd 50%，#ddd），
线性梯度（82度，透明50%，#eee 50%，#eee），
线性梯度（67度，透明50%，#ddd 50%，#ddd），
线性梯度（52度，透明50%，#eee 50%，#eee），
线性梯度（37度，透明50%，#ddd 50%，#ddd），
线性梯度（22度，透明50%，#eee 50%，#eee），
线性梯度（7度，透明50%，#ddd 50%，#ddd），
线性梯度（-8度，透明50%，#eee 50%，#eee），
线性梯度（-23度，透明50%，#ddd 50%，#ddd），
线性梯度（-38度，透明50%，#eee 50%，#eee），
线性梯度（-53度，透明50%，#ddd 50%，#ddd），
线性梯度（-68度，透明50%，#eee 50%，#eee），
线性梯度（-83度，透明50%，#ddd 50%，#ddd）；
背景位置：中心-100%；
背景色：#eee；
背景大小：100%200%；
最小高度：100%；
}

您的

背景位置设置为
中心-100%。只用

background-position: center center;

现在，通过此更改和您提供的代码，图像的一半已经完成；）。只需添加更多的
线性渐变的后半部分
就可以使用
:before
和
:before
:pseudo元素来获得这种效果


html，正文{
宽度：100%；
身高：100%；
保证金：0；
}
#梯度{
位置：相对位置；
宽度：100%；
身高：100%；
}
#毕业生：之后，#毕业生：之前{
内容：''；
位置：绝对位置；
背景：线性梯度（90度，透明50%，黑色50%，黑色），线性梯度（82度，透明50%，12E0DB 50%，12E0DB），线性梯度（67度，透明50%，000000 50%，000000），线性梯度（52度，透明50%，12E0DB 50%，12E0DB），线性梯度（37度，透明50%，000000 50%，000000），线性梯度（22度，透明50%，#12E0DB 50%，#12E0DB），线性梯度（7度，透明50%，#000000 50%，#000000），线性梯度（-8度，透明50%，#12E0DB 50%，#12E0DB 50%，#12E0DB），线性梯度（-23度，透明50%，#000000 50%，#000000），线性梯度（-38度，透明50%，#12E0DB 50%，#12E0DB 50%，#12E0DB），线性梯度（-53度，透明50%，#000000 50%，#000000），线性梯度（-68度，透明50%，#12E0DB 50%，#12E0DB），线性梯度（-83度，透明50%，#000000 50%，#000000），线性梯度（-90度，透明50%，#12E0DB 50%，#12E0DB 50%，#12E0DB）；
背景位置：0%0%；
背景大小：200%100%；
身高：100%；
宽度：50%；
}
#毕业生：以前{
左：50%；
变换：旋转（180度）；
}
@chipChocolate.py给出了一个绝妙的解决方案！这是基于他的改进

在Firefox中，透明的
的行为类似于

rgba（0,0,0,0），在边缘留下一条细细的灰线。更改为rgba（255255,0）看起来更好

使视觉效果更接近OP的截图：36条带，每条带占据10度角

对

标签有效，就像OP的尝试一样

顺便说一句：Chrome的渲染引擎糟透了，最好在Firefox中查看

html{
身高：100%；
位置：相对位置；
}
html:before，html:after{
内容：''；
身高：100%；
宽度：50%；
位置：绝对位置；
排名：0；
背景大小：200%100%；
背景图像：线性梯度（85度，rgba（255255255,0）50%，#12e0db 50%，#12e0db），
线性梯度（75度，rgba（255255255,0）50%，#000 50%，#000），
线性梯度（65度，rgba（255255255,0）50%，#12e0db 50%，#12e0db），
线性梯度（55度，rgba（255255255,0）50%，#000 50%，#000），
线性梯度（45度，rgba（255255255,0）50%，#12e0db 50%，#12e0db），
线性梯度（35度，rgba（255255255,0）50%，#000 50%，#000），
线性梯度（25度，rgba（255255255,0）50%，#12e0db 50%，#12e0db），
线性梯度（15度，rgba（255255255,0）50%，#000 50%，#000），
线性梯度（5度，rgba（255255255,0）50%，#12e0db 50%，#12e0db），
线性梯度（-5度，rgba（255255255,0）50%，#000 50%，#000），
线性梯度（-15度，rgba（255255255,0）50%，#12e0db 50%，#12e0db），
线性梯度（-25度，rgba（255255255,0）50%，#000 50%，#000），
线性梯度（-35度，rgba（255255255,0）50%，#12e0db 50%，#12e0db），
线性梯度（-45度，rgba（255255255,0）50%，#000 50%，#000），
线性梯度（-55度，rgba（255255255,0）50%，#12e0db 50%，#12e0db），
线性梯度（-65度，rgba（255255255,0）50%，#000 50%，#000），
线性梯度（-75度，rgba（255255255,0）50%，#12e0db 50%，#12e0db），
线性梯度（-85度，rgba（255255255,0）50%，#000 50%，#000），
线性梯度（-95度，rgba（255255255,0）50%，#12e0db 50%，#12e0db）；
}
html：以前{
左：50%；
变换：旋转（180度）；
}

在基于chrome浏览器的现代浏览器中，有圆锥渐变可以实现这一点

div{
高度：250px；
背景图像：
重复圆锥梯度（#fff 0 9度，#000 9度18度）；
}

---

目前，有一个

重复圆锥渐变

，它创建了一个由重复渐变组成的图像

div{
高度：500px；
背景：重复圆锥梯度(
hsl（186度100%50%/31%）0度15度，
hsla（0,0%，100%，0）0度30度
)#1c2c3c
}

---

我已将您的演示转换为堆栈溢出代码片段