大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍了CSS3如何实现灯光照射显示文字动画,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
成都服务器托管,成都创新互联公司提供包括服务器租用、服务器托管、带宽租用、云主机、机柜租用、主机租用托管、CDN网站加速、域名注册等业务的一体化完整服务。电话咨询:18980820575
5iweb.com.cn
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如何实现灯光照射显示文字动画”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!