使用css3制作日光图

我想知道如何使用css3制作类似sunrise的东西。 下面是一个例子。

这篇文章（虽然它也讨论了光线的动画）描述了如何制作一个suburst模式

但是，我会使用svg图像。看

SVG：

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="512px" height="512px" viewBox="-256 -256 512 512"
  xmlns="http://www.w3.org/2000/svg" version="1.1" 
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Burst</title>
<defs>
  <g id="burst">
    <g id="quad">
      <path id="ray" d="M0,0 -69,-500 69,-500 z" />
      <use xlink:href="#ray" transform="rotate(30)"/>
      <use xlink:href="#ray" transform="rotate(60)"/>
      <use xlink:href="#ray" transform="rotate(90)"/>
    </g>
    <use xlink:href="#quad" transform="rotate(120)"/>
    <use xlink:href="#quad" transform="rotate(240)"/>
  </g>
  <radialGradient id="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
    <stop offset="0%" stop-color="white" stop-opacity="0.65"/>
    <stop offset="100%" stop-color="black" stop-opacity="0.65"/>
  </radialGradient>
  <!-- a circle mask -->
  <mask id="m"><circle r="256" fill="white"/></mask>
</defs>
<!-- added a mask and scaled it to a different aspect ratio below. scale(x,y) -->
<g mask="url(#m)" transform="scale(1, 0.75)"> 
  <use xlink:href="#burst" fill="lightslateblue"/>
  <use xlink:href="#burst" fill="darkslateblue" transform="rotate(15)"/>
  <circle r="360px" fill="url(#grad)" />
</g>
</svg>

爆发

是的，这是可能的。

工作演示：

我已经在上写了一个香草CSS版本以及一个Sass混音

跨浏览器？

据我所知，是的。需要在低于11的IE版本中进行测试，但在其他方面似乎得到了很好的支持（从2019年起完全支持）

可设置动画？

是的，就像你将动画任何其他元素

注意事项？

唉，确实有。在色轮上使用远离其他颜色的颜色将创建锯齿状边缘。我建议使用彼此相近的颜色

此外，由于效果是使用伪元素创建的，因此在某些情况下需要显式设置元素的高度和宽度

使用Sass mixin，您只需执行以下操作：

@include starburst(both, 11, #184256, #194052);

---

这将使用您要求的颜色创建星暴/日暴效果，星暴间隔

11

度（较小的数字=较紧的星暴）。

这篇文章（尽管它也讨论了光线动画）描述了如何制作次星暴图案。但是，我会使用svg图像。谢谢你，你真是太棒了helpful@BarbaraLaird，这个问题被1000多名开发人员看到，请提交您的评论作为答案。这是否回答了您的问题？