css3 filter属性

css3 filter的效果可以加在html5的video标签,也可以加在image图片上。

css3 filter的一些属性运用到js中: 

                    $ ('#video').css("-webkit-filter","sepia(100%)");

                    $('#video').css("-webkit-filter","blur(3px)");

                    $('#video').css("-webkit-filter","grayscale(50%)");

                    $('#video').css("-webkit-filter","brightness(2.5)");

                    $('#video').css("-webkit-filter","contrast(5)");

                    $('#video').css("-webkit-filter","hue-rotate(180deg)");

                    $('#video').css("-webkit-filter","invert(100%)");

                    $('#video').css("-webkit-filter","grayscale(100%) brightness(100%) contrast(100%)");
                    //saturate(250%)
                    //grayscale(100%) brightness(10%) contrast(100%) 黑白

                    $('#video').css("-webkit-filter","saturate(3)");

在css中也可以直接写id或class然后 : { -webkit-filter: sepia(100%);  } 

如果想移除filter效果可以用:

                    $('#video').css("-webkit-filter","none");

                    

你可能感兴趣的:(css)