纯CSS实现图片动画

最新推荐文章于 2024-07-22 19:12:50 发布

SoloTravelerHQ

最新推荐文章于 2024-07-22 19:12:50 发布

阅读量4.3k

点赞数 1

分类专栏：前端笔记文章标签：动画 css css3

本文链接：https://blog.csdn.net/huangqiang80/article/details/121118708

版权

前端笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

纯CSS实现图片动画

1、先网上下载一张sprites动画图片，直接百度搜sprites图片就可。
2、用css设置一个关键帧，确定好起始位置和终止位置，
通过background-position调整背景图片在div框中显示的位置。
图片可以用ps查看像素大小，便于定位起始位置和结束位置。

3、通过animation: test 1s steps(3) infinite;设置动画效果

test：关键帧的名称；

1s：动画从开始到结束的时间

steps(3)：步进式播放动画，简言之就是将图片分成了3块进行跳转

infinite：无线循环

图片：
在这里插入图片描述

代码：

<style>
    .test {
        width: 72px;
        height: 62px;
        background-image: url(./wukong.webp);
        animation: test 1s steps(3) infinite;/* 设置动画参数 */
        margin: 0 auto;
    }
    @keyframes test {
        from {
            background-position: -242px -60px;/* 起始位置 */
        }
        to {
            background-position: -450px -60px;/* 结束位置 */
        }
    }
</style>
<body>
    <div class="test"></div>
</body>

效果：
在这里插入图片描述