css3小鸟飞翔案例代码+css3西游记动画案例代码

快秃头的小爽

于 2022-07-22 09:14:59 发布

阅读量245

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/weixin_52218117/article/details/125925281

版权

小鸟飞翔案例代码:

在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background: url(../img/2.jpg) no-repeat 0 0/cover;
        }
        .box{
            width: 144px;
            height: 79px;
            overflow: hidden;
            animation: ff 10s linear infinite forwards;
            /* border: 1px solid red; */
            /* transition: all 20s steps(8);
            transform: translateX(500px); */
            
        }
        .xn{
            width: 1152px;
            height: 79px;
            animation: xn1 0.5s steps(8) infinite;
        }
        @keyframes ff{
            0%{
                transform: translate(0,0);
            }
            25%{
                transform: translate(400px,200px);
            }
            50%{
                transform: translate(800px,-20px);
            }

            75%{
                transform: translate(1200px,200px);
            }
            100%{
                transform: translate(1600px,0);
            }
        }
        @keyframes xn1{
            0%{
                transform: translate(0,0);
            }
           100%{
                transform: translate(-1152px,0);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="xn"><a href=""><img src="../img/111.png" alt=""></a></div>
    </div>
</body>
</html>

西游记代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 1000px;
            height: 500px;
            overflow: hidden;
            margin: 100px auto;
            position: relative;
        }
        .zt{
            width: 1000px;
            height: 200px;
            background-color: rgba(rgb(221, 184, 184), rgb(102, 109, 102), rgb(85, 85, 89), .1);
            position: absolute;
            right: 0;
            bottom: -200px;
        }
        .box:hover .zt{
            transform: translate(0,-60px);
            transition: all 2s linear;
        }
        .box>img{
            width: 1300px;
            height: 500px;
            position: absolute;
            right: 0;
            top: 0;
            animation: tp 10s linear infinite;
        }
        @keyframes tp{
            0%{
                transform: translate(0,0);
            }
            100%{
                transform: translate(300px,0);
            }
        }
        .swk{
            width: 200px;
            height: 180px;
            overflow: hidden;
            position: absolute;
            top: 300px;
            left: 100px;
        }
        .swk img{
            width: 1600px;
            height: 180px;
            animation: sun 2s steps(8) infinite;
        }
        @keyframes sun{
            0%{
                transform: translate(0,0);
            }
            100%{
                transform: translate(-1600px,0);
            }
        }
        .zbj{
            width: 200px;
            height: 180px;
            overflow: hidden;
            position: absolute;
            top: 300px;
            left: 250px;
        }
        .zbj img{
            width: 1600px;
            height: 180px;
            animation: zhu 2s steps(8) infinite;
        }
        @keyframes zhu{
            0%{
                transform: translate(0,0);
            }
            100%{
                transform: translate(-1600px,0);
            }
        }
        .ts{
            width: 170px;
            height: 240px;
            overflow: hidden;
            position: absolute;
            top: 270px;
            left: 440px;
        }
        .ts img{
            width: 1360px;
            height: 240px;
            animation: tang 2s steps(8) infinite;
        }
        @keyframes tang{
            0%{
                transform: translate(0,0);
            }
            100%{
                transform: translate(-1360px,0);
            }
        }
        .sc{
            width: 210px;
            height: 200px;
            overflow: hidden;
            position: absolute;
            top: 300px;
            left: 600px;
        }
        .sc img{
            width: 1680px;
            height: 200px;
            animation: sha 2s steps(8) infinite;
        }
        @keyframes sha{
            0%{
                transform: translate(0,0);
            }
            100%{
                transform: translate(-1680px,0);
            }
        }
    </style>

</head>
<body>
    <div class="box">
        <img src="../img/ft2_7b14393.png" alt="">
        <div class="swk">
            <img src="../img/sun.png" alt="">
        </div>
        <div class="zbj">
            <img src="../img/zhu.png" alt="">
        </div>
        <div class="ts">
            <img src="../img/tang.png" alt="">
        </div>
        <div class="sc">
            <img src="../img/sha.png" alt="">
        </div>
        <div class="zt">
            111111111111111111111111111111111111111111111111111111111111111
        </div>
    </div>
</body>
</html>