32.《html+css3实现风和日丽》_html风和日丽-CSDN博客

本文链接：https://blog.csdn.net/qq_44864082/article/details/107193126
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 最外面的大盒子 */
    .wrap{
        position: relative;
        width: 900px;
        height: 700px;
        background-color: aqua;
        margin: 100px auto;
        overflow: hidden;
    }
    /* 三座山 */
    .shan1,.shan2,.shan3{
        position: absolute;
        top: 425px;
        width: 300px;
        height: 500px;
        background-color: green;
        transform: rotate(45deg);
        border-radius: 75px 75px 0 0;
    }
    .shan2{
        position: absolute;
        left: 300px;
    }
    .shan3{
        position: absolute;
        left: 600px;
    }
    /*风扇外面的正方形*/
    .fengWrap{
        position: absolute;
        left:619px;
        top:167px;
        width: 200px;
        height: 200px;
        /* background-color: yellow; */
        animation: change 1s linear infinite;
    }
    @keyframes change {
        100%{
            transform: rotate(360deg);
        }
    }
    /* 风车的两片叶子 */
    .feng1, .feng2{
        position: absolute;
        width: 200px;
        height: 20px;
        background-color: white;
        border-radius: 50%;
    }
    .feng1{
        position: absolute;
        top: 90px;
        transform: rotate(90deg);
    }
    .feng2{
        position: absolute;
        top: 90px;
    }
    /* 杆子 */
    .gan{
        position: absolute;
        top: 267px;
        left: 703px;
        width: 20px;
        height: 290px;
        background-color: green;
 
    }

    /* 三朵云 */
    .yun1,.yun2,.yun3{
       width: 80px;
       height: 80px;
       background-color: white;
       border-radius: 50%;
    }
    .yun1{
        position:absolute ;
        left: 81px;
        top: 82px;
        animation: changes1 1s linear 2s infinite alternate;
    }
    .yun2{
        position:absolute ;
        left: 111px;
        top: 90px;
        animation: changes2 1s linear 2s infinite alternate;
    }
    .yun3{
        position:absolute ;
        left: 149px;
        top: 77px;
        animation: changes3 1s linear  2s infinite alternate;
    }
    /* 三朵云的状态 */
    @keyframes changes1 {
        100%{
            left: 175px;
        }
    }
    @keyframes changes2 {
        100%{
            left: 205px;
        }
    }
    @keyframes changes3 {
        100%{
            left: 243px;
        }
    }
</style>
<body>
    <!-- 最外面的盒子 -->
    <div class="wrap">
       
        <!-- 三朵重合的云朵 -->
             <div class="yun">
                 <div class="yun1"></div>
                 <div class="yun2"></div>
                 <div class="yun3"></div>
             </div>
             <!-- 三座山 杆子-->
            <div class="shan1"></div>
            <div class="shan2"></div>
            <div class="shan3"></div>
            <div class="gan"></div>
            <!-- 风叶 -->
            <div class="fengWrap">  
                  <div class="feng1"></div>
                  <div class="feng2"></div>
            </div>
          
    </div>

    <div class="sun">
        <div class="sun_box"></div>
    </div>
    <style>
        .sun{
            position: relative;
        }
        .sun_box{
            position: absolute;
            bottom: 150px;
            left: 399px;
            width: 100px;
            height: 100px;
            background-color: yellow;
            border-radius: 50%;
            animation: scrollg 2s linear  forwards;
        }
       @keyframes scrollg {
          0%{
              left: 399px;
              bottom: 150px;
          }
          25%{
              left: 620px;
              bottom: 350px;
          }
          50%{
              left: 850px;
              bottom:200px ;
          }
          75%{
              left: 950px;
              bottom: 350px;
          }
          100%{
              left: 1100px;
              bottom: 700px;
          }
       
       }
    </style>
</body>
</html>