css实现日落西山太阳下山风车动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现日落西山太阳下山风车动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        window.onload=snow;
                var int=self.setInterval("snow()",3500);
                var int2=self.setInterval("snow2()",4000);
                function snow(){
                        var div=document.createElement("div");
                        div.className="snow";
                        var bo=document.body;
                        bo.insertBefore(div,bo.lastChild);      
                        
                }
                setTimeout("clearInterval(int)",35000);
                function snow2(){
                        var div=document.createElement("div");
                        div.className="snow2";
                        var bo=document.body;
                        bo.insertBefore(div,bo.lastChild);      
                }
                setTimeout("clearInterval(int2)",40000);
    </script>

    <style>
        /* animation-duration: 1s;延时1s */
    body{
        margin: 0;
        height: 100vh;
        align-content: center;
        justify-content: center;
        font-size: 18px;
        overflow: hidden;
        background-size: 400%;
        background-image: linear-gradient(130deg,#d7e7ff,#99dfff,#abe1e0,#99dfff,#d8edff,#ffefe0,#fff7f2,#77acda,#4e74da,#4a74ff,#0d5cda,#694fff);
        animation:move 105s infinite linear;
    }
    @keyframes move{
        0%{background-position:0% 0%;}
        50%{background-position:100% 400%;}
        100%{background-position:0% 0%;}
    }
    #dimian_all{
        position: relative;
        width: 100%;
        height: 100vh;
        backdrop-filter: blur(2px);
        }
    #dimian1{
        position: absolute;
        box-sizing: border-box;
        top: 15em;
        left: 0em;
        border-bottom: 20em solid #14222d;
        border-top: 20em solid transparent;
        border-left: 20em solid #14222d;
        border-right: 20em solid transparent;
    }
    #dimian2{
        position: absolute;
        width: 100%;
        height: 7em;
        background: #14222d;
        top: 50em;
    }
    #dimian3{
        position: absolute;
        width: 40em;
        height: 5em;
        background: #14222d;
        top: 49em;
        left: 30em;
        border-radius:50% ;
    }
    #dimian4{
        position: absolute;
        top: 3em;
        left: 45em;
        border-bottom: 30em solid #14222d;
        border-top: 30em solid transparent;
        border-left: 40em solid transparent;
        border-right: 80em solid transparent;
        transform: rotate(-2deg);
    }
    #jianzhu{
        position: absolute;
        top: 17em;
        left: 81em;
        width: 8em;
        border-bottom: 10em solid #14222d;
        border-top: 10em solid transparent;
        border-left: 1em solid transparent;
        border-right: 1em solid transparent;
    }
    #jianzhu2{
        position: absolute;
        top: 9em;
        left: 81em;
        border-bottom: 8em solid #14222d;
        border-top: 10em solid transparent;
        border-left: 5em solid transparent;
        border-right: 5em solid transparent;
    }
    #jianzhu2::before{
        content: '';
        position: absolute;
        background: #93e8ff;
        width: 1em;
        height: 1em;
        top: 7.1em;
        left: -0.5em;
        transform: rotate(45deg);
    }
    #shu{
        position: absolute;
        top: 15em;
        left: 10em;
        border-bottom: 15em solid #14222d;
        border-top: 3em solid transparent;
        border-left: 3em solid transparent;
        border-right: 3em solid transparent;
    }
    #shu2{
        position: absolute;
        top: 25em;
        left: 17em;
        border-bottom: 10em solid #14222d;
        border-top: 3em solid transparent;
        border-left: 2em solid transparent;
        border-right: 2em solid transparent;
    }
    #shu3{
        position: absolute;
        top: 27em;
        left: 100em;
        border-bottom: 15em solid #14222d;
        border-top: 3em solid transparent;
        border-left: 3em solid transparent;
        border-right: 3em solid transparent;
    }
    #shu4{
        position: absolute;
        top: 33em;
        left: 72em;
        border-bottom: 10em solid #14222d;
        border-top: 3em solid transparent;
        border-left: 2em solid transparent;
        border-right: 2em solid transparent;
    }
    #shu5{
                position: absolute;
                top: 31em;
                left: 94em;
                width: 5em;
                height: 5em;
                border-radius: 50%;
                background: #14222d;
    }
    #shu5::before{
        position: absolute;
        top: -4em;
        left: 0.5em;
        content: '';
        border-bottom: 2em solid #14222d;
        border-top: 3em solid transparent;
        border-left: 2em solid transparent;
        border-right: 2em solid transparent;
    }
    #shu5::after{
        position: absolute;
        top: 3em;
        left: 2em;
        content: '';
        width: 1em;
        height: 5em;
        background: #14222d;
    }
    #rota{
        position: absolute;
        height: 100em;
        width: 3em;
        top: 0em;
        left: 45em;
        transform-origin: center center;
        z-index: -1;
        animation: riyue 105s infinite linear;
    }
    @keyframes riyue{
        from{transform: rotate(0deg);}
        to{transform: rotate(360deg);}
    }
    #riyue{
        backdrop-filter: blur(10em);
        position: absolute;
        background: #b6e2ff;
        width: 3em;
        height: 3em;
        top: 0em;
        left: 0em;
        border-radius: 50%;
        filter: blur(1px) opacity(95%);
        box-shadow:inset 0px 0px 0px 200px #FFFFFF,
        0px 0px 300px #ffffff,
        0px 0px 150px #ffffff,0px 0px 100px #ffffff,
        0px 0px 200px #ffffff,0px 0px 450px #ffffff,
        0px 0px 650px #ffffff,0px 0px 300px #ffffff,
        0px 0px 150px #ffffff,0px 0px 100px #ffffff,
        0px 0px 200px #ffffff,0px 0px 450px #ffffff,
        0px 0px 650px #ffffff;
    }
    #riyue::before{
        backdrop-filter: blur(10em);
        position: absolute;
        content: '';
        width: 4em;
        height: 4em;
        top: 92em;
        left: 0em;
        border-radius: 50%;
        border-left: 20px solid #ffffff;
        filter: blur(1px) opacity(95%) drop-shadow(0px 0px 20px white);
    }
    #yun1{.........完整代码请登录后点击上方下载按钮下载查看