动画效果-精灵图人物移动

@秋野

已于 2024-04-07 16:01:13 修改

阅读量250

点赞数 1

分类专栏：前端入门效果文章标签： html css css3

于 2024-04-02 11:05:46 首次发布

本文链接：https://blog.csdn.net/bgmcat/article/details/137262925

版权

前端入门效果专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述

效果：人物跑步移动



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes run {
            from{
                background-position: 0 0 ;
            }
            to {
                background-position: -1200px 0;
            }
        }

        @keyframes move {
            from{
                transform: translateX(0);
            }
            to {
                transform: translateX(1200px);
            }
        }




        div{
            /* margin: 0 auto; */
            width: 100px;
            height: 120px;
            background: yellow;
            background-image: url(./Snipaste_2024-04-02_09-57-01.png);
            animation: run 0.5s steps(12) infinite, move 5s linear forwards;
        }

        div:hover{
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <div>

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