精灵图（sprite）CSS动画实现

最新推荐文章于 2022-10-29 22:59:58 发布

珍妮玛•黛金

最新推荐文章于 2022-10-29 22:59:58 发布

阅读量6.1k

点赞数 5

分类专栏： css 文章标签： css 精灵图雪碧图 sprite 动画

本文链接：https://blog.csdn.net/woshiwangdaye/article/details/106114631

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

精灵图
在这里插入图片描述
动画效果如下

HTML代码

<div class="boxA"></div>

css代码

.boxA {
    width: 100px;
    height: 400px;
    background:url("https://img-ask.csdn.net/upload/202005/13/1589349016_808127.png") no-repeat;
    background-size: 600% 100%;
    -webkit-animation: bird-slow .5s steps(5) infinite;
    animation: bird-slow .5s steps(5) infinite;
}

@keyframes bird-slow {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 0%;
    }
}
@-webkit-keyframes bird-slow {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 0%;
    }
}