کد بارش برگ های پاییزی برای بیان 🍁
این کد برای همه قالب ها قابل استفادست
همچنین میتونید به جای عکس برگ پاییزی تصویر دلخواه خودتون رو قرار بدید
در قسمت ساختار قالب کد زیر را قبل از تگ <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(https://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*****************/
اگه خواستید به جای عکس برگ، عکس دیگه ای بذارید اول مراحل بالا رو کامل انجام بدید حالا توی بخش css این آدرس رو جستجو کنید
http://bayanbox.ir/view/4134513399720456630/leaf.png
و لینک عکس خودتونو بجاش قرار بدید
- ۰۰/۰۸/۱۶
اگر قبلا در بیان ثبت نام کرده اید لطفا ابتدا وارد شوید، در غیر این صورت می توانید ثبت نام کنید.