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

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

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