码迷,mamicode.com
首页 > Web开发 > 详细

css3之filter特效

时间:2015-05-05 16:20:48      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:

1、grayscale

用法:

    -moz-filter: grayscale(100%) ;
    -webkit-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;

效果:灰度即只有黑色和白色

技术分享

2、sepia(1)

用法:

    -moz-filter: sepia(1);
    -webkit-filter: sepia(1);
    -ms-filter:sepia(1);
    -o-filter: sepia(1);
    filter:sepia(1);

效果:像老照片一样

技术分享

3、saturate(0.5)

用法:

    -moz-filter: saturate(0.5) ;
    -webkit-filter: saturate(0.5);
    -ms-filter: saturate(0.5);
    -o-filter: saturate(0.5);
    filter:saturate(0.5);

效果:用来改变图片的饱和度(指的其实是色彩的纯度,纯度越高,表现越鲜明,纯度较低,表现则较黯淡)

技术分享

4、hue-rotate

用法:

    -moz-filter: hue-rotate(90deg) ;
    -webkit-filter:hue-rotate(90deg);
    -ms-filter: hue-rotate(90deg);
    -o-filter:hue-rotate(90deg);
    filter: hue-rotate(90deg);

效果:hue-rotate用来改变图片的色相

技术分享

5、invert

用法:

    -moz-filter: invert(1);
    -webkit-filter:invert(1);
    -ms-filter:invert(1);
    -o-filter:invert(1);
    filter:invert(1);

效果:invert像照相机底面一样

技术分享

6、opacity

用法:

    -moz-filter:opacity(.2);
    -webkit-filter:opacity(.2);
    -ms-filter: opacity(.2);
    -o-filter:opacity(.2);
    filter: opacity(.2);

效果:opacity改变图片的透明度

技术分享

7、brightness

用法:

    -moz-filter:brightness(.5);
    -webkit-filter:brightness(.5);
    -ms-filter:brightness(.5);
    -o-filter: brightness(.5);
    filter: brightness(.5);

效果:改变图片的亮度

技术分享

8、contrast

用法:

    -moz-filter: contrast(2);
    -webkit-filter:contrast(2);
    -ms-filter: contrast(2);
    -o-filter: contrast(2);
    filter:contrast(2);
    filter: gray;

效果:contrast改变图片的对比度

技术分享

9、blur

用法:

    -moz-filter: blur(3px);
    -webkit-filter: blur(3px);
    -ms-filter:blur(3px);
    -o-filter:blur(3px);
    filter:blur(3px);

效果:blur模糊图片

技术分享

10、drop-shadow

用法:

    -moz-filter: drop-shadow(5px 5px 5px #ccc) ;
    -webkit-filter:drop-shadow(5px 5px 5px #ccc);
    -ms-filter: drop-shadow(5px 5px 5px #ccc);
    -o-filter: drop-shadow(5px 5px 5px #ccc);
    filter:drop-shadow(5px 5px 5px #ccc);

效果:drop-shadow给图片加阴影效果

技术分享

 

css3之filter特效

标签:

原文地址:http://www.cnblogs.com/xchlsl/p/4479280.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!