CSS滤镜(Filters)
来源:互联网 发布:优化关键词的方法 编辑:程序博客网 时间:2024/04/29 04:32
滤镜(Filters)是CSS3里新增的一种神奇的功能。说起滤镜(filter)效果,经常使用PhotoShop的人应该非常清楚,每张用Photoshop制作出来的图片几乎都使用了滤镜进行美化。而CSS滤镜,不需要你使用任何做图软件,用纯CSS就会生成多种的滤镜效果,比如模糊效果,透明效果,色彩反差调整,色彩反相等等;不仅能对图片进行滤镜处理,而且对任何网页元素、甚至视频都可以处理。下面让我们来看看CSS滤镜是如何使用的,看看我们如何用简单的代码创造出漂亮的滤镜效果!
有很多的CSS滤镜(filter)效果可以使用:grayscale(灰度级)
, blur(模糊)
, sepia(怀旧老照片效果)
, saturate(色彩饱和度)
, opacity(透明度)
, brightness(亮度)
, contrast(对比度)
, hue-rotate(色调)
, 和invert(反相)
。这些CSS属性的属性值基本上都是0到1之间的数值,但有几个例外,blur
属性值以像素为单位,可以是任何整数。而hue-rotate
滤镜值以”deg”单位,度数。
下面是blur
滤镜的用法例子:
.myElement {filter: blur(2px);}可以同时使用多个滤镜,之间用空格分开,所以,我们可以往里面增加
grayscale
和opacity
滤镜效果:.myElement {filter: blur(2px) grayscale (.5) opacity(0.8);}对
hue-rotate
滤镜的使用也是一样的:.myElement {filter: blur(2px) grayscale (.5) opacity(0.8) hue-rotate(120deg);}如果静态滤镜效果还不能让你满意,你可以使用
@keyframes
来生成动画效果的CSS滤镜:@keyframes testAnim {0% {filter: grayscale(0.5) blur(1px) saturate(2);}100% {filter: grayscale(0.2) blur(6px) saturate(9);}}/* 图片将呈现动画效果的滤镜处理过程 */#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;}如果大量是使用滤镜,可能会对页面的性能产生影响;所以经常测试你的网站永远都没有坏处。
0 0
- CSS滤镜(Filters)
- CSS滤镜(Filters)
- CSS滤镜(Filters)
- CSS滤镜转换简介 (Introduction to Filters and Transitions)
- CSS3滤镜(Filters)
- CSS3滤镜-Filters
- CSSgram-使用CSS Filters和CSS Blend Modes实现Instagram风格滤镜
- CSS Filters
- CSS滤镜
- CSS滤镜
- CSS 滤镜
- CSS滤镜
- css滤镜
- CSS滤镜
- CSS滤镜
- CSS滤镜
- CSS滤镜
- CSS滤镜
- KeyDown事件不响应
- 使用matlab预处理数据,读取,转置,切分,存储,导入
- Android中使用Handler引发的内存泄露
- 面向对象
- java微信公众号开发系列——入门
- CSS滤镜(Filters)
- LIBSVM学习(五)grid.py参数选择
- 关于 failed to find build tools revision 23.0.0 rc3的问题
- Python 语言及其应用 Chapter_6_Note 1 类的super功能
- nodejs系列学习:module-----(三)
- 用parse_url() 解析URL中的详细信息
- mapreduce job所需要的各种参数在Sqoop中的实现
- 面向切面的AOP编程
- Android-Studio常见报错解决方案