<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
background-color: #000000;
}
.box{
/*transition: 3s;*/
font:bold 50px "微软雅黑";
color:rgba(255,255,255,.3);
margin-top: 50px;
text-align: center;
/*光斑不重复*/
background-repeat: no-repeat;
/*透明到不透明再到透明*/
background-image: linear-gradient(120deg,rgba(255,255,255,0) 100px,rgba(255,255,255,1) 180px,rgba(255,255,255,0) 260px);
/*根据文字进行裁剪*/
-webkit-background-clip:text;
}
/* .box:hover{
background-position: 500px 0;
} */
</style>
</head>
<body>
<div class="box">
Hello
</div>
</body>
<script type="text/javascript">
var box = document.querySelector("box");
var flag =-160;
setInterval(function(){
flag+=10;
if(flag==600){
flag=-160;
}
.box.style.backgroundPosition = flag+"px";
},30)
</script>
给你改了改,能出来,要想居中,再用一个div包裹起来,你可以看看下面的文章
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
background-color: #000000;
}
.box{
/*transition: 3s;*/
font:bold 50px "微软雅黑";
color:rgba(255,255,255,.3);
margin: 50px auto;
/* text-align: center; */
/*光斑不重复*/
background-repeat: no-repeat;
/*透明到不透明再到透明*/
background-image: linear-gradient(120deg,rgba(255,255,255,0) 100px,rgba(255,255,255,1) 180px,rgba(255,255,255,0) 260px);
/*根据文字进行裁剪*/
-webkit-background-clip:text;
}
/* .box:hover{
background-position: 500px 0;
} */
</style>
</head>
<body>
<div class="box">
Hello
</div>
</body>
<script type="text/javascript">
var box = document.querySelector(".box");
var flag =-160;
setInterval(function(){
flag+=10;
if(flag==500){
flag=-160;
}
box.style.backgroundPosition = flag+"px";
console.log(box.style.backgroundPosition)
},30)
</script>
js不能直接 用css的语法写
你js代码确实写错了
var box = document.querySelector(".box");
var flag =-160;
setInterval(function(){
flag+=10;
if(flag==600){
flag=-160;
}
box.style.backgroundPosition = flag+"px";
},30)