css城市公园下雪动画雪景效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css城市公园下雪动画雪景效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        body{
        	width: 100%;
        	display: block;
        	background: linear-gradient(#d2f0e6, #9ac8bb);
        }
        .background-linear{
        	position: fixed;
        	width: 100%;
        	height: 100%;
        	display: block;
        	background: linear-gradient(#d2f0e6, #9ac8bb);
        	z-index: 1;
        }
        .wrapper{
        	position: relative;
        	width: 100%;
        	display: block;
        	padding-top: 30px;
        	padding-bottom: 30px;
        	z-index: 2;
        }
        .winter-wrapper{
        	position: relative;
        	width: 600px;
        	height: 450px;
        	display: block;
        	margin: 0 auto;
        	z-index: 2;
        	overflow: hidden;
        }
        .winter-wrap{
        	position: absolute;
        	top: 0;
        	left: 0;
        	z-index: 10;
            width: 100%;
        	height: 100%;
        	overflow: hidden;
        }
        .snow-wrapper{
        	position: absolute;
        	top: -900px;
        	left: 0;
        	width: 600px;
        	height: 1350px;
        	display: block;
        	margin: 0 auto;
        	z-index: 200;
        	overflow: hidden;
        	animation: moveSnow-one 18s linear infinite;
        	-webkit-transition: all 300ms linear;
        	transition: all 300ms linear; 
        }
        .snow-wrapper.big{
        	top: -875px;
        	left: 10px;
        	animation: moveSnow-two 20s linear infinite;
        }
        @keyframes moveSnow-one {
          0% { 
        		transform: translate(0, 0);  
          }
          25% { 
        		transform: translate(-20px, 8.33333333333333%);  
          }
          50% { 
        		transform: translate(-40px, 16.6666666666666%);  
          }
          75% { 
        		transform: translate(-20px, 24.99999999999999%);  
          }
          100% { 
        		transform: translate(0, 33.333333333333%);  
          }
        }
        @keyframes moveSnow-two {
          0% { 
        		transform: translate(0, 0);  
          }
          25% { 
        		transform: translate(15px, 8.33333333333333%);  
          }
          50% { 
        		transform: translate(30px, 16.6666666666666%);  
          }
          75% { 
        		transform: translate(15px, 24.99999999999999%);  
          }
          100% { 
        		transform: translate(0, 33.333333333333%);  
          }
        }
        .snow-wrap{
        	position: absolute;
        	top: 0;
        	left: 0;
        	width: 600px;
        	height: 450px;
        	display: block;
        	margin: 0 auto;
        	z-index: 1;
        	overflow: hidden;
        }
        .snow-wrap.snd{
        	top: 450px;
        }
        .snow-wrap.trd{
        	top: 900px;
        }
        .snow-wrapper.big .snow-wrap span{
        	width: 3px;
        	height: 3px;
        }
        .snow-wrap span{
        	position: absolute;
        	top: 20px;
        	left: 20px;
        	width: 4px;
        	height: 4px;
        	border-radius: 50%;
        	background-color: #fefefe;
        }
        .snow-wrap span:nth-child(2){
        	top: 25px;
        	left: 70px;
        }
        .snow-wrap span:nth-child(3){
        	top: 30px;
        	left: 120px;
        }
        .snow-wrap span:nth-child(4){
        	top: 35px;
        	left: 180px;
        }
        .snow-wrap span:nth-child(5){
        	top: 20px;
        	left: 240px;
        }
        .snow-wrap span:nth-child(6){
        	top: 40px;
        	left: 310px;
        }
        .snow-wrap span:nth-child(7){
        	top: 30px;
        	left: 365px;
        }
        .snow-wrap span:nth-child(8){
        	top: 10px;
        	left: 415px;
        }
        .snow-wrap span:nth-child(9){
        	top: 20px;
        	left: 470px;
        }
        .snow-wrap span:nth-child(10){
        	top: 50px;
        	left: 535px;
        }
        .snow-wrap span:nth-child(11){
        	top: 35px;
        	left: 585px;
        }
        .snow-wrap span:nth-child(12){
        	top: 100px;
        	left: 15px;
        }
        .snow-wrap span:nth-child(13){
        	top: 90px;
        	left: 65px;
        }
        .snow-wrap span:nth-child(14){
        	top: 70px;
        	left: 135px;
        }
        .snow-wrap span:nth-child(15){
        	top: 80px;
        	left: 165px;
        }
        .snow-wrap span:nth-child(16){
        	top: 90px;
        	left: 215px;
        }
        .snow-wrap span:nth-child(17){
        	top: 60px;
        	left: 265px;
        }
        .snow-wrap span:nth-child(18){
        	top: 80px;
        	left: 305px;
        }
        .snow-wrap span:nth-child(19){
        	top: 110px;
        	left: 325px;
        }
        .snow-wrap span:nth-child(20){
        	top: 85px;
        	left: 375px;
        }
        .snow-wrap span:nth-child(21){
        	top: 95px;
        	left: 415px;
        }
        .snow-wrap span:nth-child(22){
        	top: 60px;
        	left: 465px;
        }
        .snow-wrap span:nth-child(23){
        	top: 75px;
        	left: 515px;
        }
        .snow-wrap span:nth-child(24){
        	top: 95px;
        	left: 545px;
        }
        .snow-wrap span:nth-child(25){
        	top: 65px;
        	left: 575px;
        }
        .snow-wrap span:nth-child(26){
        	top: 135px;
        	left: 55px;
        }
        .snow-wrap span:nth-child(27){
        	top: 145px;
        	left: 115px;
        }
        .snow-wrap span:nth-child(28){
        	top: 120px;
        	left: 175px;
        }
        .snow-wrap span:nth-child(29){
        	top: 105px;
        	left: 215px;
        }
        .snow-wrap span:nth-child(30){
        	top: 140px;
        	left: 230px;
        }
        .snow-wrap span:nth-child(31){
        	top: 125px;
        	left: 275px;
        }
        .snow-wrap span:nth-child(32){
        	top: 145px;
        	left: 335px;
        }
        .snow-wrap span:nth-child(33){
        	top: 105px;
        	left: 405px;
        }
        .snow-wrap span:nth-child(34){
        	top: 125px;
        	left: 475px;
        }
        .snow-wrap span:nth-child(35){
        	top: 140px;
        	left: 525px;
        }
        .snow-wrap span:nth-child(36){
        	top: 120px;
        	left: 590px;
        }
        .snow-wrap span:nth-child(37){
        	top: 180px;
        	left: 15px;
        }
        .snow-wrap span:nth-child(38){
        	top: 190px;
        	left: 60px;
        }
        .snow-wrap span:nth-child(39){
        	top: 210px;
        	left: 115px;
        }
        .snow-wrap span:nth-child(40){
        	top: 190px;
        	left: 160px;
        }
        .snow-wrap span:nth-child(41){
        	top: 175px;
        	left: 210px;
        }
        .snow-wrap span:nth-child(42){
        	top: 190px;
        	left: 245px;
        }
        .snow-wrap span:nth-child(43){
        	top: 175px;
        	left: 300px;
        }
        .snow-wrap span:nth-child(44){
        	top: 200px;
        	left: 340px;
        }
        ..........完整代码请登录后点击上方下载按钮下载查看