css滤镜属性渐变_使用滤镜对CSS渐变进行动画处理

css滤镜属性渐变

Officially, gradients can’t yet be animated. However, using CSS filters, you can animate the color values within them, with a few conditions.

正式而言，尚无法对渐变进行动画处理。 但是，使用CSS 过滤器 ，您可以在一些条件下为其中的颜色值设置动画。

hue-rotate in both CSS and SVG (from which CSS3 filters are derived) moves the visual appearance of an element around the hsl color wheel: red at the top at 0 degrees, green at 120, etc. You might wish to think of hue-rotate as a filter that makes color values “redder”, “bluer”, etc, although its effects are usually more overt than that.  The hue-rotate filter is given a degree value depending where it is on the wheel: adding filter: hue-rotate(0deg) to an element that is purely red will make no difference, but increasing the degree value will shift the color of the element through the spectrum.

CSS和SVG中的 hue-rotate (派生CSS3滤镜)在hsl色轮上移动元素的视觉外观：红色在0度处位于顶部，绿色在120度处等等。您可能会想到hue-rotate作为使颜色值“更红”，“更蓝”等的滤镜，尽管其效果通常比这些更明显。 给hue-rotate滤镜一个度数，具体取决于它在方向盘上的位置：将filter: hue-rotate(0deg)到一个纯红色的元素上不会有任何区别，但是增加度数会改变该色调的颜色光谱中的元素。

hue-rotate transition of red-blue gradient through 360 degrees

红蓝渐变色相旋转360度

Filters can be animated, as I’ve shown previously, so we can apply an animated hsl filter to a gradient to sweep it through a range of colors. (I’ve activated the animations shown in this article on mouse hover, to reduce visual overkill. Because CSS3 filters currently only work in Webkit, the examples will only work in Safari or Chrome at this writing.)

如前所述 ，滤镜可以设置为动画，因此我们可以将动画的hsl滤镜应用于渐变，以将其扫过一系列颜色。 (为了减少视觉过度杀伤，我激活了本文中悬停在鼠标上的动画。由于CSS3过滤器目前仅在Webkit中起作用，因此在撰写本文时 ， 示例仅在Safari或Chrome中起作用 。)

The example on the left is fairly simple: a red-to-blue gradient hue-rotated through the entire spectrum. Stripped of vendor prefixes, the CSS is:

左侧的示例非常简单：从红色到蓝色的渐变色在整个光谱中旋转。 除去供应商前缀 ， CSS为：

div {
	width: 100px;
	height: 200px;
	background: linear-gradient(
		#ff0000 0%,
		#1600ff 100%
		); 
	transition: 8s filter linear;
}
div:hover {
	filter: hue-rotate(360deg);
}

The second example at the top of this article uses an angled linear radient and CSS keyframes to produce an endless sweep of color:

本文顶部的第二个示例使用成角度的线性辐射和CSS关键帧来产生无尽的色彩：

@keyframes sweep {
	100% { filter: hue-rotate(-60deg);
}
div {
	background: linear-gradient(
		30deg, #030 0%,
		hsl(55, 100%, 20%) 100%
		);
	width: 768px;
	height: 200px;
}
div#sweep:hover { 
	animation: sweep 3s alternate infinite;
}

Note that hue-rotate works from the current hue of the element: it doesn’t jump to 0 degrees on the color wheel and proceed from there for every gradient.

请注意， hue-rotate从元素的当前色相开始工作：它不会在色轮上跳到0度，而是针对每个渐变从那里开始。

While this technique works, it carries two major disadvantages:

尽管此技术有效，但它具有两个主要缺点：

• The colors used in the animation will always be presented in the order that hues occur in the color wheel: you cannot use this technique to transition directly from red to blue, for example. (You could, however, “leap” the gradient using the step animation option, or reverse through the color wheel by using negative values).
  动画中使用的颜色将始终按照色轮中色相的出现顺序显示：例如，您不能使用此技术直接从红色过渡到蓝色。 (不过，您可以使用步进动画选项“跳过”渐变，或者使用负值在色轮中反转)。
• Second, greyscale values can’t be animated this way: they lack any hue component to transition.
  其次，灰度值不能以这种方式进行动画处理：它们缺少过渡的任何色相成分。

Under those limitations, the technique is a useful one; for broader application, SVG also has an gradient and animation option, but discussion of that will have to wait for another article.

在这些限制下，这项技术是有用的。 对于更广泛的应用程序， SVG还提供了渐变和动画选项，但有关该主题的讨论将不得不等待另一篇文章。

翻译自: https://thenewcode.com/579/Animating-CSS-Gradients-With-Filters

css滤镜属性渐变