有时候我们需要做这么一种特效，用灯光照射，然后显示文字动画，那么今天我们就来给大家带来灯光照射显示文字动画的源码
<!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>
<div>
<p>5iweb.com.cn</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自适应全屏焦点图切换的特效怎么做
css3常用的几种选择器
css3有哪些新增的背景属性
以上就是怎么用css3做出灯光照射显示文字动画的详细内容。