Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So erzielen Sie einen Panoramaeffekt nur mit CSS3

巴扎黑
Freigeben: 2017-05-27 17:26:38
Original
2062 Leute haben es durchsucht

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


So erzielen Sie einen Panoramaeffekt nur mit CSS3

Demonstration des Endeffekts: Demo

Seitenlayout

<p class="panorama"></p>
Nach dem Login kopieren


 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;
  }
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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;
  }
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage