CSS3 滤镜

匿名 (未验证) 提交于 2019-12-02 20:32:16

了解摄影活着美图秀秀之类美图软件的同学对滤镜肯定不陌生,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">
文章来源: CSS3 滤镜
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!