有时候我们需要做这么一种特效,用灯光照射,然后显示文字动画,那么今天我们就来给大家带来灯光照射显示文字动画的源码
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;} }5iweb.com.cn
灯光照射显示文字动画的源码就是这些了,更多精彩请关注php中文网其它相关文章!
相关阅读:
立即学习“前端免费学习笔记(深入)”;










