css做动态图

最新推荐文章于 2024-04-12 05:23:09 发布

万事胜意sy

最新推荐文章于 2024-04-12 05:23:09 发布

阅读量1.4k

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_50736511/article/details/109683972

版权

笔记专栏收录该内容

469 篇文章 2 订阅

订阅专栏


<!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>
        .one{
            margin: 0px auto;
            width: 70px;
            height: 70px;
          background: url("img/02307b64363eafb4e8dfde7859f7aef.png");
          position: relative;
          /* steps(5)分五步执行 */
          animation: move 0.5s steps(5) infinite;
        }
        @keyframes move {
            0% {
              left: 0px;
            }
            100%{
                /* 改变最后的位置 */
                background-position:360px;
            }
        }
        .two{
            margin: 0px auto;
            height: 240px;
            width: 150px;
            background: url("img/6570139b861e4bec75b8d3a072596ec.png");
            animation: movem 0.2s steps(3) infinite ;
        }
        @keyframes movem {
            0% {
              left: 0px;
            }
            100%{
                background-position:430px;
            }
        }
        .three{
            margin: 0px auto;
            width: 80px;
            height: 85px;
            background: url("img/dao.png");
            animation: moveq 0.5s steps(4) infinite ;
        }
        @keyframes moveq {
            0% {
              left: 0px;
            }
            100%{
                background-position:325px;
            }
        }
        .four{
            margin: 0px auto;
            width:72px;
            height: 90px;
            background: url("img/kaiqiang.png");
            animation: movew 0.5s steps(4) infinite ; 
        }
        @keyframes movew {
            0% {
              left: -5px;
            }
            100%{
                background-position:300px;
            }
        }
    </style>
</head>
<body>
    <div class="one">

    </div>
   
    <div class="three">

    </div>
    <div class="four">

    </div>
    <div class="five">

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

在这里插入图片描述
当盒子大小比背景图片小时只能显示一部分利用改变背景图片的位置来实现图片的动态（别忘用分步执行）

万事胜意sy

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
css做动态图

<!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> .one{ .
复制链接

扫一扫