Comment obtenir un effet panoramique en utilisant uniquement CSS3

Cet article vous apportera une technologie noire css3 : comment utiliser uniquement du css pour obtenir l'effet d'un panorama ?

Démonstration de l'effet final : démo

Mise en page

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

　Styles de base

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;
  }
}

Taille d'arrière-plan : auto 100% ; Ce code signifie que la hauteur de l'image est é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ée 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

Jusqu'à présent, lorsque nous ouvrons la page Web, une image apparaîtra en glissant horizontalement d'avant en arrière. Mais dans ce cas, les visiteurs peuvent être attirés par l’animation et ignorer le contenu réel.

Notre exigence est de le faire bouger lorsque la souris survole l'image. Bien sûr, nous pouvons facilement obtenir cet effet.

Supprimez l'animation précédente et ajoutez le style suivant.

.panorama:hover,
.panorama:focus {
  animation: panorama 10s linear infinite alternate;
}

L'effet actuel est le suivant : la souris se déplace dans l'image et l'image commence à glisser d'avant en arrière horizontalement.

Optimisation de l'animation

Bien que l'effet soit obtenu, vous constaterez que lorsque la souris sort de l'image, l'image revient immédiatement à sa position d'origine.

Pour nous, c'est un peu soudain. Comment enregistrer la position actuelle de l'image et continuer à exécuter l'animation lorsque la souris entre ?

On peut s'appuyer sur cet attribut animation-play-state: paused running | qui représente les deux états de l'animation : paused et running.

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;
  }
}

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!