Maison >interface Web >tutoriel CSS >La transition et la transformation CSS3 obtiennent un effet de sélection
Cet article vous présente principalement des informations pertinentes sur l'exemple de combinaison de transformation de transition CSS3 pour obtenir un simple effet de sélection. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.
Il s'agit d'une exigence d'un client précédent. La démo donnée consistait à utiliser gif pour implémenter le chapiteau, mais nous ne pouvons pas utiliser gif car le texte sur l'image doit être traduit dans plusieurs langues, nous ne pouvons donc pas l'utiliser. des photos pour y parvenir. Ensuite, écrivez-en une vous-même. html
<p lantern> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </p>
css
* { margin: 0; padding: 0; } [lantern] { overflow: hidden; } ul { white-space: nowrap; font-size: 0; transform: translateX(0); transition: transform 0s linear; } li { width: 50vw; border: 1px solid red; display: inline-block; height: 30px; font-size: 16px; }
js
function lantern($element,speed = 10) { let liWidth = 0; let $ul = $element.find("ul"); function run(init = false) { let $li = $ul.find("li").first(); liWidth = $li.outerWidth(); if(!init){ $ul.append($li[0].outerHTML); $li.remove(); } $ul[0].style.transitionDuration = "0s"; $ul[0].style.transform = "translateX(0)"; setTimeout(function() { $ul[0].style.transitionDuration = speed + "s"; $ul[0].style.transform = "translateX(-" + liWidth + "px)"; }, 20); } run(true); setTimeout(() => { setInterval(run, speed * 1000); }, 0); } lantern($('[lantern]'), 20);
Recommandations associées :
Implémentation de l'effet de sélection de texte
Exemple d'implémentation d'un bel effet de sélection dans WPF
Obtenez des effets similaires à la roue de loterie et au chapiteau Tmall dans le mini programme
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!