Comment réaliser l'effet d'animation du panorama avec CSS3 (avec code)

Le contenu de cet article explique comment réaliser l'effet d'animation du panorama en CSS3 (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Code de base

Code HTML :

<div class="panorama"></div>

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%; Ce code Cela signifie que la hauteur de l'image est égale à la hauteur du conteneur et que la direction horizontale est automatique, c'est-à-dire que 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 pouvons désormais la faire bouger lorsque la souris survole l'image et l'arrêter lorsque la souris s'éloigne.

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 utiliser du CSS3 pur pour obtenir l'effet de carrousel d'images

Comment utiliser du CSS pur pour obtenir l'effet d'un texte rayé arc-en-ciel (avec code)

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!