如何用CSS实现逐帧动画（animation:steps() ）

最新推荐文章于 2023-06-08 15:23:43 发布

NOyesNONO_

最新推荐文章于 2023-06-08 15:23:43 发布

阅读量364

点赞数

分类专栏：前端文章标签： html5 css3

本文链接：https://blog.csdn.net/NOyesNONO_/article/details/111386280

版权

前端专栏收录该内容

54 篇文章 2 订阅

订阅专栏

效果图

在这里插入图片描述
原图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>steps</title>
    <style>
        .box {
            width: 266px;
            height: 241px;
            border: 1px solid;
            background-image: url("img/天宫.jpg");
            animation: run 1s steps(7) infinite;
        }
        
        @keyframes run {
            to {
                background-position: -1862px 0;
            }
        }
    </style>
</head>

<body>
    <div class="box">
    </div>
</body>

</html>

要点：
1、从第一个图到第8个图需要经过7步——steps(7)
2、从第一个图位移到第八个图需要经过1862px

优惠劵

NOyesNONO_

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
如何用CSS实现逐帧动画（animation:steps() ）

效果图原图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>steps</title> <style> .box {
复制链接

扫一扫