阴阳师f4底部行走

最新推荐文章于 2022-07-31 00:18:58 发布

公子卿辞

最新推荐文章于 2022-07-31 00:18:58 发布

阅读量509

点赞数 2

分类专栏： js css html

本文链接：https://blog.csdn.net/qq_45647409/article/details/117794248

版权

html 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

综合项目阴阳师图片实现底部动画效果
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="base.css">
    <style>
        body{
            background-image: url('/images/西游记/bac.webp');
            background-repeat: no-repeat;
            background-size: 1920px 1080px ;
        }
        * {
            /* 清除默认 */
            margin: 0;
            padding: 0;
        }

        .box {
            position: fixed;
            /* 让盒子在底部 */
            bottom: 0;
            left: 0px;
            /* 因为要无缝衔接 所以width要设置为100% */
            width: 100%;
            /* 图片最高高度 */
            height: 176px;
            /* 背景颜色 看效果用的之后要注释掉 */
            /* background-color: pink; */
        }

        /* 第一个盒子样式 */
        .box_noe {
            position: absolute;
            bottom: 0;
            left: -170px;
            /* 开始的时候我们让他变成透明的 然后动画慢慢的出现 */
            /* opacity: 0; */
            /* width要原图/2 分为两份 308/2=154px*/
            width: 154px;
            /* 高度和图片一样 */
            height: 121px;
            /* 盒子要控制位置和移动 */
            /* 设置动画的总时间,然后要设置一下每一个人的出场顺序 */
            animation: box_move 16s linear infinite;
        }

        .one {
            /* 这个控制背景图片及人物的动画 */
            width: 154px;
            height: 121px;
            background: url(/阴阳师/txgc_6d0e9e5.png) no-repeat;
            overflow: hidden;
            /* 因为图片只有2个动作所以用步长 用2步完成这个动画 这样人就动了起来*/
            animation: imgAnimation_one .5s steps(2) infinite;
        }

        .box_two {
            position: absolute;
            bottom: 0;
            left: -170px;
            /* width要原图/2 分为两份 308/2=154px*/
            width: 167px;
            /* 高度和图片一样 */
            height: 176px;
            /* 盒子要控制位置和移动 */
            animation: box_move 16s linear 2s infinite;
        }

        .two {
            /* 这个控制背景图片及人物的动画 */
            width: 167px;
            height: 176px;
            background: url(/阴阳师/txgh_fee2457.png) no-repeat;
            overflow: hidden;
            /* 因为图片只有2个动作所以用步长 用2步完成这个动画 这样人就动了起来*/
            animation: imgAnimation_two .5s steps(2) infinite;
        }

        .box_three {
            position: absolute;
            bottom: 0;
            left: -170px;
            /* width要原图/2 分为两份 308/2=154px*/
            width: 161px;
            /* 高度和图片一样 */
            height: 149px;
            /* 盒子要控制位置和移动 */
            animation: box_move 16s linear 4s infinite;

        }

        .three {
            /* 这个控制背景图片及人物的动画 */
            width: 161px;
            height: 149px;
            background: url(/阴阳师/txgl_c15cfd8.png) no-repeat;
            overflow: hidden;
            /* 因为图片只有2个动作所以用步长 用2步完成这个动画 这样人就动了起来*/
            animation: imgAnimation_three .5s steps(2) infinite;
        }

        .box_four {
            position: absolute;
            bottom: 0;
            left: -170px;
            /* width要原图/2 分为两份 308/2=154px*/
            width: 171px;
            /* 高度和图片一样 */
            height: 157px;
            /* 盒子要控制位置和移动 */
            animation: box_move 16s linear 6s infinite;
        }

        .four {
            /* 这个控制背景图片及人物的动画 */
            width: 171px;
            height: 157px;
            background: url(阴阳师/txgq_d281c9b.png) no-repeat;
            overflow: hidden;
            /* 因为图片只有2个动作所以用步长 用2步完成这个动画 这样人就动了起来*/
            animation: imgAnimation_four .5s steps(2) infinite;
        }

        /* 发现所有的图片都是不一样的所以每一个都要有自己单独的动画 */
        @keyframes imgAnimation_one {

            /* 百分百的时候让图片的背景位置走 */
            100% {
                /* 走的必须是整张图片的宽度 这样才可以无限衔接 */
                background-position: -308px 0;
            }
        }

        @keyframes imgAnimation_two {

            /* 百分百的时候让图片的背景位置走 */
            100% {
                /* 走的必须是整张图片的宽度 这样才可以无限衔接 */
                background-position: -334px 0;
            }
        }

        @keyframes imgAnimation_three {

            /* 百分百的时候让图片的背景位置走 */
            100% {
                /* 走的必须是整张图片的宽度 这样才可以无限衔接 */
                background-position: -322px 0;
            }
        }

        @keyframes imgAnimation_four {

            /* 百分百的时候让图片的背景位置走 */
            100% {
                /* 走的必须是整张图片的宽度 这样才可以无限衔接 */
                background-position: -342px 0;
            }
        }

        /* 定义盒子的动画让他们走起来 */
        @keyframes box_move {

            /* 百分之0的时候 页面上是看不到他们的 */
            0% {
                transform: translate(0, 0);
            }
            100% {

                /* 然后走一个屏幕的距离这样就可以无缝衔接了 我的屏幕像素是1920px*1280px */
                transform: translate(2090px, 0);
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box_noe">
            <div class="one"></div>
        </div>
        <div class="box_two">
            <div class="two"></div>
        </div>
        <div class="box_three">
            <div class="three"></div>
        </div>
        <div class="box_four">
            <div class="four"></div>
        </div>

    </div>
</body>

</html>