2020-11-24

最新推荐文章于 2025-12-01 21:03:28 发布
原创最新推荐文章于 2025-12-01 21:03:28 发布 · 124 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#html5 #css3
动画效果（风和日丽）

<!DOCTYPE html>
<html lang="en">
<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>风和日丽</title>
    <style>
    .background{
        margin:100px auto;
        position:relative;
        width:950px;
        height:500px;
        background-color:skyblue;
        border: 5px solid black;
        overflow: hidden;
        animation: backchage 4s linear 1;
    }
    .mount1{
        position:absolute;
        top:300px;
        width:300px;
        height:300px;
        background-color:green;
        transform:rotate(45deg);
        border-radius:80px;z-index: 1;
    }
    .mount2{
        position:absolute;
        left:300px;
        top:250px;
        width:400px;
        height:400px;
        background-color:green;
        transform:rotate(45deg);
        border-radius:80px;z-index: 1;
    }
    .mount3{
        position:absolute;
        top:275px;
        left:700px;
        width:300px;
        height:300px;
        background-color:green;
        transform:rotate(45deg);
        border-radius:80px;
        z-index: 2;
    }
    .fengche{
        position:absolute;
        left:707px;
        top:66px;
        width:150px;
        height:150px;
        z-index: 2;
        animation: change 2s linear infinite;
    }
    .shanye1{
        position:absolute;
        top:70px;
        width:150px;
        height:10px;
        background-color: white;
        border-radius: 50%;
    }
    .shanye2{
        position:absolute;
        top:70px;
        width:150px;
        height:10px;
        background-color: white;
        border-radius: 50%;
        transform:rotate(90deg);
    }
    .gan{
        position:absolute;
        left:777px;
        top:136px;
        width:10px;
        height:150px;
        background-color: pink;
        z-index: 1;
    }
   .box{
        position:relative;
        animation: yidong 10s 4s linear infinite alternate;
    }
    .yun1{
        position:absolute;
        top:20px;
        width:80px;
        height:40px;
        background-color: white;
        border-radius: 50%;
        animation: backchage01 4s linear 1;

    }
    .yun2{
        position:absolute;
        top:3px;
        left:29px;
        width:130px;
        height:60px;
        background-color:white;
        border-radius: 50%;
        animation: backchage01 4s linear 1;

    }
    .yun3{
        position:absolute;
        top:23px;
        left:100px;
        width:100px;
        height:50px;
        background-color: white;
        border-radius: 50%;
        animation: backchage01 4s linear 1;

    }
    .sun{
        position:absolute;
        top:250px;
        width: 100px;
        height:100px;
        background-color: goldenrod;
        border-radius: 50%;
        animation: sunr 8s linear 1 forwards;}
    @keyframes sunr{
        0%{
           left:0;
          top:250px;
          background-color:orangered;
        }
        50%{
            left:400px;
         top:25px;
         background-color:goldenrod;
        }
        100%{
           left:800px;
         top:25px;
         background-color:goldenrod;
        }
    }
    @keyframes yidong{
        0%{
           left:0;
          
        }
        100%{
           left:600px;
         
        }
    }
    @keyframes change{
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }
    @keyframes backchage{
        0%{
            background-color:black;
        }
        100%{
            background-color:skyblue;
        }
    }
    @keyframes backchage01{
        0%{
            background-color:black;
        }
        100%{
            background-color:white;
        }
    }
   
    </style>
</head>
<body>
    <div class="background">
        <div class="mount1"></div>
        <div class="mount2"></div>
        <div class="mount3"></div>
        <div class="fengche">
        <div class="shanye1"></div>
        <div class="shanye2"></div>
        </div>
        <div class="gan"></div>
        <div class="box">
            <div class="yun1"></div><div class="yun2"></div><div class="yun3"></div>
        </div> 
        <div class="sun"></div>                      
    </div>
</body>
</html>