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

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

网页类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<1000)?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>

最终效果如图所示：

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