使用 css3 制作太阳光线图形

Question

我想知道如何使用 css3 制作类似于日出的东西。 下面是一个示例。

Answer 1

这篇文章（虽然它也谈到了对光线进行动画处理）描述了制作一个 suburst 图案http://designrshub.com/2013/01/css3-keyframe-animations.html。

但是，我会使用 svg 图片。见Is Starburst effect doable in CSS3?

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>

Answer 2

是的，有可能。

工作演示：https://codepen.io/lethargic/full/RRYdxX

我在github.com/pestbarn/starburst.css写了一个普通的CSS版本和一个Sass mixin。

跨浏览器？

据我所知，是的。需要在 11 以下的 IE 版本中进行测试，但在其他方面似乎得到了很好的支持（截至 2019 年完整的browser support）。

动画？

是的，就像您为任何其他元素设置动画一样。

注意事项？

唉，有。在色轮上使用远离另一种颜色的颜色会产生锯齿状边缘。我建议使用彼此接近的颜色。

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

使用 Sass mixin，您可以简单地执行以下操作：

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

这将使用您要求的颜色创建星暴/旭日效果，爆发相距11 度（较小的数字 = 更紧密的爆发）。