问星暴效果在CSS3中可行吗？

EN

对于Lea Verou的CSS4，在a draft中有一个实验属性：

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

但据我所知，这只是一个提议，不可能单独在CSS3中实现。只使用背景图像，或者您可以尝试在旋转元素中使用三角形图像。

通过将conic-gradient()添加到CSS规范中，现在可以使用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。但老实说，这覆盖了大部分用户，我相信其他用户很快就会增加对它的支持。

目前有一个比“圆锥梯度()”方法更好的解决方案来扩展"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。