Jetez un œil à comment obtenir l'effet dynamique de la porte tournante des images en utilisant CSS ?

Comment réaliser l'effet dynamique d'une lanterne tournante avec image en utilisant CSS ? L'article suivant vous expliquera comment utiliser la transformation d'animation CSS3 pour obtenir l'effet d'image tournante. J'espère que cela vous sera utile !

Parce que le projet doit parvenir à un effet de porte tournante d'images. Après avoir vérifié la plupart des bibliothèques de composants Vue courantes, j'ai rarement vu de tels composants, j'ai donc implémenté manuellement l'effet de porte tournante basé sur l'animation CSS3. Deux solutions viennent immédiatement à l'esprit, l'une consiste à utiliser un timer, scrollLeft ou à modifier la valeur de l'attribut left dans la position, et l'autre consiste à utiliser la transformation et l'animation de CSS3.

Choisissez d'utiliser l'animation pour l'implémenter. Puisque l'animation implémentée par js s'exécute sur le CPU et l'animation de css3 s'exécute sur le GPU, le coût de rendu de css3 est faible. Finalement, nous avons décidé d'utiliser css3 pour implémenter cela. type d'opération.

Utilisez scrollLeft

Initialement, scrollLeft+overflow est utilisé pour obtenir l'effet, et une minuterie est utilisée pour le déclencher, ce qui provoquera un redessin et une redistribution à chaque fois. (ps : si vous avez besoin de mieux améliorer les performances, vous pouvez utiliser requestAnimationFrame au lieu du déclenchement de la minuterie. Le principal avantage est que requestAnimationFrame concentrera toutes les opérations DOM dans chaque image et la terminera en un seul redessin ou redistribution, et redessinera ou l'intervalle de temps de redistribution suit de près la fréquence de rafraîchissement du navigateur. De manière générale, cette fréquence est de 60 images par seconde)

(Changer scrollLeft a le même effet que gauche) Code principal :

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

---

Utilisez l'animation de transformation CSS3

Utilisez l'animation CSS3. pour réaliser la lanterne tournante, utilisez des variables CSS pour définir dynamiquement le décalage TranslateX de chaque transformation d'état, ainsi que l'animation la plus critique, pour obtenir certains des effets du gif produit comme suit.

1. Définissez au préalable la mise en page HTML et configurez un conteneur div

<div class="box" >
    <ul >
        <li v-for="(src,i) in cap " :key="i">
            <img     style="max-width:90%" height="90px" :src="src" / alt="Jetez un œil à comment obtenir l'effet dynamique de la porte tournante des images en utilisant CSS ?" >
        </li>
    </ul>
</div>

2 Définissez le style correspondant

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

3. l'élément .box La méthode principale consiste à utiliser des variables CSS, puis à définir dynamiquement l'effet de chaque état de l'animation via des valeurs spécifiques. Le code clé utilise l'animation : cap.length*8+ 's move infinite line qui produira l'effet d'un mouvement répété infini.

ps : C'est le point de fonctionnement principal global, d'autres détails sont omis

<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))
    }    
}

(Partage vidéo d'apprentissage : tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!