瞭解攝影活著美圖秀秀之類美圖軟體的同學對濾鏡肯定不陌生,CSS3對各種濾鏡效果有了支持,可以做出很多好玩兒效果,走馬觀花瞭解一下 語法 很很多CSS3屬性一樣,監獄支持情況需要使用瀏覽器首碼,CSS濾鏡支持的方法有 效果 拿圖片做例子,看看效果 原圖 以下效果都不是截圖,Chrome上看 模糊 灰度 ...
瞭解攝影活著美圖秀秀之類美圖軟體的同學對濾鏡肯定不陌生,CSS3對各種濾鏡效果有了支持,可以做出很多好玩兒效果,走馬觀花瞭解一下
語法
filter: function(param);
很很多CSS3屬性一樣,監獄支持情況需要使用瀏覽器首碼,CSS濾鏡支持的方法有
- grayscale 灰度
- sepia 褐色
- saturate 飽和度
- hue-rotate 色相旋轉
- invert 反色
- opacity 透明度
- brightness 亮度
- contrast 對比度
- blur 模糊
- 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">