e2f065497fb563777d84b9f7e2875f7b之前一直挺喜欢这个图片特效,但是一直没有弄明白CSS样式修改代码,也就一直拖着没有修改。后来添加明暗图片特效,不过还是比较喜欢现在的这种效果。

这里主要讲述副站鼠标经过图片时从灰色变为彩色CSS样式代码。演示请用鼠标滑过下面的图片查看:

注:对于一些版本底的浏览器支持效果并不太好!

好了,不啰嗦了,下面为CSS样式代码

/* 鼠标经过图片灰色变彩色 */
img{
-webkit-filter: grayscale(1);
}
img:hover{
-webkit-filter: grayscale(0);
}

另外,这里再写一个整站变为黑白 包括页面样式、链接、图片等网站所有内容修改为黑白,此种效果一般常用于特大灾害净网时,如:汶川地震

/* 网站黑白代码 */  
html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);}