zoukankan      html  css  js  c++  java
  • 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上看

    模糊

    -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](http://lsly1989.qiniudn.com/屏幕快照 2014-11-09 13.08.48.png)

    完了。。。

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

    好玩儿的动画

    最简单的

    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

  • 相关阅读:
    JavaScript脚本语言特色时钟
    这个周末安排,
    市场营销书籍推荐
    比较好的管理类书籍推荐
    如何培养自己的领导力?或许你该看看这些书
    十本最畅销的市场营销书籍,你看过几本?
    如何提高情商?答案可能在《情商必读12篇》这本书里
    如何管理好员工?
    做销售要看哪些书?《销售管理必读12篇》了解下
    管理书籍推荐,你看过哪些呢?
  • 原文地址:https://www.cnblogs.com/dolphinX/p/4085075.html
Copyright © 2011-2022 走看看