有趣的鼠标悬浮模糊效果

前言

最近一段时间,如果没啥事就会做一点百度前端学院2017的小任务,昨天呢,就做了一个有趣的鼠标悬浮模糊效果的一个东西,用到了一些css3的东西,做一下笔记与总结吧。

效果图如下
1.gif
或者点击这里

效果描述

  • 实现文字的流光渐变动画
  • 背景图需要进行模糊处理
  • 实现按钮边框的从中间到两边扩展开

关键属性

文字流光渐变动画

在实现文字的流光渐变动画中,需要用到

  • -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即可实现所有属性渐变的动画效果。上下同理。

源码戳这里