预览
这是一个在qq浏览器默认首页上发现的视觉效果，很好看，通过审查元素发现实现方式也比较简单。
先看demo：
qq浏览器默认首页的作品缩略图呈现的效果如第一个所示。有一种略微曝光的效果，看起来很酷炫。
语法
语法很简单，只需要一个属性便能实现对应的效果：
首先在所有的需要滤镜效果的元素上添加一个transition效果会更好：
.img-box img {
transition: -webkit-filter .2s ease-out;
}
亮度：
.img-box:nth-of-type(1) img {
-webkit-filter: brightness(1);/*不加这个图片会抖一下*/
}
.img-box:nth-of-type(1) img:hover {
-webkit-filter: brightness(1.3);
}
灰度：
.img-box:nth-of-type(2) img {
-webkit-filter: grayscale(0);/*不加这个图片会抖一下*/
}
.img-box:nth-of-type(2) img:hover {
-webkit-filter: grayscale(1);/0-1/
}
褐度：
.img-box:nth-of-type(3) img {
-webkit-filter: sepia(0);/*不加这个图片会抖一下*/
}
.img-box:nth-of-type(3) img:hover {
-webkit-filter: sepia(1);/0-1/
}
饱和度：
.img-box:nth-of-type(4) img {
-webkit-filter: saturate(1);/*不加这个图片会抖一下*/
}
.img-box:nth-of-type(4) img:hover {
-webkit-filter: saturate(2);/0-1/
}
色相旋转：
.img-box:nth-of-type(5) img {
-webkit-filter: hue-rotate(0deg);/*不加这个图片会抖一下*/
}
.img-box:nth-of-type(5) img:hover {
-webkit-filter: hue-rotate(90deg);/0-1/
}
反色：
.img-box:nth-of-type(6) img {
-webkit-filter: invert(0);/*不加这个图片会抖一下*/
}
.img-box:nth-of-type(6) img:hover {
-webkit-filter: invert(1);/0-1/
}
透明度：
.img-box:nth-of-type(7) img {
-webkit-filter: opacity(1);/*不加这个图片会抖一下*/
}
.img-box:nth-of-type(7) img:hover {
-webkit-filter: opacity(.5);/0-1/
}
对比度：
.img-box:nth-of-type(8) img {
-webkit-filter: contrast(1);/*不加这个图片会抖一下*/
}
.img-box:nth-of-type(8) img:hover {
-webkit-filter: contrast(2);/0-1/
}
模糊：
.img-box:nth-of-type(9) img {
-webkit-filter: blur(0px);/*不加这个图片会抖一下*/
}
.img-box:nth-of-type(9) img:hover {
-webkit-filter: blur(3px);/0-1/
}
阴影
.img-box:nth-of-type(10) img {
-webkit-filter: drop-shadow(0px 0px 0px #ccc);/*不加这个图片会抖一下*/
}
.img-box:nth-of-type(10) img:hover {
-webkit-filter: drop-shadow(5px 5px 5px #ccc);/0-1/
}
兼容性：
我们先在caniuse网站上检查一下filter属性的兼容性：
从caniuse上给出的数据来看，除了ie浏览器与移动端opera浏览器不支持以外，其他浏览器都支持该属性。
然后我们自己再检测一遍，得到的结果如下：
火狐浏览器：版本号49.0.1 正常显示；
谷歌浏览器：版本号53.0.2785.101 m 正常显示；
360浏览器：版本号8.2.1.304 兼容模式：无效果；极速模式：正常显示；
qq浏览器：版本号7.0.0.2740 正常显示；
opera浏览器：版本号40.0.2308.81 正常显示。
可以初步得出结论：除ie内核的浏览器不支持以外，其他浏览器都支持该属性。 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
