美丽的天空
原文地址：→看过来
写在前面
有的时候感觉写点小玩意儿挺开心的，还能实践很多的小知识点，所以这次学着写了个有趣的鼠标悬浮模糊效果，只使用了css额。
效果图
看过来
源码地址→传送门
预览地址→传送门
小知识点
filter: blur(npx);
这个过滤器用来将图片模糊，但是兼容性不太好，n代表模糊度，值越大越模糊。
background-clip: text;
background-clip是用于背景图片的裁剪，决定背景从哪里开始显示。当设置为text时，即可将背景设置在字体上。
text-fill-color
这个属性为字体颜色填充，在这里设置成transparent,然后在自己填充一个颜色渐变的字体颜色。
linear-gradient
线性渐变，这里为文字添加一个渐变色，为了实现流光渐变的效果，需要将背景宽度设置为200%，且linear-gradient的0%和100%颜色一样，便于前后衔接上，具体如下：
background-image: -webkit-linear-gradient(left, red, yellow 25%, red 50%, yellow 75%, red 100%);
background-size: 200% 100%;
在设置好背景色之后为字体添加动画，使文字产生流光效果。
鼠标悬浮显示和隐藏
现将元素的透明度设为0，当鼠标悬浮时执行渐变透明度变为1。
边框向两边伸展的效果
在实际中我们只能设置边框的宽度，而不能改变边框的长度，所以此处不能直接用border的属性。而是通过追加2个元素，并改变其大小来实现本元素的边框向两边伸展的效果。分别设置这两个元素的上下边框及左右边框。
原理图(实现为所设边框，虚线为不设置边宽)：
原理图
追加元素的实现
追加元素宽或高为0，当鼠标移动到box上时，宽或高渐变到100%，即可。
#content:before {
content: " ";
position: absolute;
left: 50%;
top: 0;
width: 0;
height: 100%;
border: 3px solid #fff;
border-left: none;
border-right: none;
transition: all 0.8s;
box-sizing: border-box;
}
#box:hover #content:before {
width: 100%;
left: 0;
}
左和右边框同理实现。
小结
以前感觉好多属性用不上，这下用上了好多个，以后继续写写写~
