光斑动画显示不出来 是js的问题吗

    <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)