百度前端技术学院于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;
background:url(../img/button-bg.jpg);
border-radius:5px;
}
figure>div{
position:relative;
width:320px;
height:120px;
top:30px;
left:40px;
box-sizing:border-box;
}
div>div{
position:relative;
width:320px;
height:120px;
}
div>a{
display:block;
position: relative;
text-align:center;
line-height:120px;
}
按钮样式如下：
按钮样式
4个效果的实现及属性的使用如下：
1.文字的上浮淡出：
实现原理：在鼠标未悬浮在按钮上时，设置a元素下移一段距离(top:14px)，文字透明(opacity:0)；在鼠标悬浮时，a元素回到正常位置(top:0)，文字不再透明(opacity:1)。属性值的变化使用transition过渡，即可达到平滑变化效果。效果请见文末demo链接，代码如下:
div>a{
top:14px;
opacity:0;
-webkit-transition:opacity 0.3s linear,top 0.3s linear;
transition:opacity 0.3s linear,top 0.3s linear;
}
figure:hover a{
top:0;
opacity:1;
}
2.文字颜色流光渐变效果：
实现原理：目前没有特定的css属性达到这样的效果，只能使用其他属性组合来达到这样的效果。简单来说，是将文字镂空，使其显示其背景，然后对背景使用从左至右的颜色渐变，再在鼠标悬浮时，对背景进行移动来模仿流光渐变。具体来说，以“-webkit-background-clip:text;-webkit-text-fill-color:transparent;”来进行文字镂空(前者裁剪掉文字内容之外的背景，后者将文字填充色设为透明)，以“background-image:-webkit-linear-gradient()”来实现背景颜色渐变，最后使用@keyframes来进行背景平移的无限循环以模仿流动。
在此，需要注意的是，要做到平移结束与平移开始之间的衔接平滑：一是必须设置平移速度为匀速(linear)；还有就是在结束和开始那一瞬间，背景颜色渐变的样式相同，对此，可以通过设置颜色渐变为“0% x色”-“25% y色”-“50% x色”-“75% y色”-“100% x色”，在将背景拉长至200%来实现。
效果请见文末demo链接，代码如下：
div>a{
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-image:-webkit-linear-gradient(left,yellow,green 25%,yellow 50%,green 75%,yellow 100%);
background-size:200% 100%;
}
@keyframes gradient{
from{background-position:0% 0%;}
to{background-position:-100% 0%;}
}
figure:hover a{
animation:gradient 3s linear infinite;
}
3.背景模糊效果：
即毛玻璃效果，实现原理：在背景所在的元素上使用伪元素，使伪元素宽高、位置完全与背景所在元素相同，再将元素背景设置为伪元素的背景，对伪元素使用“filter:blur()”即可。同上，使用transition来达到平滑过渡。效果请见文末demo链接，代码如下：
figure::before{
content:'';
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background:url(../img/button-bg.jpg);
border-radius:5px;
-webkit-transition:filter 0.3s linear;
transition:filter 0.3s linear;
}
figure:hover::before{
filter:blur(5px);
}
4.边框扩展：
(1)方法一：使用4个伪元素来模仿4个边框，通过在鼠标悬浮与否时使用transform的3D缩放(scale3d())来达到效果。需要注意的是，在使用3D缩放时，是应该设置缩放原点的(transform-origin)，由于默认的缩放原点为元素几何中点，与边框扩展所要求的位置刚好相同，所以在本处可以不设定该属性。效果请见文末demo链接，代码及注释如下：
/*2-5-1.使用scale3d实现边框扩展*/
/*2-5-1-1.构建伪元素*/
#left-right1::before,
#left-right1::after,
#top-bottom1::before,
#top-bottom1::after{
content:'';
position:absolute;
background:#ffffff;
-webkit-transition:-webkit-transform 0.3s;
transition:transform 0.3s;
-webkit-transition-timing-function:cubic-bezier(0.44, 0.05, 0.55, 0.95);
transition-timing-function:cubic-bezier(0.44, 0.05, 0.55, 0.95);/*贝塞尔曲线*/
}
/*2-5-1-2.左右边框构建*/
#left-right1::before,
#left-right1::after{
width:2px;
height:100%;
top:0;
-webkit-transform: scale3d(0.1, 0, 1);
transform: scale3d(0.1, 0, 1);
}
#left-right1::before{
left:0;
}
#left-right1::after{
right:0;
}
/*2-5-1-3.上下边框构建*/
#top-bottom1::before,
#top-bottom1::after{
width:100%;
height:2px;
left:0;
-webkit-transform: scale3d(0, 0.1, 1);
transform: scale3d(0, 0.1, 1);
}
#top-bottom1::before{
top:0;
}
#top-bottom1::after{
bottom:0;
}
/*2-5-1-4.使用伪类*/
figure:hover #left-right1::before,
figure:hover #left-right1::after,
figure:hover #top-bottom1::before,
figure:hover #top-bottom1::after{
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
对方法一的实现效果，如果仔细观察是可以发现与方法二(见后文)的细微区别的：
第一，扩展速度使用了贝塞尔曲线，不是匀速，并且速度曲线的选择有多种，第二种方法却很难做到匀速意外的其他变速类型；
第二，扩展实际是往4个方向进行的，如果将模仿的边框宽度设置的更大，这个效果更明显，这主要是因为在上面代码中设置的scale3d(x,y,z)的3个值当中，x和y都是改变的。
(2)方法二：使用2个伪元素来模仿左右、上下两对边框的扩展。以左右边框为例：假设使用::before伪元素来实现，此时将伪元素width设置为100%，height设置为0，top设置为50%，并将其左右边框设定为需要宽度，上下边框设置为0；在鼠标悬浮时，改变height为100%,top为0即可。
效果请见文末demo链接，代码如下：
#top-bottom2::before,
#top-bottom2::after{
content:'';
position:absolute;
box-sizing:border-box;
}
#top-bottom2::before{
width:100%;
height:0;
top:50%;
border-left:2px solid #fff;
border-right:2px solid #fff;
-webkit-transition:height 0.3s linear,top 0.3s linear;
transition:height 0.3s linear,top 0.3s linear;
}
article figure:hover #top-bottom2::before{
height:100%;
top:0;
}
#top-bottom2::after{
width:0;
height:100%;
top:0;
left:50%;
border-top:2px solid #fff;
border-bottom:2px solid #fff;
-webkit-transition:width 0.3s linear,left 0.3s linear;
transition:width 0.3s linear,left 0.3s linear;
}
article figure:hover #top-bottom2::after{
width:100%;
left:0;
}
以上，需要特别注意box-sizing属性的设定，如果按照w3c的标准Box Model，即content-box,此时两个伪元素内容区的宽高相同，但一个伪元素有左右边框，一个伪元素有上下边框，会使得最后形成的边框存在缝隙，如下：
边框缝隙
因此，在方法二中，对于伪元素，必须设定box-sizing为border-box。
(3)边框的其他效果一：
主要利用transition-delay属性，在指定的时间开始过渡效果，从而达到边框的连续动画效果。效果请见文末demo链接，具体代码请见文末代码链接(过长)：
(4)边框的其他效果二：
同时使用transform的scale3d()、rotate()，配合transform-origin属性，达到效果：从按钮四个角所在点出发，垂直于边框方向射出射线，同时射线顺时针旋转回到边框所在位置并最终耦合成边框。效果图如下，效果请见文末demo链接，具体代码请见文末代码链接：
旋转合围
以上，为整个任务的完成过程，及完成各个小任务的原理及使用属性。此外，在完成demo期间，也注意到以下方面：
1.对transition的使用：平滑过渡是双面的，在鼠标未悬浮到悬浮时需做到平滑，在悬浮到未悬浮时也要做到平滑。对此，如果两个过程的动作相同(注意开始时间也要相同)，即两次过渡的transition属性设定相同，在原本的元素使用transition即可，伪类选择时的元素中不用再次设定，否则两边都要设定；
2.善用伪元素，伪元素只在渲染层表现，不影响html的本来结构，通过使用伪元素，可以制作很多炫丽的效果；
3.对代码进行优化，在完成demo之后，对css代码进行了优化，存在选择器不精炼、不同元素的相同样式未合并、注释不成体系等缺点。
最后，附上解决各个任务的参考资料：
1.“文字的上浮淡出”：这个小怪兽是在打完另外几个小怪兽之后解决的，没找帮手就解决了；
2.“文字颜色流光渐变效果”：主要参考了w3cplus大漠老师的《css3 background-clip》:/content/css3-background-clip;
以及已完成这个任务的同学的笔记。w3cplus大漠老师的文章对学习css3非常有帮助，对transition、transform的使用，也参考了大漠老师的文章；
3.“背景模糊效果”：《css揭秘》第4章第18节毛玻璃效果；
4.“边框扩展”：在任务的网页下方有在线参考资料，其中有Codrops的链接，Codrops网站的第二项“Inspiration for Line Menu Styles”就是各种按钮效果的展示，其中就有边框扩展。作为github上的开源项目，可直接fork下载项目源码，进行研究学习。边框扩展是其中一个叫ariel的高手做的。需要注意的是，这个项目中各类按钮的状态变化是鼠标悬浮、鼠标点击按钮和鼠标点击其他按钮三种，其中点击事件使用了js代码，效果的展现全是使用的css3属性。(/codrops/category/playground/page/2/)
post-nuomitask1-ariel.jpg
css文字背景虚化 通过实现背景模糊 文字颜色流光渐变 边框扩展等效果学习transition transform @keyframes等属性及伪元素的使用...
