Libx

CSS3实现文字流光效果

Word count: 1,067Reading time: 5 min
2017/03/25 Share
在百度前端技术学院(这里)上看到一个比较有意思的效果,@陈慕杰照着实现了一遍,现在来分享一下,最终要实现的效果:

实现文字的流光渐变动画
背景图需要进行模糊处理
实现按钮边框的从中间到两边扩展开
下面来一步步实现这些效果。

页面结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="6.css">
<title>有趣的鼠标悬浮模糊效果</title>
</head>
<body>
<div class="container">
<div class="box-wrapper">
<div class="box">
<h1 class="title">welcome to our world</h1>
</div>
</div>
<img class="img" src="140-160222091945.jpg" alt="404">
</div>
</body>
</html>

基本样式:

* {
margin:0;
padding:0;
box-sizing: border-box;
}
.container {
margin:50px auto;
width:400px;
height:300px;
position: relative;
}
.container h1{
font-size: 2em;
}
.container img{
width:400px;
height:300px;
}
.box-wrapper {
position: absolute;
text-align: center;
width:100%;
height:100%;
padding:30px;
}
.box{
position: relative;
width:100%;
height:100%;
padding-top: 80px;

现在我们已经实现了页面的基本布局和样式,container容器固定宽高,在页面中水平居中,包含box-wrapper和img两个盒子,box-wrapper充满container,绝对定位使文字悬浮与图片上面。下面来实现文字的流光效果。

流光效果的主要原理:将文字的背景色的宽度拉长至原来的两倍,而在background-image中设置两份相同的颜色组,将背景拉长之后便只显示一份颜色组,超出背景宽度的颜色组通过动画改变背景色的位置background-position来实现流光效果。

.title {
background-image: -webkit-linear-gradient(left,#D81159, #E53A40 10%, #FFBC42 20%, #75D701 30%, #30A9DE 40%,#D81159 50%, #E53A40 60%, #FFBC42 70%, #75D701 80%, #30A9DE 90%,#D81159);
-webkit-background-clip: text;/*来使文字作为裁剪区域向外裁剪,此时文字的颜色将覆盖在渐变色之上。*/
color:transparent;/*让文字显示渐变色,将文字颜色变为透明*/
transform: translate(0,20px);/*实现鼠标滑过的上浮效果*/
background-size: 200% 100%;
animation: flowlight 5s linear infinite;
}
@keyframes flowlight {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
.container:hover .title{
transform: translate(0);
}

现在我们已经实现了流光动画的效果
接下来实现按钮边框的从中间到两边扩展开,这个效果主要使用了伪元素::before、::after分别来实现容器的左右和上下边框,伪元素边框使用绝对定位,父容器box使用相对定位,伪元素边框位置分别定位到相对父元素的top和left的50%,通过改变其位置和宽高来实现边框从中间到两边扩展的动画效果。

.box::before {
content:'';
border:3px solid #fff;
border-width: 0 3px;
position: absolute;
width:100%;
height:0;
top:50%;
left:0;
box-sizing: border-box;
}
.box::after {
content:'';
border:3px solid #fff;
border-width: 3px 0;
position: absolute;
width:0;
height:100%;
top:0;
left:50%;
box-sizing: border-box;
}
/*
实现边框扩展的的动画效果,并加上过渡效果。 */
.container:hover .box::before{
height:100%;
top:0;
}
.container:hover .box::after {
width: 100%;
left:0;
}
.box::before {
transition: all .8s;
}
.box::after {
transition: all .8s;
}

背景图的模糊处理 从最终实现我们可以看到,鼠标悬浮时背景图会出现模糊效果,这样的模糊效果我们可以通过CSS3的滤镜属性filter来实现。 filter:CSS滤镜属性,可以在元素呈现之前,为元素的渲染提供一些效果,如模糊、颜色转移之类的。滤镜常用于调整图像、背景、边框的渲染。 在这里我们需要设置filter的blur来实现对象的模糊效果。

.container:hover .img {
filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-ms-filter: blur(2px);
}

加上之后图片把文字和边框覆盖了,这里我们需要设置box-wrapper容器的z-index属性,来凸显各个容器的层级。
.box-wrapper {
position: absolute;
text-align: center;
width:100%;
height:100%;
padding:30px;
z-index: 99;

这样,背景模糊的效果就实现了。 最后,我们的显示隐藏效果还没实现。这里,我们通过设置透明度opacity来实现显示隐藏,设置transtion来实现过渡效果。

.box{ opacity: 0; transition: opacity .8s; }
.title { transition: transform .8s,opacity .8s; }
.container:hover .box{ opacity: 1; }
.container:hover .title{ opacity: 1; }

现在,我们已经实现了所有的动画效果,总结:
本文用到的CSS3属性:

linear-gradient
webkit-background-clip
-webkit-text-fill-color
animation
transform
transition
filter
<div>

源码地址:https://github.com/Stan1812/CSS3-practise

 

CATALOG