css文字背景虚化,通过实现背景模糊、文字颜色流光渐变、边框扩展等效果学习transition、transform、@keyframes等属性及伪元素的使用...

百度前端技术学院2017于2月24日开始进行，一共有6个学院可供学习，分别是小薇学院(html/css基础)、斌斌学院(js基础)、耀耀学院(小游戏/交互)、商业平台学院(web/ios/android)、ECharts & WebVR学院(VR相关)和糯米学院(css3/vue等)，从百度前端技术学院今年推出的各学院任务看来，目前互联网行业对从事前端行业的程序员要求越发高了。任重而道远，努力吧。

《有趣的鼠标悬浮模糊效果》作为糯米学院中的进阶任务，目的主要是让学院通过完成任务，掌握transition、transform、@keyframes等属性的使用，从任务的标签“CSS3、动画、过渡、效果”也能看出其主旨。经过3天的努力，终于把这个任务完成了，通过连续不断的发现bug、解bug,不仅对很多属性进行使用，也越来越有一套独自解决问题的办法。以下是总结。

任务分解：该任务要达到的效果是，当鼠标悬浮在按钮上方时，按钮上的文字由透明到上浮淡出，文字上有的颜色有流光渐变效果，按钮的边框从上、右、下、左四边的中间出现并向两端扩展至衔接在一起，按钮的背景由清晰变为模糊。则按以上要求，可以将这个大的任务分解为四个小任务：

1.文字的上浮淡出效果；

2.文字颜色的流光渐变效果；

3.按钮边框的中间向两端扩展效果；

4.背景的模糊效果

打完上面这四个小怪兽，这个任务也就基本被解决了。总结下来，我用了这些技能打怪兽：

1.4个效果都使用到伪类:hover；

2.“边框扩展”、“背景模糊”使用了伪元素::before、::after；

3.“文字上浮淡出、“边框扩展”、“背景模糊”都用到了transition属性；

4.“文字流光渐变”使用了@keyframes系列属性、以及chrome浏览器支持的-webkit-background-clip、-webkit-text-fill-color、-webkit-linear-gradient；

5.“背景模糊”使用了filter属性及其值blur();

6.“边框扩展”使用了transform属性及其值scale3d()、rotate()，使用了transform-origin属性。

以下是单个按钮html结构代码：

“小星的博客|Small Star's Blog”

其中，figure元素用于放背景，也用于实现背景模糊效果；两个div层主要用于产生伪元素，模仿边框；a元素用于实现文字的上浮淡出。figure元素的宽高要大于子元素，两个div层和a元素的宽高相同。该结构是可以优化的：

1.可以使用a元素产生伪元素，但使用a元素产生deep伪元素模仿边框扩展的时候，必须给伪元素另加过渡效果来抵消a元素实现文字上浮淡出时产生的移动；

2.实现边框扩展时用了两种方法，其中一种要使用4个伪元素，另一种使用到2个伪元素，使用2个伪元素的方法只需一个div层即可。

以下是构建按钮结构的css代码：

article{

float:left;

width:100%;

height:500px;

}

figure{

position:relative;

width:400px;

height:180px;

margin:0 0 0 50%;

top:160px;

left:-200px;

box-sizing:border-box;