1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html5 css3舞台灯光 HTML5特效库 CSS3 实现灯光照射显示文字动画源码

html5 css3舞台灯光 HTML5特效库 CSS3 实现灯光照射显示文字动画源码

时间:2022-07-20 09:17:02

相关推荐

html5 css3舞台灯光 HTML5特效库 CSS3 实现灯光照射显示文字动画源码

效果图

各位朋友,大家好!

今天给大家带来的特效源码是 CSS3 实现灯光照射显示文字动画源码

是不是很炫酷,大家可以按照自己的想法进行修改!

有想要文件版源码的可以私聊我

废话不多说,上源码!

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

}

license

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。