CSS3如何实现灯光照射显示文字动画
这篇文章主要介绍了CSS3如何实现灯光照射显示文字动画，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>CSS3 实现灯光照射显示文字动画</title>
<meta name="keywords" content=" CSS3 实现灯光照射显示文字动画" />
<meta name="description" content=" CSS3 实现灯光照射显示文字动画" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="content">
<div class="klam">
<p>5iweb</p>
</div>
<div class="noor one"></div>
<div class="noor two"></div>
</div>
</body>
</html>
Css部分：
body {background: #000;}
.content {position: relative;width: 750px;margin: 0 auto;}
p {margin: 0;padding: 0;font-size: 90px; }
.klam {
position: absolute;
top: 40px;
left: 100px;
color: #000;
z-index: 1;
animation: shadow 5.0s ease-in-out infinite;
}
.noor {
position: absolute;
top: 30px;
left: 50px;
width: 140px;
height: 140px;
opacity: 0.8;
border-radius: 100px;
z-index: 0;
background:
-webkit-radial-gradient(center, ellipse cover, #fff 0%, rgba(255, 255, 255, 0.2) 100%);
box-shadow: 0px 0px 50px #fff;
animation: noor 5.0s ease-in-out infinite;
}
.two {z-index: 2;opacity: 0.8;}
@-webkit-keyframes noor {
0% {left: 45px;}
50% {left: 335px;}
75%{left:500px;}
100% {left: 45px;}
}
@-webkit-keyframes shadow {
0% {text-shadow: -9px 1px 4px #000;}
50% {text-shadow: 9px 1px 4px #000; }
100% {text-shadow: -9px 1px 4px #000;}
}
感谢你能够认真阅读完这篇文章，希望小编分享的“CSS3如何实现灯光照射显示文字动画”这篇文章对大家有帮助，同时也希望大家多多支持主机评测网，关注主机评测网行业资讯频道，更多相关知识等着你来学习!