css hover变成手_让网页变成灰色？一行代码就够了！

2020年4月4日是一个特殊的日子。这天是传统的清明节，也是国家规定对冠肺炎疫情斗争中牺牲烈士和逝世同胞的哀悼日。

大家都通过各种方式表达了对逝者的悼念之情。比如，各大网站首页的色调都不再是之前的五彩绚烂，而是变成庄严沉重的灰黑色。

如百度：

在深深的哀悼后，回到我们的工作岗位。作为一名IT程序员，该如何实现让页面色调变灰呢？难道要重新设计与修改页面的配色，对页面上每张图片都一张张的处理吗？

不不不，这样太low啦，费时且费力。人生苦短，世界那么大，我还想去看看呢。

其实，如果你学会了CSS3中的filter(滤镜)的使用，一行代码就可以搞定啦！

1. 一行代码搞定页面变灰

在页面的css代码中加上这样一句：

html {

    filter：grayscale(100%);

}

然后保存并刷新页面，搞定！看效果。

使用前

使用后

没错，只要通过filter属性的设置，就可以轻轻松松让网页变灰。

2. 关于CSS3中的filter滤镜

filter 是CSS3中的新增属性，通过它可以为元素(通常是图像)加上滤镜效果，让图片看上去有各种别样的感觉。

让图像变灰

例如通过参数值grayscale()，就可以轻松实现图像的灰度效果，括号中的数值百分比，就决定了元素的灰度程度。

原图是这样的：

如果设置灰度值100%后，彩色图像会变黑白图像。

 CSS代码：

img {

    filter：grayscale(100%);

}

让图像有老照片效果！

除了能让图片变灰之外，filter还有其它有趣的参数，可以产生各种各样丰富的图片效果，比如sepia(%) 褐色，可以让照片变成棕褐色，是不是有了一种老照片的年代感！

 CSS代码：

img {

    filter：sepia(100%);

}

图像反转，有点惊悚

inert(%) 图像反转，简单理解就是黑变白，白变黑。这样处理过图片就有点惊悚了，看上去像恐怖片！

 CSS代码：

img {

filter：invert(100%);

}

 朦胧产生美

而可以通过设置blur(px)模糊效果，让图片有了那么一种朦胧美！blur(px)中像素值越大，图片也就越模糊。

 CSS代码：

img {

    filter：blur(5px);

}

暖色调变冷色调

hue-rotate(deg) 色相转换，可以让一张暖色调的图，变为冷色调！

(女神怎么看着有点像阿凡达了)

 CSS代码：

img {

    filter：hue-rotate(180deg);

}

filter滤镜效果是不是又简单又有趣？如果配合其它的一些CSS3特性，还可以产生更加惊人的效果。比如

来点动画，效果更惊人

filter结合动画animation或者渐变transition，可以产生一种随着时光流逝，照片逐渐变旧的感觉：

CSS代码：

img {

transition: all 3s;

}

img:hover {

filter: sepia(100%);

}

手痒了吗？赶紧在自己的页面中来实现这些炫酷效果吧！