Starburst效果在CSS3中是否可行？ [英] Is Starburst effect doable in CSS3?

问题描述

有没有人知道如果下面的图像可以在CSS？浅色和深色线可以并且应该是相等的宽度，边缘淡入较暗的颜色，因此整体背景将是深色（在这种情况下为深蓝色）。

does anybody know if the following image could be made in CSS? Light and dark lines could and should be equal width and edges fade in to darker color so that overall background would be dark color (dark blue in this case).

任何帮助是很好的赞赏。我的google技能没有提供任何帮助这种效果，只有星暴贴纸/徽章的东西被发现。

Any help is well appreciated. My google skills didn't provide any help on this kind of effect, only 'starburst stickers / badges kind of things' was found.

推荐答案

不。遗憾的是，css3生成的图像规格不包括锥形/角度渐变（虽然他们可能会出来在下一个版本！），这将是最有可能的方法，只使用css。但是，您可以使用css + svg 来执行此操作。我实际上有一个svg文件坐在一个实验我做一次：

No. Sadly, the css3 generated image specs do not include conical/angular gradients (though they might come out in the next revision!) which would be the most likely way to do this using only css. However, you can do this using css+svg. I actually had this svg document sitting around from an experiment I did once:

<?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 。而已。 这是一个小提示在数据网址中使用此图片。

Set that as your background-image, and set the css background-size: cover. That's it. Here's a fiddle using this image in a data url.

这篇关于Starburst效果在CSS3中是否可行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！