Lihat bagaimana untuk mencapai kesan dinamik pintu pusingan gambar menggunakan CSS?

Bagaimana untuk merealisasikan kesan dinamik pintu pusingan gambar menggunakan CSS? Artikel berikut akan memperkenalkan kepada anda cara menggunakan transformasi animasi css3 untuk mencapai kesan imej pusingan saya harap ia akan membantu anda!

Kerana projek itu perlu mencapai kesan pintu pusingan gambar. Selepas menyemak kebanyakan perpustakaan komponen Vue biasa, saya jarang melihat komponen sedemikian, jadi saya secara manual melaksanakan kesan pintu pusingan berdasarkan animasi CSS3. Dua penyelesaian segera terlintas di fikiran, satu ialah menggunakan pemasa, scrollLeft atau ubah suai nilai atribut kiri dalam kedudukan, dan satu lagi ialah menggunakan transformasi dan animasi CSS3.

Pilih untuk menggunakan animasi untuk melaksanakannya Memandangkan animasi yang dilaksanakan oleh js dijalankan pada CPU dan animasi css3 berjalan pada GPU, akhirnya kos pemaparan css3 adalah rendah memutuskan untuk menggunakan css3 untuk melaksanakan jenis operasi ini.

Gunakan scrollLeft

Pada mulanya, limpahan scrollLeft digunakan untuk mencapai kesan, dan pemasa digunakan untuk mencetuskannya, yang akan menyebabkan lukisan semula dan aliran semula setiap masa. (ps: Jika anda perlu meningkatkan prestasi dengan lebih baik, anda boleh menggunakan requestAnimationFrame dan bukannya mencetuskan pemasa. Kelebihan utama ialah requestAnimationFrame akan menumpukan semua operasi DOM dalam setiap bingkai dan menyelesaikannya dalam satu lukisan semula atau aliran semula, dan lukis semula atau aliran semula. Aliran semula selang masa mengikuti kekerapan muat semula penyemak imbas secara amnya, kekerapan ini ialah 60 bingkai sesaat)

(Menukar skrol Kiri mempunyai kesan yang sama seperti kiri) Kod teras:

function toScrollLeft(){
  //  如果容器的宽度大于滚动条距离，则重复滚动
  if(divWidth > box.scrollLeft){
    box.scrollLeft++
    setTimeout('toScrollLeft()', 18);
  }
  else{
    // 滚动结束，从新开始
    box.scrollLeft=0;
    setTimeout('toScrollLeft()', 18);
  }
}

Gunakan transformasi animasi css3

Gunakan animasi css3 untuk melaksanakan tanglung pusingan, gunakan pembolehubah css untuk menetapkan secara dinamik offset translateX bagi setiap transformasi keadaan, dan animasi yang paling kritikal, bahagian pelaksanaan Kesannya ialah gif berikut.

1 Tetapkan reka letak html dan sediakan bekas div

<div class="box" >
    <ul >
        <li v-for="(src,i) in cap " :key="i">
            <img     style="max-width:90%" height="90px" :src="src" / alt="Lihat bagaimana untuk mencapai kesan dinamik pintu pusingan gambar menggunakan CSS?" >
        </li>
    </ul>
</div>

2 gaya sepadan

.box{
display: flex;
overflow: hidden;
flex-direction: column;
border-radius:12px;
width: 100%;
height: 100%;
background-color:#fff;
}
ul{
display: flex;
}

3 Akhir sekali, tetapkan objek pengikat kepada gaya Gaya elemen .box terutamanya menggunakan pembolehubah css, dan kemudian secara dinamik menetapkan animasi melalui nilai tertentu. kesan status. Kod kunci menggunakan animasi: cap.length*8 's move infinite linear;

ps: Ini adalah titik operasi keseluruhan utama, butiran lain ditinggalkan

<div class="box" :style="{
&#39;--card-ul-width-start&#39;:-30+&#39;px&#39;,
&#39;--card-ul-width-middle1&#39;:-cap.length*30+&#39;px&#39;, 
&#39;--card-ul-width-middle2&#39;:-cap.length*60+&#39;px&#39;,
&#39;--card-ul-width-end&#39;:-cap.length*90+&#39;px&#39;
}">
    <ul :style="{&#39;-webkit-animation&#39;:cap.length*8+ &#39;s move infinite linear;&#39;}">
        <li></li>
    </ul>
</div>

data(){
    cap:new Array(6).fill('https://res.minigame.vip/gc-assets/fruit-master/fruit-master_icon.png')
}

@keyframes move {
    0%{
    transform:translateX(var(--card-ul-width-start))
    }
    30%{
    transform:translateX(var(--card-ul-width-middle1))
    }
    70%{
    transform:translateX(var(--card-ul-width-middle2))
    }
    100%{
    transform:translateX(var(--card-ul-width-end))
    }    
}

(Belajar perkongsian video: tutorial video css )

Atas ialah kandungan terperinci Lihat bagaimana untuk mencapai kesan dinamik pintu pusingan gambar menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!