百度前端技术学院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结构代码:
其中,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/b