CSS3花屏文本效果
分类：实例代码
CSS3花屏文本效果属于前端实例代码，有关更多实例代码大家可以查看。
分享一段代码实例，它模拟实现了类似花屏的文本效果。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
.filter{
position:relative;
width:300px;
margin:50px auto;
font-size:36px;
font-family:Raleway, Verdana , Arial;
}
.white{
position:absolute;
left:0;
top:15px;
width:100%;
height:3px;
background:#fff;
z-index:4;
animation:whiteMove 3s ease-out infinite;
}
.filter:before{
content:attr(data-word);
position:absolute;
top:0;
left:0.5px;
height:0px;
color:rgba(0,0,0,.9);
overflow:hidden;
z-index:2;
animation:redShadow 1s ease-in infinite;
-webkit-filter:contrast(200%);
text-shadow:0.1px 0 0 red;
}
.filter:after{
content:attr(data-word);
position:absolute;
top:0;
left:-3px;
height:36px;
color:rgba(0,0,0,.8);
overflow:hidden;
z-index:3;
background:rgba(255,255,255,.9);
animation:redHeight 1.5s ease-out infinite;
-webkit-filter:contrast(200%);
}
@keyframes redShadow{
20%{
height:32px;
}
60%{
height:6px;
}
100%{
height:42px;
}
}
@keyframes redHeight{
20%{
height:42px;
}
35%{
height:12px;
}
50%{
height:40px;
}
60%{
height:20px;
}
70%{
height:34px;
}
80%{
height:22px;
}
100%{
height:0px;
}
}
@keyframes whiteMove{
8%{
top:38px;
}
10%{
top:8px;
}
12%{
top:42px;
}
99%{
top:36px;
}
}
</style>
</head>
<body >
<div class='filter' data-word='前端教程网'>
前端教程网
<div class='white'></div>
</div>
</body>
</html>
上面的代码实现了我们的要求，更多内容可以参阅相关阅读。
相关阅读:
（1）.animation参阅CSS3 animation一章节。
（2）.content参阅css content一章节。
（3）.rgba参阅CSS3 RGBA一章节。
（4）.filter参阅css3 filter属性一章节。
（5）.@keyframes可以参阅CSS3 @keyframes一章节。
CSS3花屏文本效果，这样的场景在实际项目中还是用的比较多的，关于CSS3花屏文本效果就介绍到这了。