CSS3 濾鏡

瞭解攝影活着美圖秀秀之類美圖軟件的同窗對濾鏡確定不陌生,CSS3對各類濾鏡效果有了支持,能夠作出不少好玩兒效果,蜻蜓點水瞭解一下css

語法

filter: function(param);

很不少CSS3屬性同樣,監獄支持狀況須要使用瀏覽器前綴,CSS濾鏡支持的方法有web

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

效果

拿圖片作例子,看看效果django

原圖

image

-webkit-filter:none;

如下效果都不是截圖,Chrome上看swift

模糊

-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瀏覽器

image

完了。。。動畫

雖然不錯,但好不盡興的樣子ui

好玩兒的動畫

最簡單的

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

<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">
相關文章
相關標籤/搜索