目录：

本文旨在说明如何仅仅使用HTML和CSS，不用JS来构建鼠标移上时由模糊变得清晰，鼠标移开后又由清晰渐渐模糊的效果。主要使用到的关键字是 hover 和 transition-duration 。

在这里展示的仅仅是一行 demo text 的文本。其实对于图像原理也是一样的。例如诸位也可以在网页上放一张图片，鼠标移动到图片上时图片就由模糊变得清晰起来。

或者反之，也可以搞一个比较逗人的网页：找张很馋人的图片，吸引别人来看，可当鼠标一移动到上去马上图片就模糊了那种（效果请自行脑补）

（由于强迫症，很不想换输入法，所以注释暂时没有使用母语书写。习惯性的写的比较详细，反正这又不是996干赶工程的，要细心品味代码的风格与艺术。。。）

下面的代码很长，但很多都是页面配置相关的，真正关键的就那么几点，在后文回提到的。这个代码可以复制粘贴成一个网页直接使用，若是对整个网页不感兴趣，也可以直接跳到后面。

这个效果的关键点主要有两个：一个是如何做模糊和变暗效果；另一个，也是最关键的一个是如何做渐变动画。不过这些都不是什么复杂的操作，在 CSS 3 中都已经提供了这些可以直接调用的模块。当然关于检测鼠标是否位于该 上的 hover 在这里也说一下。

这是用来做模糊效果的代码，参数50px指模糊半径是50px，模糊半径越大，就越模糊。注意：参数一定要带单位！！！没有单位px的话就无法显示出模糊效果。

这个参数是用来表示亮度的，用小数表示，1.0为正常，小于1则变暗，大于1则变亮。

注意：这里为什么要用两个而不是只用一个呢？ 因为每个都只能有一个effect ，所以为了同时有两个，只能用两个来嵌套了。

上面一句 transition-property 的意思是这个变化是针对哪个效果。所以用来指明是 filter （不过好像一些浏览器也可以不用写这句话）

下面一句，字面意思就知道是这个变换的时间长度。这里写的是ms（毫秒）为单位，用秒做单位也可以。

但是注意：为了使鼠标放上与移开的时候都有这个效果，在没有 hover 的那里面也要写上消除这些效果的语句，然后加上时间的修饰。

于2020年5月19日