Lewi Morgan 2021-11-04 18:21 采纳率: 42.9%
浏览 51
已结题

光斑动画显示不出来 是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>
  • 写回答

3条回答 默认 最新

  • 本堃不方 2021-11-04 18:46
    关注

    给你改了改，能出来，要想居中，再用一个div包裹起来，你可以看看下面的文章

    CSS3效果 光斑动画(渐变)_Cokeny的博客-CSDN博客_css 光斑 &amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;style type=&qu https://blog.csdn.net/weixin_44521678/article/details/86568333 

    <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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 11月16日
  • 已采纳回答 11月16日
  • 创建了问题 11月4日

悬赏问题

  • ¥15 基于单片机的靶位控制系统
  • ¥15 AT89C51控制8位八段数码管显示时钟。
  • ¥15 真我手机蓝牙传输进度消息被关闭了，怎么打开？(关键词-消息通知)
  • ¥15 下图接收小电路，谁知道原理
  • ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线，如何释放宽带全部速度
  • ¥30 关于#r语言#的问题：如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测
  • ¥15 ETLCloud 处理json多层级问题
  • ¥15 matlab中使用gurobi时报错