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

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

همچنین میتونید به جای عکس 1 1 تصویر دلخواه خودتون رو قرار بدید

در قسمت ساختار قالب کد زیر را قبل از تگ <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*****************/