添加到百度首頁
添加收藏 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教程 建站教程

相關文章
web前端視頻教程


大家都在看

最新更新

web前端視頻教程
彩票中奖指