20

有人知道下面的图像是否可以用 CSS 制作吗？亮线和暗线可以而且应该是相等的宽度，并且边缘会逐渐变暗，这样整个背景就会变成深色（在这种情况下是深蓝色）。

任何帮助都将不胜感激。我的谷歌技能对这种效果没有任何帮助，只找到了“星爆贴纸/徽章之类的东西”。

在此处输入图像描述

4

5 回答 5

26

不。遗憾的是，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。而已。这是在数据 url 中使用此图像的小提琴。

于 2012-12-20T10:18:12.513 回答
10

是的，这是可能的。

但这需要一些工作。

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

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

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

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

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

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

这是跨浏览器吗？

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

我可以动画吗？

是的，就像您为任何其他元素设置动画一样。自己试试吧！

有什么注意事项吗？

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

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

随意尝试！

于 2016-11-25T22:01:41.857 回答
2

Lea Verou的 CSS4草案中有一个实验性属性：

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

但据我了解，这只是一个建议，仅在 CSS3 中是不可能的。只需使用背景图像，或者您可以尝试在旋转元素中使用三角形图像。

于 2012-12-20T10:00:08.537 回答
2

随着conic-gradient()CSS 规范的添加，现在可以使用用于该类型效果的 CSS 创建效果。

本质上，您将像这样设置渐变色标：

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

这是一个工作小提琴

这是一个动画版本:-) 不过，我的浏览器上的动画有点不稳定。它可能会被优化一点。

请注意，这只适用于 WebKit 浏览器；即 Chrome 和 Safari。但老实说，这涵盖了大部分用户，我相信其余的用户很快就会增加对它的支持。

于 2018-12-24T09:02:56.497 回答
0

目前有比“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了解更多信息。

于 2020-10-14T09:41:01.190 回答