Starburst效果在CSS3中是否可行？

Question

有人知道是否可以在CSS中创建以下图像？浅色和深色线条可以且应该等于宽度，边缘渐变为较暗的颜色，因此整体背景将是深色（在这种情况下为深蓝色）。

任何帮助都非常感谢。我的谷歌技能没有对这种效果提供任何帮助，只发现了“爆炸贴纸/徽章类型的东西”。

Answer 1

没有。遗憾的是，css3生成的图像规格不包括圆锥/角度渐变（尽管它们可能会在下一次修订中出现！），这将是仅使用css执行此操作的最可能方式。但是，可以使用css + 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 background-size: cover。而已。 Here's a fiddle在数据网址中使用此图片。

Answer 2

是的，有可能。

几个月前我就有了这个完全相同的问题，并且找不到使用纯CSS完成此效果的任何示例。所以，我决定修补它。

经过大量的实验后，我终于提出了一个解决方案，不仅在CSS中，而且还有一个相当便携的解决方案（相对而言）。

我开始分别创建上半部分和下半部分，在::before和::after伪元素上使用线性渐变技巧，第二步（到目前为止是最多的时间）消耗步骤）将两半合并为一个元素。

工作演示： http://codepen.io/pestbarn/pen/aBybeK

（原始海报想要一个晕影效果，我在上面的演示中单独创建，使用带有径向渐变的div叠加）

我在github.com/pestbarn/starburst.css提供了vanilla CSS和Sass mixin，您可以在官方演示页面找到一些示例。

这是跨浏览器吗？

据我所知，是的。您可以在存储库中看到当前的浏览器支持。

我可以为其设置动画吗？

是的，就像你会为任何其他元素制作动画一样。亲自试试吧！

有什么警告吗？

唉，有。使用与另一种颜色基本不同的两种颜色（例如亮度）将产生锯齿状边缘。因此，我建议使用彼此非常相似的颜色。

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

随意尝试！

Answer 3

a draft的CSS4 Lea Verou中有一个实验属性：

div
{
    repeating-conical-gradient(black, black 5%, #f06 5%, #f06 10%)
}

但据我所知，这只是一个提案，仅在CSS3中是不可能的。只需坚持使用背景图像，或者您可以尝试在旋转元素中使用三角形图像。

Answer 4

通过在CSS规范中添加conic-gradient()，现在可以使用旨在用于该效果类型的CSS来创建效果。

基本上，您将像这样设置渐变停止：

background-image: conic-gradient( circle,
  black 0%,  black 5%,
  white 5%,  white 10%,
  black 10%, black 15%,
  ...
);

Here's a working fiddle

And here's an animated version :-)但是，该动画在我的浏览器上有点断断续续。也许可以对其进行优化。

请注意，这仅在WebKit浏览器中有效；即Chrome和Safari。但老实说，这涵盖了最大的用户份额，我相信其余的人会尽快为其添加支持。

Answer 5

目前有一种比“ conic-gradient（）”方法更好的解决方案来扩展“ marcus erronius”答案。有repeating-conic-gradient，可创建包含重复渐变的图像。

div {
  height: 500px;
  background: repeating-conic-gradient(
    hsl(0deg 0% 80% / 31%) 0deg 15deg,
    hsla(0,0%,100%,0) 0deg 30deg
  ) #3c1c32
}

<div></div>

您可以在W3 CSS Image Values上详细了解它。 此属性与所有浏览器都不兼容。检查caniuse了解更多信息。