精灵图逐帧动画

XH_LZ

已于 2022-02-14 15:30:47 修改

阅读量280

点赞数 1

文章标签：动画 css css3

于 2022-02-14 15:13:41 首次发布

本文链接：https://blog.csdn.net/m0_46279754/article/details/122924917

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pic {
            /*宽和高与精灵图的单个图片的宽高一致*/
            width: 126px;
            height: 180px;
            background-image: url("img/animation_pic2.jpg");
            margin-left: 1000px;
            /*数字七和小人图个数一致  infinite重复*/
            animation:
                    move 2s steps(7) infinite,
                    box_move 30s forwards;


        }

        /*精灵图 移动*/
        @keyframes move {
            from {
                background-position: 0 0;
            }
            to {
                background-position: -882px 0;
            }
        }

        /*盒子移动    如何让小人跑远一点 ，  改变盒子位置  translate  position*/
        @keyframes box_move {
            from {  
                transform: translateX(0);
            }
            to {
                transform: translateX(-800px);
            }
        }
    </style>
</head>
<body>
<!--精灵图：准备显示区域    准备动画   使用动画-->
<div class="pic">

</div>
</body>
</html>