怎么用CSS3做出灯光照射显示文字动画

来源：懂视网责编：小采时间：2020-11-27 18:49:43

怎么用CSS3做出灯光照射显示文字动画

怎么用CSS3做出灯光照射显示文字动画:有时候我们需要做这么一种特效，用灯光照射，然后显示文字动画，那么今天我们就来给大家带来灯光照射显示文字动画的源码<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <titl

推荐度：

点击下载本文 文档为doc格式

导读怎么用CSS3做出灯光照射显示文字动画:有时候我们需要做这么一种特效，用灯光照射，然后显示文字动画，那么今天我们就来给大家带来灯光照射显示文字动画的源码<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <titl

有时候我们需要做这么一种特效，用灯光照射，然后显示文字动画，那么今天我们就来给大家带来灯光照射显示文字动画的源码

<!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;} 
}

灯光照射显示文字动画的源码就是这些了，更多精彩请关注Gxl网其它相关文章！

怎么用CSS3做出灯光照射显示文字动画

推荐度：

点击下载本文 文档为doc格式

标签：文字制作动画

热门焦点

怎么用CSS3做出灯光照射显示文字动画

怎么用CSS3做出灯光照射显示文字动画

怎么用CSS3做出灯光照射显示文字动画

最新推荐

猜你喜欢

热门推荐