css3滤镜

阅读更多

经常看到一些网站的底部有一些灰色的图标，鼠标移入的时候会变亮，开始以为是js操作src或者bg呢，搜索了一下，发现了一个更好的方法：通过css3的滤镜方法。

html代码：


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%);}