html – Starburst效果在CSS3中可行吗？

发布时间：2020-12-14 21:43:35 所属栏目：资源来源：网络整理

导读：有没有人知道如果以下图像可以在CSS中制作？光线和暗线可以而且应该是相等的宽度和边缘渐渐变暗，使整体背景是深色(在这种情况下是深蓝色)。任何帮助都非常感激。我的谷歌技能没有提供任何这种效果的帮助，只有“starburst贴纸/徽章的东西”被发现。解决方

有没有人知道如果以下图像可以在CSS中制作？光线和暗线可以而且应该是相等的宽度和边缘渐渐变暗，使整体背景是深色(在这种情况下是深蓝色)。

任何帮助都非常感激。我的谷歌技能没有提供任何这种效果的帮助，只有“starburst贴纸/徽章的东西”被发现。

解决方法

不，不幸的是，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在数据网址中使用此图像。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!