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

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

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

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

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

最终效果如图所示：

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

1楼lidaasky1小时前: 不错，学习了

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

热点推荐