So realisieren Sie den Animationseffekt von Panorama mit CSS3 (mit Code)

Der Inhalt dieses Artikels befasst sich damit, wie man den Animationseffekt von Panorama in CSS3 realisiert (mit Code). Ich hoffe, dass er für Sie hilfreich ist.

Basiscode

HTML-Code:

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

Definieren Sie zunächst einige grundlegende Stile und Animationen:

.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%; Die Bedeutung dieses Codes ist „lassen“. Die Höhe des Bildes entspricht der Höhe des Containers und die horizontale Richtung erfolgt automatisch, dh die äußerste linke Seite des Bildes wird an der linken Seite des Containers angebracht.

Der Prozess der Animationsausführung ist: Zyklus, Wechsel, linear und der Zeitraum beträgt 10 Sekunden.

Manuelle Steuerung der Animationsausführung

Jetzt können wir sie bewegen, wenn die Maus über dem Bild schwebt, und anhalten, wenn die Maus wegbewegt wird.

muss dieses Attribut animation-play-state: paused | running verwenden, das die beiden Animationszustände 暂停 und 运行 darstellt.

Vollständiger CSS-Code:

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

Verwandte Empfehlungen:

So verwenden Sie reines CSS3, um den Effekt eines Bildkarussells zu erzielen

So verwenden Sie reines CSS, um den Effekt von regenbogengestreiftem Text zu erzielen (mit Code)

Das obige ist der detaillierte Inhalt vonSo realisieren Sie den Animationseffekt von Panorama mit CSS3 (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!