CSS pour implémenter le glissement

CSS est un langage de conception Web couramment utilisé qui peut être utilisé pour obtenir de nombreux effets Web. Parmi eux, l’effet de glissement est également très courant. Ce qui suit présente quelques méthodes CSS pour obtenir des effets de glissement.

1. Utilisez l'attribut transform

Utilisez l'attribut transform pour obtenir une traduction, une rotation, une mise à l'échelle et d'autres effets. Parmi eux, dans l'animation de traduction, vous pouvez utiliser TranslateX() et TranslateY() pour contrôler le mouvement horizontal et vertical des éléments.

L'exemple de code est le suivant :

<style>
  .box {
    background-color: red;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform .5s ease;
  }

  .box:hover {
    transform: translateX(100px);
  }
</style>

<div class="box"></div>

Ce code implémente que lorsque la souris survole la boîte, elle se déplacera de 100 px de la position d'origine vers la droite avec un assouplissement effet de 0,5 seconde. Parmi eux, dans la pseudo-classe de .box:hover, translateX() est utilisé pour contrôler la translation de l'élément sur l'axe X.

2. Utilisez l'attribut d'animation

L'utilisation de l'attribut d'animation peut réaliser des animations plus complexes, dans lesquelles nous pouvons définir des images clés pour contrôler les effets d'animation des éléments.

L'exemple de code est le suivant :

<style>
  .box {
    background-color: red;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: slide 1s ease-in-out infinite alternate;
  }

  @keyframes slide {
    from {
      transform: translateX(0px);
    }
    to {
      transform: translateX(100px);
    }
  }
</style>

<div class="box"></div>

Ce code définit une animation appelée slide pour obtenir l'effet de la boîte glissant de gauche à droite. Parmi eux, l'attribut d'animation est utilisé pour configurer l'animation et définir l'effet d'accélération, la lecture infinie et le dégradé de va-et-vient. Dans l'animation de diapositive définie par le mot-clé @keyframes, nous contrôlons l'état initial et l'état final de l'élément de et vers, obtenant ainsi l'effet de glissement.

Summary

Avec la propriété transform et la propriété animation fournies en CSS, nous pouvons facilement obtenir l'effet de glissement des éléments. Dans le développement réel, vous pouvez choisir en fonction de besoins spécifiques pour obtenir le meilleur effet et la meilleure expérience utilisateur.

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!