前言
最近一段时间,如果没啥事就会做一点百度前端学院2017的小任务,昨天呢,就做了一个有趣的鼠标悬浮模糊效果的一个东西,用到了一些css3的东西,做一下笔记与总结吧。
效果图如下
或者点击这里
效果描述
- 实现文字的流光渐变动画
- 背景图需要进行模糊处理
- 实现按钮边框的从中间到两边扩展开
关键属性
文字流光渐变动画
在实现文字的流光渐变动画中,需要用到
- -webkit-background-clip
- background-image
- background-size
1 2 3 4 5 6 7 8 9
| <div class="container"> <img src="bg.jpg"> <div class="box"> <div class="content"> <h2 class="title">MORE PICTURES IN THERE.</h2> <a href="http://wsyks.github.io" class="click">点击进去</a> </div> </div> </div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| .title ,.click{ color: transparent; 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-size: 200% 100%; animation: load 4s infinite linear; } @keyframes load{ 0%{ background-position: 0 0; } 100%{ background-position: -200% 0; } }
|
用linear-gradient来作为背景图片,将文字颜色变成透明,在使用-webkit-background-clip: text;属性即可获得文字的渐变。但是该属性值仅在chrome中有效,有局限性,动画效果则是使用background-size扩大渐变的区间,再改变background-position来得到。
图片模糊
主要用到 filter 这个属性
鼠标放上去后,为图片设置
1 2 3
| .container:hover img{ filter: blur(2px); //2px可根据效果自行定义 }
|
边框的从中间到两边扩展开
这里使用伪元素:before和:after
:before实现左右两个边框,:after实现上下两个边框,要分成上下左右两部分是由于之后的动画效果实现所需。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
| .box .content:before{ content: ""; position: absolute; left: 0; top:50%; border: 3px solid #BBD1C3; border-width:0 3px; visibility: hidden; height: 0; width: 100%; transition: all 1s; box-sizing: border-box } .box .content:after{ content: ""; position: absolute; left: 50%; top:0%; border: 3px solid #BBD1C3; border-width:3px 0px; height: 100%; width: 0; transition: all 1s; box-sizing: border-box } .container:hover .content:before{ top: 0%; content: ""; visibility: visible; height: 100%; } .container:hover .content:after{ content: ""; left: 0px; visibility: visible; width: 100%; }
|
左右两边将宽度设为100%;高度为0;定为绝对定位,top:50%,这样可以时效果从中间往两边加长,鼠标放上去后,这设置为height:100%;top:0;使用transform:all即可实现所有属性渐变的动画效果。上下同理。
源码戳这里