有趣的鼠标悬浮模糊效果

发表于 | | 阅读次数

前言

最近一段时间，如果没啥事就会做一点百度前端学院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即可实现所有属性渐变的动画效果。上下同理。

源码戳这里