码迷,mamicode.com
首页 > Web开发 > 详细

开机时的光斑动画 CSS

时间:2020-03-16 18:53:36      阅读:87      评论:0      收藏:0      [点我收藏+]

标签:oct   over   col   rgb   func   font   UNC   就是   shang   

代码伺候:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			
			body,html{
				height: 100%;
				overflow: hidden;
				background-color: black;
				text-align: center;
			}
			
			h1{
				display: inline-block;
				font:bold 70px ‘微软雅黑‘;
				color: rgba(128,128,128,0.3);     
                   /* 一定要设置文字透明 否则会覆盖背景 即 覆盖光斑 */
                   /* 渐变其实就是背景图片 */ margin-top: 50px; background-image: linear-gradient(120deg,rgba(255,255,255,0) 100px,rgba(255,255,255,1) 160px,rgba(255,255,255,0) 230px); background-repeat: no-repeat; -webkit-background-clip: text; background-clip: -webkit-text; } </style> </head> <body> <h1> atshang尚硅谷 </h1> <script> var h1= document.querySelector("h1"); var flag = -200; setInterval(function(){ flag += 10; if(flag > 600){ flag = -200; } h1.style.backgroundPosition = flag + "px"; },50); </script> </body> </html>

 总结:

     渐变其实就是背景图片

开机时的光斑动画 CSS

标签:oct   over   col   rgb   func   font   UNC   就是   shang   

原文地址:https://www.cnblogs.com/xiaohaodeboke/p/12505604.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!