通过JS控制CSS实现连帧动画

来源：互联网发布：淘宝怎样设置货到付款编辑：程序博客网时间：2024/06/04 18:51

网页类Web游戏开发中常常需要实现连帧的动画效果，但是又不方便通过GIF图片去替代，比如动物的移动就是一种。

下面代码是一个简单的连帧动画的Demo。

<html>    <head>        <meta charset="UTF-8">        <title>动画demo</title>        <style type="text/css" rel="stylesheet">            body div{                    background-image:url(image/donghua.png); background-repeat:no-repeat}            .step1{background-position:0px 0px;}            .step2{background-position:-111px 0px;}            .step3{background-position:-222px 0px;}            .step4{background-position:-333px 0px;}            .step5{background-position:-444px 0px;}            .step6{background-position:-555px 0px;}            .step7{background-position:-666px 0px;}            .step8{background-position:-777px 0px;}        </style>        <script type="text/javascript" src="js/jquery.min.js"></script>        <script type="text/javascript">            var n=0;            //持续设置图片旋转角度，使其显示旋转动画            setInterval(function(){                 $("#donghua").css({"position":"relative","left":-n+"px","background-position":n+"px 0px"});                n=(n>-777)?n-111:-111;            },300);        </script>    </head>    <body style="background-color:black;">        <div class="step1" style="width:111px;height:57px;"></div>        <div class="step2" style="width:111px;height:57px;"></div>        <div class="step3" style="width:111px;height:57px;"></div>        <div class="step4" style="width:111px;height:57px;"></div>        <div class="step5" style="width:111px;height:57px;"></div>        <div class="step6" style="width:111px;height:57px;"></div>        <div class="step7" style="width:111px;height:57px;"></div>        <div class="step8" style="width:111px;height:57px;"></div>        <hr color="red">        <div id="donghua" style="width:111px;height:57px;">        </div>    </body></html>

最终效果如图所示：