不正常的话请另存为html观看 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body { border-bottom: solid 5px #000; margin-top: 5rem; } img { width: 200px; } #runner { -webkit-transform: translateY(5px); -ms-transform: translateY(5px); transform: translateY(5px); } </style> </head> <body> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js'></script> <div class="container"> <img id="runner" src="http://ccjhs.shcsc.k12.in.us/Potter1314/running.gif" alt="Running man"/> </div> <script type="text/javascript"> var runDistance = ($('body').width() + 200); var runner = document.getElementById('runner'); //TweenMax.to(runner, .4, {x:-40, repeat:-1}); TweenMax.from(runner, 5, { x: -200, repeat: -1 }); TweenMax.to(runner, 5, { x: runDistance, repeat: -1, ease: Power0.easeIn, }); </script> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 等待动画可以这样吗 喜欢 (0)or分享 (0)
