过滤器过滤css_CSS过滤器

过滤器过滤css

CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have a look at how CSS filters work and how you can quickly create elements that are beautifully filtered!

最近，WebKit每晚都对CSS筛选器提供支持。 CSS过滤器提供了一种用于修改基本DOM元素，图像或视频的呈现的方法。 CSS过滤器允许模糊，扭曲和修改元素的颜色强度。 让我们看看CSS过滤器是如何工作的，以及如何快速创建经过精美过滤的元素！

View Demo 观看演示

There are many CSS filters to choose from: grayscale, blur, sepia, saturate, opacity, brightness, contrast, hue-rotate, and invert. While each property value generally falls between 0 and 1, there are a few exceptions. The blur property uses a unit of pixels and can be any whole number, and the hue-rotate filter value is a whole number with a "deg" unit.

有很多CSS过滤器可供选择： grayscale ， blur ， sepia ， saturate ， opacity ， brightness ， contrast ， hue-rotate和invert 。 虽然每个属性值通常介于0和1之间，但也有一些例外。 blur属性使用像素单位，并且可以是任何整数，并且hue-rotate滤镜值是一个以“度”为单位的整数。

The following CSS snippet will blur an element:

以下CSS代码段将使元素blur ：

.myElement {
	filter: blur(2px);
}

Multiple filters are separated by spaces, so we could also add grayscale and opacity values to the blur:

多个滤镜之间用空格隔开，因此我们还可以为模糊添加grayscale和opacity值：

.myElement {
	filter: blur(2px) grayscale(.5) opacity(0.8);
}

Let's get crazy with hue-rotate as well:

让我们也因hue-rotate而疯狂：

.myElement {
	filter: blur(2px) grayscale(.5) opacity(0.8) hue-rotate(120deg);
}

If static filtering isn't enough for you, CSS filters also animate with @-webkit-keyframes:

如果静态过滤对您来说还不够，那么CSS过滤器也会使用@-webkit-keyframes动画处理：

@keyframes testAnim {
	0% {
		filter: grayscale(0.5) blur(1px) saturate(2);
	}
	100% {
		filter: grayscale(0.2) blur(6px) saturate(9);
	}
}

/* the photo to be animated via filters */
#animatePhoto {}
#animatePhoto:hover {
	 animation-name: testAnim;
	 animation-duration: 2s;
	 animation-iteration-count: 1;
	 animation-direction: alternate;
	 animation-timing-function: ease-out;
	 animation-fill-mode: forwards;
	 animation-delay: 0s;
}

Expect a performance hit with heavy CSS filter usage; be sure to heavily test your site wherever filtering is used. CSS filters have not yet hit mobile, but assume that CSS filters will be taxing in that environment as well.

预期大量使用CSS过滤器会导致性能下降； 无论使用什么过滤条件，请务必严格测试您的网站。 CSS过滤器尚未投放移动市场，但假设CSS过滤器在该环境中也会增加负担。

Note: I've yet to successfully filter a <video> tag; it's possible that feature isn't in the first implementation.

注意：我尚未成功过滤<video>标签； 该功能可能不在第一个实现中。

View Demo 观看演示

The additional of CSS filters to the web provides a new level of customization for images, video, and DOM nodes in general. We should see some solid, practical uses for CSS filters emerge in the coming years. Have fun playing around with CSS filters and let me know if you can think of some immediate, practical uses!

Web上额外CSS过滤器通常为图像，视频和DOM节点提供了更高级别的定制。 未来几年，我们应该会看到CSS过滤器有一些可靠的实际用途。 玩转CSS过滤器，玩得开心，让我知道您是否可以想到一些即时的实际用途！

翻译自: https://davidwalsh.name/css-filters

过滤器过滤css