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
  • یــاسـᓄـךּ ●‿●
  • قشنگه :)
    مسی
    باحالن خوشمان آمد .....
    اصن ساختم مخصوص خودت
    حال و هوای پاییزو قشنگ تو چش و چال آدم میکنن این برگا:)
    بیا فوت کنم دربیاد از چشمای قشنگت
  • crazy friends avatar
  • ✣یگانـღـه✢ jb
  • خیلی بامزه است
    (c11)(c22)
    تشکر
    سلووووم 
    من اومدم بعد از اون همه مدت 

    سلام عزیز سلام مهربون 
    سلام دلتنگت بودیم 
    واییییییییییی مرسیییییییییییی عاااااااالییییییییی بود 
    هووووووووووووم معلومه خب کارم درسته نه؟
  • 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
    آخرین نظرات
    نویسندگان