Menu

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

دوشنبه, ۳ مهر ۱۳۹۶، ۱۰:۴۲ ب.ظ
Afshin

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

نظرات (۴)

وبت با این برگا خوشگل شده 😃
بووووووووووود
  • crazy friends avatar
  • یــاسـᓄـךּ ●‿●
  • قشنگه :)
    مسی
    باحالن خوشمان آمد .....
    اصن ساختم مخصوص خودت
    حال و هوای پاییزو قشنگ تو چش و چال آدم میکنن این برگا:)
    بیا فوت کنم دربیاد از چشمای قشنگت
    X
    ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
    شما میتوانید از این تگهای html استفاده کنید:
    <b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
    crazy friends

    if you have crazy friend you have everything ...

    if you have crazy friend you have everything ...

    هوا چطوره؟ my city
    music
    James horner
    My Immortal Evanescence
    music
    James horner
    James horner FOR THE LOVE
    music
    James horner
    Whithin-Temptation Forgiven
    آخرین نظرات
    • ۲۷ آبان ۹۶، ۲۰:۲۷ - ✣یگانـღـه✢ jb
      crazy comment avatar(c83)
    نویسندگان