CSS特效——有趣儿的鼠标模糊效果

最近快毕业了，除了聚餐办离校手续外，空闲时间里想着继续提高一下前端方面的技术，就在百度前端学院里找了个课程学习一下CSS3的一些新特性，这次的成果就是一个有趣儿的鼠标模糊效果。

PS：运行效果和源代码详见jsfiddle.com上我写的有趣儿的鼠标模糊

效果图

需求分析

仔细分析这个效果后可以发现，这个效果由三个部分组成

图片的模糊效果，这个用CSS3 的filter特性就可以实现。

鼠标悬浮时生成边框的效果，考虑用伪元素实现。

文字颜色的渐变和闪烁，用CSS3的渐变效果

具体实现

图片的模糊效果没啥好多说的，一句代码搞定就好。这里关于“动画边框”要重点分析下，以垂直的边为例，要注意到这条边是从中点开始生长的。

这是如何做到的呢？

首先我们定义一个伪元素:before，令其内容为空且仅有左右border，:bofore元素的宽度为100%，则这两条边被撑开，形成两条垂直的边。这里令absolute布局的top为50%，元素的

高为0来实现一开始仅有一个点。

content: '';
position: absolute;
/*控制两条垂直边的间距*/
width: 100%;
/*开始时仅有一个点位于垂直边的中点*/
top: 50%;
height: 0;
left: 0;
border: 2px solid #f8bfbf;
border-width: 0 2px;
box-sizing: border-box;

在鼠标移动到元素上方时，改变opacity、height和top，其中top的减小使得边向上生长，height的增加使得边向下延伸，opacity使其出现。

.container:hover .content:before {
opacity: 1;
height: 100%;
top: 0;
}

这里还有一点需要申明的是，因为最后浮现出来的文字需要能够被点击，而我们令:before和:after元素为边框后，相当于做了一个中间是透明玻璃的相框，这会使得这个相框下的文字上面无法被直接点击，用flex进行自动布局后可以解决这个问题。

对于彩色的文字变换效果，这里需要用到的就是css3中background-image自定义图像的新特性，具体的解释详见注释。

.title,
.name {
color: transparent;
/*使用CSS3的渐变特性从左到右绘制图像*/
background-image: linear-gradient(90deg, #A84444 10%, #A86544 20%, #A89844 30%, #88A844 40%, #51A844 50%, #44A865 60%, #44A89A 70%, #4469A8 80%, #6D44A8 90%, #A8447E 100%);
/*裁剪背景图：使用文字作为裁剪区域向外裁剪，此时文字颜色仍覆盖背景图*/
-webkit-background-clip: text;
/*将背景图宽度拉长至两倍，之前设置background-image的两份相同的颜色组，目的是在拉长后只显示一份颜色组，另外超出的半截颜色组用来实现流光效果*/
background-size: 200% 100%;
animation: load 4s infinite linear;
}

总结

background-image可以用在文字的变换效果上。

对含有:before和:after这两个伪元素的布局，flex布局能很快速简单地解决一些其他布局不好解决的问题

对于按照百分比变化width和height的元素，试试border-sizing : border-box

前端效果中有很多很好玩的东西需要再慢慢挖掘……