持续动画---css、js、jQuery

你的名字 2023-06-27 08:36 1阅读 0赞

**css实现持续动画**

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>css动画</title> 
    <style> 
    div
    {
    	width:200px;
    	height:200px;
    	background:red;
    	position:relative;
    	animation:myfirst 2s infinite linear;
    	/*-webkit-animation:myfirst 5s;  Safari and Chrome */
    }
    
    @keyframes myfirst
    {
    	0%   {background:red; left:0px; top:0px;}
    	25%  {background:yellow; left:200px; top:0px;}
    	50%  {background:blue; left:200px; top:200px;}
    	75%  {background:green; left:0px; top:200px;}
    	100% {background:red; left:0px; top:0px;}
    }
    
    @-webkit-keyframes myfirst /* Safari and Chrome */
    {
    	0%   {background:red; left:0px; top:0px;}
    	25%  {background:yellow; left:200px; top:0px;}
    	50%  {background:blue; left:200px; top:200px;}
    	75%  {background:green; left:0px; top:200px;}
    	100% {background:red; left:0px; top:0px;}
    }
    </style>
    </head>
    <body>
    <p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
    <div></div>
    </body>
    </html>

**js实现持续动画**

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>js动画</title> 
    </head>
    <body>
      <div id="test" style="width:1px;height:17px;background:#0f0;">0%</div>
      <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);
          }else{
    		progress = 0;
    		requestAnimationFrame(step);
    	  }
        }
        requestAnimationFrame(step);
      </script>
    </body>
    </html>

**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="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.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>