纯css制作的城市场景动画

最新推荐文章于 2022-09-12 07:29:41 发布

卟良亻

最新推荐文章于 2022-09-12 07:29:41 发布

阅读量2.1k

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42595284/article/details/82289758

本文介绍了一个使用HTML和CSS创建的动态网页案例，通过关键帧动画实现背景颜色渐变、云朵和热气球的动态效果，并利用相对定位和绝对定位来布局太阳、月亮等元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*公共样式*/
        *{
            margin: 0;
            padding: 0;
        }
        /*背景*/
        body{
            background: pink;
            overflow: hidden;
            animation: bg 50s linear infinite;
        }
        @keyframes bg{
            0%{background: pink;}
            25%{background: pink;}
            62.5%{background: #111;}
            87.5%{background: #111;}
            100%{background: pink;}
        }
        /*外边框*/
        .wrap{
            width: 100%;
            height: 100%;
        }
        /*草坪*/
        .ground-front{
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 300px;
            background: url(images/groundFront.png);
            background-repeat: repeat-x;
            background-position: center;
            z-index: 9;
        }
        .ground-mid{
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 300px;
            background: url(images/groundMid.png);
            z-index: 7;
        }
        .ground-back{
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 250px;
            background: url(images/groundBack.png) no-repeat;
            z-index: 4;
        }
        /*建筑*/
        .bulid .skyline{
            position: absolute;
            bottom: 78px;
            width: 100%;
            height: 250px;
            background: url(images/skyline.png) repeat-x;
            background-position: center;
        }
        .bulid .frendship-shell img{
            position: absolute;
            left: 222px;
            bottom: 90px;
            z-index: 8;
        }
        .bulid .dowEvenCenter img{
            position: absolute;
            left: 70px;
            bottom: 100px;
            z-index: 6;
            transform: scale(0.9);
        }
        .bulid .glokenspiel img{
            position: absolute;
            left: 515px;
            bottom: 147px;
            z-index: 5;
            transform: scale(0.9);
        }
        .bulid .plantarium img{
            position: absolute;
            right: 150px;
            bottom: 105px;
            z-index: 5;
            transform: scale(0.9);
        }
        /*云*/
        .cloud img{
            position: absolute;
            top: 50px;
            opacity: 0.6;
        }
        .cloud-large img{
            z-index: 2;
            left: 500px;
            animation: cloud-move 80s linear infinite alternate;
        }
        .cloud-midium img{
            top: 180px;
            z-index: 1;
            left: 100px;
            animation: cloud-move 100s linear infinite alternate;
        }
        .cloud-small img{
            left: 1000px;
            animation: cloud-move 100s linear infinite alternate;
        }
        @keyframes cloud-move{
            0%{}
            50%{left: 105%}
            100%{left: -100px}
        }
        /*热气球*/
        .balloon img{
            position: absolute;
            animation: balloon-move 50s linear infinite ;
            left: -200px;
            top: 80px;
            z-index: 3;
        }
        @keyframes balloon-move{
            0%{}
            10%{transform: rotate(0deg);}
            25%{transform: rotate(45deg);}
            40%{}
            50%{left: 105%;transform: rotate(0deg);}
            60%{transform: rotate(0deg);}
            75%{transform: rotate(-45deg);}
            90%{}
            100%{left: -200px}
        }
        /*太阳和月亮*/
        .box{
            position: relative;
            margin: 0 auto;
            width: 800px;
            height: 800px;
            z-index: -1;
            animation: box 50s linear infinite;
        }
        .box div{
            position: absolute;
            width: 150px;
            height: 150px;
            border-radius: 100px;
        }
        .box .sun{
            background: yellow;
            top: 0;
            left: 0;
        }
        .box .moon{
            background: #000;
            bottom: 0;
            right: 0;
        }
        @keyframes box{
            from{transform: rotateZ(0deg);}
            to{transform: rotateZ(360deg);}
        }
    </style>
</head>
<body>
    <div class="wrap">
        <!-- 草坪 -->
        <div class="ground-front"></div>
        <div class="ground-mid"></div>
        <div class="ground-back"></div>
        <!-- 建筑 -->
        <div class="bulid">
            <div class="skyline"></div>
            <div class="frendship-shell">
                <img src="images/friendshipShell.png">
            </div>
            <div class="dowEvenCenter">
                <img src="images/dowEventCenter.png">
            </div>
            <div class="glokenspiel">
                <img src="images/Glockenspiel.png">
            </div>
            <div class="plantarium">
                <img src="images/Planetarium.png">
            </div>
        </div>
        <!-- 云 -->
        <div class="cloud">
            <div class="cloud-large"><img src="images/cloudLarge.png"></div>
            <div class="cloud-midium"><img src="images/cloudMedium.png"></div>
            <div class="cloud-small"><img src="images/cloudSmall.png"></div>
        </div>
        <!-- 热气球 -->
        <div class="balloon">
            <img src="images/balloon.png">
        </div>
        <!-- 太阳，月亮 -->
        <div class="box">
            <div class="sun"></div>
            <div class="moon"></div>
        </div>
    </div>
</body>
</html>