前言
最近一段时间,如果没啥事就会做一点百度前端学院2017的小任务,昨天呢,就做了一个有趣的鼠标悬浮模糊效果的一个东西,用到了一些css3的东西,做一下笔记与总结吧。
效果图如下
或者点击这里
效果描述
- 实现文字的流光渐变动画
- 背景图需要进行模糊处理
- 实现按钮边框的从中间到两边扩展开
关键属性
文字流光渐变动画
在实现文字的流光渐变动画中,需要用到
- -webkit-background-clip
- background-image
- background-size
|
|
|
|
用linear-gradient来作为背景图片,将文字颜色变成透明,在使用-webkit-background-clip: text;属性即可获得文字的渐变。但是该属性值仅在chrome中有效,有局限性,动画效果则是使用background-size扩大渐变的区间,再改变background-position来得到。
图片模糊
主要用到 filter 这个属性
鼠标放上去后,为图片设置
|
|
边框的从中间到两边扩展开
这里使用伪元素:before和:after
:before实现左右两个边框,:after实现上下两个边框,要分成上下左右两部分是由于之后的动画效果实现所需。
|
|
左右两边将宽度设为100%;高度为0;定为绝对定位,top:50%,这样可以时效果从中间往两边加长,鼠标放上去后,这设置为height:100%;top:0;使用transform:all即可实现所有属性渐变的动画效果。上下同理。