CSS3 濾鏡

了解攝影活着美圖秀秀之類美圖軟件的同學對濾鏡肯定不陌生，CSS3對各種濾鏡效果有了支持，可以做出很多好玩兒效果，走馬觀花了解一下

語法

filter: function(param);

很很多CSS3屬性一樣，監獄支持情況需要使用瀏覽器前綴，CSS濾鏡支持的方法有

1. grayscale 灰度
2. sepia 褐色
3. saturate 飽和度
4. hue-rotate 色相旋轉
5. invert 反色
6. opacity 透明度
7. brightness 亮度
8. contrast 對比度
9. blur 模糊
10. drop-shadow 陰影

效果

拿圖片做例子，看看效果

原圖

-webkit-filter:none;

以下效果都不是截圖，Chrome上看

模糊

-webkit-filter:blur(10px);

灰度

-webkit-filter:grayscale(0.5);

褐色

-webkit-filter:sepia(0.5);

亮度

-webkit-filter:brightness(3);

色相

-webkit-filter:hue-rotate(180deg);

反色

-webkit-filter:invert(1);

透明

-webkit-filter:opacity(0.5);

飽和度

-webkit-filter:saturate(5);

對比度

-webkit-filter:contrast(0.5);

陰影

-webkit-filter:drop-shadow(10px 10px 5px rgba(0,0,0,0.9));

瀏覽器支持

不多說了，caniuse


完了。。。

雖然不錯，但好不盡興的樣子

好玩兒的動畫

最簡單的

CSS動畫對濾鏡效果也是支持的

<style>
  .animate1 {
    -webkit-animation: filter-animation 5s infinite;
  }

  @-webkit-keyframes filter-animation {
    0% {
      -webkit-filter: sepia(0) saturate(2) drop-shadow(0px 0px 0px rgba(0,0,0,0));
    }
    
    50% {
      -webkit-filter: sepia(1) saturate(8) drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
    }
    
    100% {
      -webkit-filter: sepia(0) saturate(2) drop-shadow(10px 10px 15px rgba(0,0,0,0.9));
    }
  }
</style>

<img class="animate1" src="http://lsly1989.qiniudn.com/scsacasgbgjtuyhead副本.png">

blur和contrast結合

陰影和對比度同時作用時會有出人意料的效果

JS Bin

動動更健康

JS Bin