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 阴影

效果

拿图片做例子,看看效果

原图

image

-webkit-filter:none;

以下效果都不是截图,Chrome上看

模糊

scsacasgbgjtuyhead%E5%89%AF%E6%9C%AC.png

-webkit-filter:blur(10px);

灰度

scsacasgbgjtuyhead%E5%89%AF%E6%9C%AC.png

-webkit-filter:grayscale(0.5);

褐色

scsacasgbgjtuyhead%E5%89%AF%E6%9C%AC.png

-webkit-filter:sepia(0.5);

亮度

scsacasgbgjtuyhead%E5%89%AF%E6%9C%AC.png

-webkit-filter:brightness(3);

色相

scsacasgbgjtuyhead%E5%89%AF%E6%9C%AC.png

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

反色

scsacasgbgjtuyhead%E5%89%AF%E6%9C%AC.png

-webkit-filter:invert(1);

透明

scsacasgbgjtuyhead%E5%89%AF%E6%9C%AC.png

-webkit-filter:opacity(0.5);

饱和度

scsacasgbgjtuyhead%E5%89%AF%E6%9C%AC.png

-webkit-filter:saturate(5);

对比度

scsacasgbgjtuyhead%E5%89%AF%E6%9C%AC.png

-webkit-filter:contrast(0.5);

阴影

%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202

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

浏览器支持

不多说了,caniuse

image

完了。。。

虽然不错,但好不尽兴的样子

好玩儿的动画

最简单的

CSS动画对滤镜效果也是支持的

scsacasgbgjtuyhead%E5%89%AF%E6%9C%AC.png

<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结合

阴影和对比度同时作用时会有出人意料的效果



    本文转自魏琼东博客园博客,原文链接:http://www.cnblogs.com/dolphinX/p/4085075.html,如需转载请自行联系原作者

相关文章
|
25天前
|
前端开发
CSS圆角大杀器,使用滤镜构建圆角及波浪效果
CSS圆角大杀器,使用滤镜构建圆角及波浪效果
21 0
|
7月前
|
前端开发
特殊日期将网站变成灰色-css滤镜(整理)
特殊日期将网站变成灰色-css滤镜(整理)
|
前端开发
「趣学前端」filter滤镜,CSS的PS特技
CSS之filter赏析,来show一波CSS的PS特技。
127 1
|
Web App开发 存储 缓存
探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题
探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题
221 0
探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题
|
Web App开发 前端开发 iOS开发
css3 filter滤镜属性使用
最近在修改内网门户的时候,恰好遇到了需要使用滤镜的地方;刚开始用的是两张图片;鼠标滑过背景变成渐变;图标切换;但是后台配置了图标后;导致鼠标滑过图标不能正常切换;于是就想到了滤镜的效果来处理。所以顺便学习了一下常用的滤镜效果。
|
前端开发
CSS躬行记(6)——滤镜
 滤镜(filter)可改造元素的视觉呈现,CSS内置的滤镜有10种,通过SVG文件还能自定义滤镜。
CSS躬行记(6)——滤镜
|
前端开发 UED
不得不收藏的——IE中CSS-filter滤镜小知识大全
前段时间在做一个专题的时候用到了opacity不透明度属性,因为设计图上是半透明背景,白色文字
432 0
不得不收藏的——IE中CSS-filter滤镜小知识大全
|
移动开发 HTML5
|
前端开发
CSS图片滤镜灰度
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82796602 ...
1420 0