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!