چرت و پرت بلاگ!

:/
چرت و پرت بلاگ!

من هیچ چیزی ندارم بگم اینجا

پس میخندم, خنده هایی که دردو پنهان میکنه :)

طبقه بندی موضوعی
آخرین مطالب
  • ۰۰/۰۹/۳۰
    :)
آخرین نظرات
  • ۱۴ دی ۰۰، ۲۳:۳۴ - •𝕾𝖍𝖎𝖓 𝕽𝖞𝖚𝖏𝖎𝖓•
    جر

شما هم با تایتل این پست پشماتون ریخته :)

 

ولی واقعیه!

 

خیلی راحته این کار :)

 

کافیه کد زیر رو تو  css قالبتون کپی کنید

        @keyframes slid-show {
            0%   {opacity:100%;}
            40%  {opacity:100%;}
            50%  {opacity:0%;}
            90%  {opacity:0;}
            99.9%{opacity:100%;}
            100% {display:none;} 
        }
        .img-one {animation:slid-show 20s;}
        .img-two {animation:slid-show 20s;animation-delay:5s;}
        .img-three {animation:slid-show 20s;animation-delay:13.5s;}
        .img-one, .img-two, .img-three {animation-iteration-count: infinite;}

بعدش این کد رو توی html مکانی که میخواید اسلایدشو باشه رو کپی کنید :)

 

    <div class="slide-show" style="position:relative;">
        <img src="image-three.jpg" class="img-three" style="position:absolute;width:720px;height:360px;">
        <img src="image-two.jpg" class="img-two" style="position:absolute;width:720px;height:360px;">
        <img src="image-one.jpg" class="img-one" style="position:absolute;width:720px;height:360px;">
    </div>

خب اینجا در مکانی که زرد و قرمز شده باید آدرس تصویر خودتونو که باید توی اسلایدشوباشه قرار بدید :)

 

دانلود آموزش تصویری
میدونم آموزش تصویری خوب نشد ولی ببینید :/
 

نظرات  (۵)

۱۵ آبان ۰۰ ، ۱۹:۵۰ محمدحسین پارسائیان
این کد بهتریه:
@keyframes slid-show {
0% {opacity:100%;}
40% {opacity:100%;}
50% {opacity:0%;}
90% {opacity:0;}
100% {opacity:100%;}
}
.img-one {
animation:slid-show 20s;
}
.img-two {
animation:slid-show 20s;
animation-delay:5s;
}
.img-three {
animation:slid-show 20s;
animation-delay:13.5s;
}
.img-one, .img-two, .img-three {
animation-iteration-count: infinite;
position:absolute;
width:50%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="slide-show" style="position:relative;">
<img src="https://www.planetware.com/wpimages/2020/02/france-in-pictures-beautiful-places-to-photograph-eiffel-tower.jpg" class="img-three">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZ-mh7LC4X5d9JzGbWjujJx3X143WEAiLwX9l7AUOU0GORx3hjtT6ZnBkRWV57VRZ3zTI&usqp=CAU" class="img-two">
<img src="https://www.planetware.com/photos-large/F/france-things-to-do-eiffel-tower-sunset.jpg" class="img-one">
</div>
</body>
</html>
آدرس عکسا رو حذف کن
۰۷ تیر ۰۰ ، ۲۱:۴۳ خاله شادونه بیان😂✌Li^ ^li
به چه دردی می خوره
من از قالب هیچی نمی دونم><
پشمهایم برگهایم هر دو باهم ریخت LOL

خب استفاده کردی یا نه؟  😊
کار خوبی بود
ولی من اسلاید شویی ندیدم
یه دمو بذارین حتما

دمو رو نمبتونم بذارم آخه هدر بلاگم جا نداره ولی توی آموزش چون آدرس عکس ها رو ندادم عمل نکرد و همونتور که دیدین اسلایدشو از تصویر زد بیرون :/
۰۷ ارديبهشت ۰۰ ، ۱۵:۵۵ ⛩ 𝒜𝒻𝓈𝒽𝒾𝓃
عالی

:)

ارسال نظر

کاربران بیان میتوانند بدون نیاز به تأیید، نظرات خود را ارسال کنند.
اگر قبلا در بیان ثبت نام کرده اید لطفا ابتدا وارد شوید، در غیر این صورت می توانید ثبت نام کنید.

be careful!