首页 > 代码库 > css3动画，制作跑步运动，画笔画圆，之类的连贯性动作的方法

css3动画，制作跑步运动，画笔画圆，之类的连贯性动作的方法

2024-09-03 03:48:22   219人阅读

首先来看一下例子的效果图：

技术分享

1.通过改变图片来实现，比较连贯，但是需要好多张图片来实现，增加了http请求，但是很好用，主要用到css3和animation。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--<script src="http://www.mamicode.com/js/jquery.js"></script>-->
    <!--<script src="http://www.mamicode.com/js/index.js"></script>-->
    <style>
        .meishu{
            width: 844px;height: 920px;animation: ani 1s;background-image:url("1/15.png");background-size: 100%;
        }
        @keyframes ani {
           0%{
               background-image:url("1/0.png");
           }
           7%{
                background-image:url("1/1.png");
            }
            14%{
                background-image:url("1/2.png");
            }
            21%{
                background-image:url("1/3.png");
            }
            28%{
                background-image:url("1/4.png");
            }
            35%{
                background-image:url("1/5.png");
            }
            42%{
                background-image:url("1/6.png");
            }
            49%{
                background-image:url("1/7.png");
            }
            56%{
                background-image:url("1/8.png");
            }
            63%{
                background-image:url("1/9.png");
            }
            70%{
                background-image:url("1/10.png");
            }
            77%{
                background-image:url("1/11.png");
            }
            84%{
                background-image:url("1/12.png");
            }
            91%{
                background-image:url("1/13.png");
            }
            95%{
                background-image:url("1/14.png");
            }
            100%{
                background-image:url("1/15.png");
            }
        }
    </style>
</head>
<body>
<div class="meishu"></div>
</body>
</html>

2.通过把许多张图片放在一张图片上面，类似于图片精灵的方式，通过用background-position改变背景图片的位置，来实现。

把十几张图片合成一张

技术分享

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--<script src="http://www.mamicode.com/js/jquery.js"></script>-->
    <!--<script src="http://www.mamicode.com/js/index.js"></script>-->
    <style>
        .meishu{
            width: 254px;height: 294px;animation: ani1 1s;background-image:url("1/circle.png");background-position:254px 0;
        }
        @keyframes ani1 {
        0%{
            background-position:254px 0;
        }
        7%{
            background-position:4049px 0;
        }
        14%{
            background-position:3795px 0;
        }
        21%{
            background-position:3541px 0;
        }
        28%{
            background-position:3287px 0;
        }
        35%{
            background-position:3033px 0;
        }
        42%{
            background-position:2779px 0;
        }
        49%{
            background-position:2525px 0;
        }
        56%{
            background-position:2271px 0;
        }
        63%{
            background-position:2017px 0;
        }
        70%{
            background-position:1763px 0;
        }
        77%{
            background-position:1509px 0;
        }
        84%{
            background-position:1255px 0;
        }
        91%{
            background-position:1001px 0;
        }
        95%{
            background-position:747px 0;
        }
        100%{
            background-position:493px 0;
        }
        }
    </style>
</head>
<body>
<div class="meishu"></div>
</body>
</html>

 

这种方式我自己感觉不太好，接下来就该说用js了

3.用js实现，采用定时器的方法，变换图片。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://www.mamicode.com/js/jquery.js"></script>
    <script>
        window.onload=function(){
            $(function(){
                var num=0;
                setInterval(function(){

                    if(num<=15){
                        $(".meishu img").eq(num).show().siblings().hide();
                        num++;
                        console.log(num);
                    }
                },40)
            })
        }
    </script>
    <style>
        .meishu{
            width: 844px;height: 920px;
        }
        .meishu img{
            position: absolute;top: 0;left: 0;display:none;
        }

    </style>
</head>
<body>
<div class="meishu">
    <img src="http://www.mamicode.com/1/0.png" >
    <img src="http://www.mamicode.com/1/1.png" >
    <img src="http://www.mamicode.com/1/2.png" >
    <img src="http://www.mamicode.com/1/3.png" >
    <img src="http://www.mamicode.com/1/4.png" >
    <img src="http://www.mamicode.com/1/5.png" >
    <img src="http://www.mamicode.com/1/6.png" >
    <img src="http://www.mamicode.com/1/7.png" >
    <img src="http://www.mamicode.com/1/8.png" >
    <img src="http://www.mamicode.com/1/9.png" >
    <img src="http://www.mamicode.com/1/10.png" >
    <img src="http://www.mamicode.com/1/11.png" >
    <img src="http://www.mamicode.com/1/12.png" >
    <img src="http://www.mamicode.com/1/13.png" >
    <img src="http://www.mamicode.com/1/14.png" >
    <img src="http://www.mamicode.com/1/15.png" >
</div>
</body>
</html>

三种方式随意选都可以。

参考链接：http://www.cnblogs.com/PeunZhang/p/3685980.html

 

css3动画，制作跑步运动，画笔画圆，之类的连贯性动作的方法


联系
我们