Sprites 图片动画（Animation）

最新推荐文章于 2022-12-09 10:13:40 发布

丁七岁

最新推荐文章于 2022-12-09 10:13:40 发布

阅读量565

点赞数 2

分类专栏： HTML 文章标签： html css html5 animation

本文链接：https://blog.csdn.net/qq_43612538/article/details/108748468

版权

HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

代码：

<!DOCTYPE html>
<html lang="ch">
    <head>
        <meta charset="UTF-8">
        <title>少女动画</title>
    </head>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .girl{
            width: 120px;
            height: 150px;
            background-image: url("img/sailormars.png");
            margin: 0 auto;
            animation: girl-set 1s steps(8) infinite;/*steps(8) 里面的数字看这一行有几个图*/
        }
        /*创建关键帧 后面的名字自定义 和上面的girl绑定*/
        @keyframes girl-set {
            from{
                background-position: 0 0;
            }
            to{
                background-position: -960px 0;
            }
        }
        /*这个也一样*/
        .girl2{
            width: 120px;
            height: 150px;
            background-image: url("img/sailormars.png");
            margin: 0 auto;
            animation: girl2-set 1s steps(6) infinite;
        }
        @keyframes girl2-set {
            from{
                background-position: 0 -150px;
            }
            to{
                background-position: -720px -150px;
            }
        }
        .girl3{
            width: 120px;
            height: 150px;
            background-image: url("img/sailormars.png");
            margin: 0 auto;
            animation: girl3-set 1s steps(10) infinite;
        }
        @keyframes girl3-set {
            from{
                background-position: 0 -300px;
            }
            to{
                background-position: -1200px -300px;
            }
        }
        .girl4{
            width: 120px;
            height: 150px;
            background-image: url("img/sailormars.png");
            margin: 0 auto;
            animation: girl4-set 1s steps(9) infinite;
        }
        @keyframes girl4-set {
            from{
                background-position: 0 -450px;
            }
            to{
                background-position: -1080px -450px;
            }
        }


    </style>
    <body>
        <div class="girl"></div>
        <div class="girl2"></div>
        <div class="girl3"></div>
        <div class="girl4"></div>
    </body>
</html>