添加到百度首页
添加收藏 RSS 网站地图 旧版网站
  • 全部
  • 网页特效
  • 建站教程
  • 设计分享
当前位置:首页 > 建站教程 > HTML5+CSS3 >

CSS3滤镜-Filters

时间:2015-10-09      来源:互联网     

  滤镜(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滤镜: 


<img id="animatePhoto" src=" http://www.webhek.com/wordpress/wp-content/uploads/2014/06/coffee.jpg " alt="Fx Photo">


@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;  
}  

  如果大量是使用滤镜,可能会对页面的性能产生影响;所以经常测试你的网站永远都没有坏处。

  CSS3里的滤镜给我们提供了更高级的对web图片、视频和网页元素进行个性化的方法。相信在不久的将来CSS滤镜(filter)很快就会在大大小小的网站上流行起来。更多HTML5+CSS3教程 建站教程

相关文章

大家都在看

最新更新