So erzielen Sie einen Panoramaeffekt nur mit CSS3

Dieser Artikel stellt Ihnen eine CSS3-Schwarz-Technologie vor: Wie erreicht man den Panoramaeffekt nur mit CSS?

Demonstration des Endeffekts: Demo

Seitenlayout

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

　Grundlegende Stile

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

Hintergrundgröße: automatisch 100 %; Dieser Code bedeutet, dass die Höhe des Bildes der Höhe des Containers entspricht und die horizontale Richtung automatisch erfolgt, d. h. die äußerste linke Seite des Bildes an der linken Seite des Behälters angebracht.

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

　 Animationsausführung manuell steuern

Bisher erscheint beim Öffnen der Webseite ein Bild, das horizontal hin und her gleitet. Aber in diesem Fall könnten Besucher von der Animation angezogen werden und den tatsächlichen Inhalt ignorieren.

Unsere Anforderung ist, dass es sich bewegt, wenn die Maus über dem Bild schwebt. Natürlich können wir diesen Effekt leicht erzielen.

Löschen Sie die vorherige Animation und fügen Sie den folgenden Stil hinzu.

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

Der aktuelle Effekt ist: Bewegen Sie die Maus in das Bild und das Bild beginnt horizontal hin und her zu gleiten.

Animationsoptimierung

Obwohl der Effekt erzielt wird, werden Sie feststellen, dass das Bild sofort in die ursprüngliche Position zurückkehrt, wenn Sie die Maus aus dem Bild bewegen.

Für uns ist das etwas plötzlich. Wie kann ich die aktuelle Position des Bildes aufzeichnen und die Animation weiter ausführen, wenn die Maus hinein bewegt wird?

Wir können uns auf dieses Attribut „animation-play-state: paused |“ verlassen, das die beiden Animationszustände „paused“ und „running“ 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;
  }
}

Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen Panoramaeffekt nur mit CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!