css做动态图

最新推荐文章于 2024-08-24 04:32:43 发布

万事胜意sy

最新推荐文章于 2024-08-24 04:32:43 发布

阅读量1.4k

点赞数 1

分类专栏：笔记

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

版权

CSS动画背景图片平滑移动 @keyframes steps()

关键词由CSDN通过智能技术生成

笔记专栏收录该内容

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>