HTML+CSS练习周边游动画

okstudy

已于 2024-05-31 01:28:35 修改

阅读量93

点赞数 3

分类专栏：前端文章标签： css html 前端 css3 html5

于 2024-05-04 20:29:26 首次发布

本文链接：https://blog.csdn.net/okstudy/article/details/138449534

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<head>
    <title>Document</title>
    <style>
        html{
            width: 100%;
            height: 100%;
        }
        body{
            height: 100%;
            width: 100%;
            background: url(./images/f1_1.jpg) no-repeat    center 0   /cover ;
        }
        .cloud img{
            position: absolute;
            left: 50%;
        }
        .cloud img:nth-child(1){
            margin-left: -300px;
            top: 50px;
            animation: cloudd 1s linear alternate infinite;
        }
        .cloud img:nth-child(2){
            margin-left: 400px;
            top: 100px;
            animation: cloudd 1s linear alternate infinite 0.6s;
        }
        .cloud img:nth-child(3){
            margin-left: -550px;
            top: 200px;
            animation: cloudd 1s linear alternate infinite 0.9s;
        }

        @keyframes cloudd {
            from{}
            to{
                transform: translateX(20px);
            }
        }

        .balloon{
            position: absolute;
            left: 50%;
            margin-left: -500px;
            top: 20%;
            animation: balloonn 1s linear alternate infinite ;
        }
        @keyframes balloonn {
            from{}
            to{
                transform: translatey(40px);
            }
        }

        .recommend img{
            position: absolute;
            top: 80%;
        }
        .recommend img:nth-child(1){
            margin-left: 20%;
            animation: recommendd 1s linear alternate infinite ;
        }
        .recommend img:nth-child(2){
            margin-left: 35%;
            animation: recommendd 1s linear alternate infinite 0.4s;
        }
        .recommend img:nth-child(3){
            margin-left: 50%;
            animation: recommendd 1s linear alternate infinite 0.8s;
        }
        .recommend img:nth-child(4){
            margin-left: 65%;
            animation: recommendd 1s linear alternate infinite 1.2s;
        }
        @keyframes recommendd {
            from{}
            to{
                transform: translatey(-60px);
            }
        }

        .text{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            animation: textt 1s ;
        }
        @keyframes textt {
            0%{
                transform: translate(-50%,-50%) scale(1);
            }
            10%{
                transform: translate(-50%,-50%) scale(0.2);
            }
            20%{
                transform: translate(-50%,-50%) scale(1.6);
            }
            30%{
                transform: translate(-50%,-50%) scale(0.8);
            }
            40%{
                transform: translate(-50%,-50%) scale(1);
            }
        }
    </style>
</head>
<body>
    <div class="cloud">
        <img src="./images/yun1.png" alt="">
        <img src="./images/yun2.png" alt="">
        <img src="./images/yun3.png" alt="">
    </div>
    <div class="balloon">
        <img src="./images/san.png" alt="">
    </div>
    <div class="recommend">
        <img src="./images/1.png" alt="">
        <img src="./images/2.png" alt="">
        <img src="./images/3.png" alt="">
        <img src="./images/4.png" alt="">
    </div>
    <div class="text">
        <img src="./images/font1.png" alt="">
    </div>
</body>
</html>