100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > CSS3效果 光斑动画(渐变)

CSS3效果 光斑动画(渐变)

时间:2019-11-09 09:14:08

相关推荐

CSS3效果 光斑动画(渐变)

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}body{background: black;text-align: center;font: 50px/200px "微软雅黑";color: rgba(255,255,255,.3);}h1{display: inline-block;background: linear-gradient(120deg,rgba(255,255,255,0) 100px,rgba(255,255,255,1) 180px,rgba(255,255,255,0) 270px);background-position: -300px 0;background-repeat:no-repeat ;-webkit-background-clip: text;/*transition: 3s;*/}/*body:hover h1{background-position: 1000px 0;}*/</style></head><body><h1>北京光电传媒股份</h1></body><script type="text/javascript">var h1Node = document.getElementsByTagName("h1")[0];var left =-300;move();function move(){setInterval(function(){left+=10;if(left>1000){left=-300;}h1Node.style.backgroundPosition=left+"px 0px";},20)}</script></html>

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