经常看到一些网站的底部有一些灰色的图标,鼠标移入的时候会变亮,开始以为是js操作src或者bg呢,搜索了一下,发现了一个更好的方法:通过css3的滤镜方法。
html代码:
<a href='' class='icon'><img src='utv.jpg' /></a>
css代码:
.icon{-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%); filter: grayscale(100%);filter: gray;}.icon:hover{filter: none;-webkit-filter: grayscale(0%);}
分享到:
相关推荐
一个不错的css3滤镜网页特效
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法,这里这是一个demo,大家可以根据这个demo安装自己的需求修改
图片旋转缩放翻转变换效果(css3滤镜canvas).zip 图片旋转缩放翻转变换效果(css3滤镜canvas).zip 图片旋转缩放翻转变换效果(css3滤镜canvas).zip
使用方法很简单,点击 Add Filter 按钮就可以看到当前 CSS3 所支持的所有滤镜效果了。 点击不同的滤镜效果就可以添加各种参数了,效果会即时的显示在右边的界面中,参数有点类似 Photoshop 的图层效果,具有一定的...
纯CSS3滤镜实现的波光粼粼水面动画特效源码.zip
解决CSS3网页兼容性问题
CSS滤镜大全 各类滤镜 HTML滤镜大全 IE滤镜大全
滤镜
所有css下的滤镜效果,全面展示,css 滤镜大全
精通CSS滤镜,精通CSS滤镜,精通CSS滤镜
通过filter: blur()实现CSS毛玻璃效果,类似PS高斯模糊,图片和背景都可以使用;但在移动端,会造成卡顿,不建议在移动端使用;
。。。
...
主要介绍了如何使用css达到滤镜的效果,其中包含了各种滤镜,通过相关的滤镜函数达到不同的效果。
全套CSS滤镜特效 全套 CSS 滤镜 特效
CSS教程【CSS样式CSS滤镜】CHM版
漂亮的CSS滤镜按钮