css3动画风景图

你的名字 2022-02-02 12:13 224阅读 0赞

## 风景动画 ##

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            /* 外框 */
            .box{
                position: relative;
                width: 1000px;
                height: 500px;
                border: 2px solid black;
                background-color: skyblue;
                overflow: hidden;
            }
            /* 三座山 */
            .mountain01{
                position: absolute;
                bottom: -270px;
                left:-30px;
                width: 400px;
                height: 400px;
                background-color: green;
                border-radius: 100px;
                transform: rotate(30deg);
            }
            .mountain02{
                position: absolute;
                bottom: -370px;
                left:200px;
                width: 700px;
                height: 600px;
                background-color: green;
                border-radius: 100px;
                transform: rotate(40deg);
            }
            .mountain03{
                position: absolute;
                bottom: -270px;
                right:-100px;
                width: 500px;
                height: 500px;
                background-color: green;
                border-radius: 100px;
                transform: rotate(50deg);
            }
            /* 太阳 */
            .sun{
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100px;
                height: 100px;
                background-color: gold;
                border-radius: 50%;
                animation: move 2s linear forwards; 
            }
            /* 太阳的动画 */
            @keyframes move{
                0%{
                    left: 0;
                    bottom: 0;     
                }
                25%{
                    left: 190px;
                    bottom: 160px;     
                }
                50%{
                    left: 400px;
                    bottom: 360px;    
                }
                75%{
                    left: 650px;
                    bottom: 220px;    
                }
                100%{
                    left: 880px;
                    bottom: 380px;    
                }
            }
            /* 云 */
            .cloud{
                position: absolute;
                left: 0;
                top: 0;
                width: 200px;
                height: 100px;
                animation: cloudMove 2s 3s linear infinite alternate;
            }
            .ellipse01{
                position: absolute;
                left: 10px;
                top: 30px;
                width: 80px;
                height: 40px;
                border-radius: 50%;
                background-color: white;
            }
            .ellipse02{
                position: absolute;
                left: 40px;
                top: 20px;
                width: 120px;
                height: 70px;
                border-radius: 50%;
                background-color: white;
            }
            .ellipse03{
                position: absolute;
                right: 10px;
                top: 35px;
                width: 100px;
                height: 60px;
                border-radius: 50%;
                background-color: white;
            }
            /* 云动画 */
            @keyframes cloudMove{
                0%{
                    left: 0;    
                }
                100%{
                    left: 300px;
                }
            }
            /* 风车 */
            .windmill{
                position: absolute;
                right: 200px;
                bottom:300px;
                width: 100px;
                height: 100px;
                /* border: 1px solid black; */
                animation: myrotate 2s linear infinite;
            }
            .leaf01{
                position: absolute;
                left: 45px;
                width: 10px;
                height: 100px;
                border-radius: 50%;
                background-color: white;
            }
            .leaf02{
                position: absolute;
                left: 45px;
                width: 10px;
                height: 100px;
                border-radius: 50%;
                background-color: white;
                transform: rotate(90deg);
            }
            /* 风车旋转动画 */
            @keyframes myrotate{
                0%{
                    transform: rotate(0deg);
                }  
                100%{
                    transform: rotate(360deg);
                }  
            }
            .pole{
                position: absolute;
                right: 248px;
                bottom: 148px;
                width: 10px;
                height: 200px;
                background-color: brown;
                
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="pole"></div>
            <div class="sun"></div>
            <div class="mountain01"></div>
            <div class="mountain02"></div>
            <div class="mountain03"></div>
            <div class="cloud">
                <div class="ellipse01"></div>
                <div class="ellipse02"></div>
                <div class="ellipse03"></div>
            </div> 
            <div class="windmill">
                <div class="leaf01"></div>   
                <div class="leaf02"></div>   
            </div>
            
        </div>
    </body>

静态效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20220202/bb9a563110b343d784c89c388ce8311c.png