分别用css,js,jquery实现一个持续动画效果

最新推荐文章于 2024-06-11 18:06:56 发布

渡梵尘

最新推荐文章于 2024-06-11 18:06:56 发布

阅读量2.1k

点赞数 1

本文链接：https://blog.csdn.net/lx_dfc/article/details/82222711

版权

1.使用css实现一个持续的动画效果

div{
    width: 200px;
    height: 200px;
    /* 动画的元素一定要是定位的 */
    position: absolute;
    background-color: green;
    /* 使用一个动画 */
    animation: dong 1s infinite linear;
  }
  /* 声明一个动画 */
  @keyframes dong{
    from {top: 0px;}
    to{top:800px;}
  }

2.使用js实现一个持续的动画效果

<body>

  <div id="test" style="width:1px;height:17px;background:#0f0;">0%</div>

  <input type="button" value="Run" id="run" />
  <script>
     window.requestAnimationFrame =
      window.requestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.msRequestAnimationFrame;
    var start = null;
    var ele = document.getElementById("test");
    var progress = 0;

    function step(timestamp) {
      progress += 1;
      ele.style.width = progress + "%";
      ele.innerHTML = progress + "%";
      if (progress < 100) {
        requestAnimationFrame(step);
      }
    }
    requestAnimationFrame(step);
    document.getElementById("run").addEventListener("click", function () {
      ele.style.width = "1px";
      progress = 0;
      requestAnimationFrame(step);
    }, false);
  </script>
</body>

3.使用jQuery实现一个持续的动画效果

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  div{
    width: 100px;
    height: 100px;
    background-color: green;
    position: absolute;
    left: 0;
  }
  </style>
</head>
<body>
  <button>开始</button>
 <div></div> 
 <script src="./jquery.js"></script>
<script>
 $('button').on('click',function () {
   $('div').animate({left:1000},2000)
   .animate({top:300}, 2000)
   .animate({left:0,top:300},2000)
   .animate({left:0,top:50},2000,function () { 
     //触发事件
    //  $('button').trigger('click')
    $('button').click()
    })
   })
   </script>
</body>
</html>

渡梵尘

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分别用css,js,jquery实现一个持续动画效果

1.使用css实现一个持续的动画效果div{ width: 200px; height: 200px; /* 动画的元素一定要是定位的 */ position: absolute; background-color: green; /* 使用一个动画 */ animation: dong 1s infinite linear; }...
复制链接

扫一扫