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