کد بارش برگ های پاییزی برای بیان

این کد برای, همه قالب ها قابل استفادست

همچنین میتونید به جای عکس برگ پاییزی, تصویر دلخواه خودتون رو قرار بدید

در قسمت ساختار قالب کد زیر را قبل از تگ <body/> کپی کنید 

<!--------paeez----------->
<div class="fallingLeaves">

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

</div>

<!--/------paeez/----------->

سپس کد زیر را به آخرین خط css قالب خود اضافه کنید و تمام

/************ falling ****************/

.fallingLeaves {
    text-align: center;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0px;
    pointer-events: none;
    z-index: 9999999999;
}
.fallingLeaves span {
    display: inline-block;
    width: 80px;
    height: 80px;
	margin: -280px 40px 54px  -34px;
background: url(http://bayanbox.ir/view/4134513399720456630/leaf.png);
    background-size: 30px;
    background-repeat: no-repeat;
    
    -webkit-animation: fallingLeaves 10s infinite  linear;
    -moz-animation: fallingLeaves 10s infinite  linear;
}
.fallingLeaves span:nth-child(5n+5) {

    -webkit-animation-delay: 1.3s;
    -moz-animation-delay: 1.3s;
}
.fallingLeaves span:nth-child(3n+2) {

    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
}
.fallingLeaves span:nth-child(2n+5) {

    -webkit-animation-delay: 1.7s;
    -moz-animation-delay: 1.7s;
}

.fallingLeaves span:nth-child(3n+10) {

    -webkit-animation-delay: 2.7s;
    -moz-animation-delay: 2.7s;
}
.fallingLeaves span:nth-child(7n+2) {

    -webkit-animation-delay: 3.5s;
    -moz-animation-delay: 3.5s;
}
.fallingLeaves span:nth-child(4n+5) {

    -webkit-animation-delay: 5.5s;
    -moz-animation-delay: 5.5s;
}
.fallingLeaves span:nth-child(3n+7) {

    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
}
@-webkit-keyframes fallingLeaves {
  0% {
    opacity: 1;

	-webkit-transform: translate(0, 0px) rotateZ(0deg);
  }
  75% {
    opacity: 1;

	-webkit-transform: translate(100px, 600px) rotateZ(270deg); 
  }
  100% {
    opacity: 0;

	-webkit-transform: translate(150px, 800px) rotateZ(360deg);
  }
}
@-moz-keyframes fallingLeaves {
  0% {
    opacity: 1;
    
	-webkit-transform: translate(0, 0px) rotateZ(0deg);
  }
  75% {
    opacity: 1;
   
	-webkit-transform: translate(100px, 600px) rotateZ(270deg); 
  }
  100% {
    opacity: 0;
    
	-webkit-transform: translate(150px, 800px) rotateZ(360deg);
  }
}


/*******************end falling*****************/