用html和css制作师徒四人西天取经动画（提供源码+素材）点赞加关注，经典案例持续更新~

十七同志

已于 2023-11-04 23:47:17 修改

阅读量345

点赞数 5

分类专栏： html+css 文章标签： html css 前端动画

于 2023-11-01 23:06:23 首次发布

本文链接：https://blog.csdn.net/weixin_54049256/article/details/134172040

版权

html+css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

html

<body>
    <div class="box">
        <div class="wk"></div>
        <div class="bj"></div>
        <div class="ts"></div>
        <div class="ss"></div>
    </div>
</body>

css样式

 * {
            margin: 0;
            padding: 0;
        }

         /* 背景 */
        body {
            width: 100%;
            height: 100%;
            background-image: url(./images/bg.jpg);
            /* 背景绑定名称，动画无限次往返执行，动画反向执行因为背景向后走，动画匀速运动 */
            animation: bg 20s infinite reverse linear;
        }

        .box {
            width: 800px;
            height: 500px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin: 0px auto;

        }

        .wk {
            width: 180px;
            height: 180px;
            background-image: url(./images/1.png);
            /* 悟空绑定名称，动画持续时间，分8步执行动画，动画无限次往返执行 */
            animation: wk 2s steps(8) infinite;

        }

        .bj {
            width: 180px;
            height: 180px;
            background-image: url(./images/2.png);
            /* 八戒绑定名称，动画持续时间，分8步执行动画，动画无限次往返执行 */
            animation: bj 2s steps(8) infinite;

        }

        .ts {
            width: 190px;
            height: 240px;
            background-image: url(./images/3.png);
            /* 唐僧绑定名称，动画持续时间，分8步执行动画，动画无限次往返执行 */
            animation: ts 2s steps(8) infinite;

        }

        .ss {
            width: 200px;
            height: 200px;
            background-image: url(./images/4.png);
            /* 沙僧绑定名称，动画持续时间，分8步执行动画，动画无限次往返执行 */
            animation: ss 2s steps(8) infinite;

        }

        @keyframes bg {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -1600px 0;
            }

        }

        @keyframes wk {
            0% {
                background-position: 0 center;
            }

            100% {
                background-position: -1600px center;
            }
        }

        @keyframes bj {
            0% {
                background-position: 0 center;
            }

            100% {
                background-position: -1600px center;
            }


        }

        @keyframes ts {
            0% {
                background-position: 0 center;
            }

            100% {
                background-position: -1360px center;
            }

        }

        @keyframes ss {
            0% {
                background-position: 0 center;
            }

            100% {
                background-position: -1680px center;
            }

        }