关键帧动画(html,css)

王猫粮

已于 2023-03-22 21:22:23 修改

阅读量115

点赞数

文章标签： css3 css html

于 2023-03-20 22:13:24 首次发布

本文链接：https://blog.csdn.net/m0_70684059/article/details/129677736

版权

<style>
    div{
        width: 184px;
        height: 325px;
        background-image: url(../img/动画帧.png);
        animation: cat 1s step-end infinite;
    }
    @keyframes cat {
        0%{
            background-position: 0px 0;
        } 
        11.1%{
            background-position: -184px 0;
        }
        22.2%{
            background-position: -368px 0;
        }
        33.3%{
            background-position: -552px 0;
        }
        44.4%{
            background-position: -736px 0;
        }
        55.5%{
            background-position: -920px 0;
        }
        66.6%{
            background-position: -1104px 0;
        }
        77.7%{
            background-position: -1288px 0;
        }
        88.8%{
            background-position: -1472px 0;
        }
        100%{
            background-position: -1656px 0;
        }  
    }
</style>
<body>
    <div></div>
</body>