Comment implémenter le panorama en CSS3

Cet article vous présente principalement les informations pertinentes sur l'exemple de code d'effet spécial panorama CSS3. L'éditeur pense qu'il est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Code de base

Code HTML :

<p class="panorama"></p>

Définissez d'abord quelques styles et animations de base :

.panorama {
  width: 300px;
  height: 300px;
  background-image: url(http://7vilbi.com1.z0.glb.clouddn.com/blog/6608185829213862083.jpg);
  background-size: auto 100%;
  cursor: pointer;
  animation: panorama 10s linear infinite alternate;
}

@keyframes panorama {
  to {
    background-position: 100% 0;
  }
}

background-size: auto 100%; La signification de ce code est de rendre la hauteur de l'image égale à la hauteur du conteneur, et la direction horizontale est automatique, c'est-à-dire , le côté le plus à gauche de l'image est attaché au côté gauche du conteneur .

Le processus d'exécution de l'animation est : cycle, alternance, linéaire et la période de temps est de 10 s.

Contrôler manuellement l'exécution de l'animation

Nous réalisons maintenant que lorsque la souris survole l'image, elle bouge, et lorsque la souris part, elle s'arrête.

doit utiliser cet attribut animation-play-state: paused | running, qui représente les deux états d'animation : 暂停 et 运行.

Code CSS complet :

.panorama {
  width: 300px;
  height: 300px;
  background-image: url(http://7vilbi.com1.z0.glb.clouddn.com/blog/6608185829213862083.jpg);
  background-size: auto 100%;
  cursor: pointer;
  animation: panorama 10s linear infinite alternate;
  animation-play-state: paused;
}

.panorama:hover,
.panorama:focus {
  animation-play-state: running;
}

@keyframes panorama {
  to {
    background-position: 100% 0;
  }
}

Recommandations associées :

Comment réaliser un panorama en utilisant uniquement CSS3 L'effet de l'image

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!