公告
更换了服务器,更换新的主题,从头开始!
友情连接数据没有导的过来,如果之前的博友过来,请务必把你的博客地址重新发我!

添加鼠标经过图片灰变彩CSS样式

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

You may also like...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

%d 博主赞过: