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.而已.这是在数据网址中使用此图像的小提琴.

Answer 2

对的,这是可能的.

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

经过大量的实验,我终于想出了一个解决方案,不仅是CSS,还有一个相当便携的解决方案(相对而言).

我开始分别创建上半部分和下半部分,使用线性渐变技巧::before和::after伪元素,第二步(到目前为止最耗时的步骤)是将两半合并为单个元素.

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

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

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

这是跨浏览器吗？

据我所知,是的.您可以在存储库中查看当前的浏览器支持.

我可以动画吗？

是的,就像你会动画任何其他元素一样.自己试试吧!

有什么警告吗？

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

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

随意尝试!