So implementieren Sie Panorama in CSS3

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zum CSS3-Panorama-Spezialeffekt-Beispielcode vor. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen. Ich hoffe, es kann allen helfen.

Grundlegender Code

HTML-Code:

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

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 besteht darin, die Höhe des Bildes der Höhe des Containers anzupassen, und die horizontale Richtung erfolgt automatisch Die äußerste linke Seite des Bildes ist an der linken Seite des Containers angebracht.

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

Animationsausführung manuell steuern

Jetzt erkennen wir, dass sich die Maus bewegt, wenn sie über dem Bild schwebt, und wenn die Maus es verlässt, stoppt.

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 erreichen Sie ein Panorama nur mit CSS3 Die Wirkung des Bildes

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Panorama in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!