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

代码语言:html

所属分类:动画

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

代码标签: 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: '';
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0