HTML练习之帧动画

Playful_Elbow

已于 2022-07-10 10:25:26 修改

阅读量2.7k

点赞数 1

文章标签： html5 javascript

于 2022-04-17 11:28:03 首次发布

本文链接：https://blog.csdn.net/Playful_Elbow/article/details/124226952

版权

<!DOCTYPE html>
<html>
    <head>
    <title>Document</title>
    <meta charset="utf-8">
    <style type="text/css">
      *,body{
        margin:0;
        padding:0;
      }
     #view{
      width:500px;
      height:300px;
      background-color:#000;
      overflow:hidden;
      background:url(res/htmlLX/lianxi1.jpg);
     }
     #cont{
      color:#fff;
      width:90%;
      overflow:hidden;
      position:relative;
      height:30px;
      top:10px;
      margin:0 auto;
      line-height:30px;
      background:#191970;
     }
     #content{
       display:block;
       position:absolute;
       width:1600px;
       left: 450px;
       color:#ffff00;
       font-size:14px;
     }
      .btn{
        width:60px;
        height:30px;
        cursor:pointer;
      }
    </style>

</head>
<body style="padding: 0px; margin: 0px;">
    <div id="view">
        <div id="cont">
          <div id="content" style="">公告：亲爱的玩家! 由于机房线路调整，游戏将于2019年5月20日凌晨0:00~6:00（周一）进行维护，请大家互相转告，及时下线以免不必要的损失，感谢您对游戏的支持。</div>
        </div>

    </div>

    <script type="text/javascript">
       var left = 500;// content的左边距
      var raf;
      function move(){
      document.getElementById("content").style.left=left+"px";
      left -= 1;
      if(left<-1000){
          left=500;
      }
      raf=window.requestAnimationFrame(move);
      }
      move();
    </script>

</body>
</html>

Playful_Elbow

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML练习之帧动画

<!DOCTYPE html><html> <head> <title>Document</title> <meta charset="utf-8"> <style type="text/css"> *,body{ margin:0; padding:0; } #view{ width:500px;...
复制链接

扫一扫