CSS zum Erzielen des Bildschwebens mit der Maus-Falteffekts

CSS zum Erzielen des Bildschwebens mit der Maus-Falteffekts

CSS zum Erzielen des Bildschwebens mit der Maus-Falteffekts

1. Umsetzungspunkte

  • Die Faltung wird durch mehrere Elemente auf Blockebene erreicht.
  • Das Bild wird als Hintergrundbild dargestellt;
  • Legen Sie für jedes Element auf Blockebene dasselbe Hintergrundbild fest und verwenden Sie die Hintergrundposition, um den Anzeigebereich zu steuern (ähnlich einem Sprite-Bild).
  • Der Falteffekt wird durch das Ransform-Attribut erreicht;
  • Die Größe des gesamten umschlossenen Divs entspricht der Originalgröße des Bildes. Wenn die Größe geändert wird, müssen Sie die Hintergrundgröße und andere Eigenschaften anpassen, um die Größe des Hintergrundbilds anzupassen.

2. Effektanzeige

Anzeige des Bildfalteffekts

3. Quellcode

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <title>Hover-Ordner</title>
  <Stil>
    html,
    Körper,
    ul,
    li {
      Rand: 0;
      Polsterung: 0
    }

    ul {
      Listenstil: keiner;
      Anzeige: Block;
    }

    Körper {
      Breite: 100 %;
      Höhe: 100vh;
    }

    .container {
      Breite: 100 %;
      Höhe: 100%;
      /* Hintergrundfarbe: Aqua; */
      Anzeige: Flex;
      Inhalt ausrichten: zentriert;
      Elemente ausrichten: zentrieren;
      transformieren: Skalierung (0,5);
    }

    .wickeln {
      Kastenschatten: 0 2px 12px 0 rgba(0, 0, 0, .5);
      Breite: 1280px;
      Höhe: 854px;
      Schriftgröße: 0;
      Zeilenhöhe: 0;
      Position: relativ;

    }

    .Bild {
      Cursor: Zeiger;
    }

    .abs-wrap {
      Höhe: 100%;
      Breite: 100 %;
      /* oben: 0;
      links: 0; */
      /* Position: absolut; */
      Z-Index: 10;

    }

    .abs-wrap:hover>.abs:nth-child(2) {
      Transformation: Matrix (0,8, -0,2, 0, 1, -1, 0);
    }

    .abs-wrap:hover>.abs:nth-child(3) {
      Transformation: Matrix (0,8, 0,2, 0, 1, -53, -50);
    }

    .abs-wrap:hover>.abs:nth-child(4) {
      Transformation: Matrix (0,8, -0,2, 0, 1, -105, 0);
    }

    .abs-wrap:hover>.abs:nth-child(5) {
      Transformation: Matrix (0,8, 0,2, 0, 1, -157, -50);
    }

    .abs {
      Transformationsstil: 3D bewahren;
      Transform-Origin: links Mitte;
      Übergang: 0,4 s Ein- und Ausfahren;
      Breite: 20 %;
      Höhe: 100%;
      /* Hintergrundfarbe: rgba(0, 0, 0, .5); */
      Anzeige: Inline-Block;
      Hintergrundgröße: 100 %;
      Hintergrund: URL ('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600577868615&di=d2979a54604ecb409e3329527d0220fa&imgtype=0&src=http%3A%2F%2Ft9.baidu.com%2Fit%2Fu%3D29311073%2C358824429%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D854');
    }

    .abs:n-tes-Kind(1) {
      Hintergrundposition: 0 % 0 %;
    }

    .abs:nth-child(2) {
      Hintergrundposition: 25 % 0 %;
    }

    .abs:nth-child(3) {
      Hintergrundposition: 50 % 0 %;
    }

    .abs:nth-child(4) {
      Hintergrundposition: 75 % 0 %;
    }

    .abs:n-tes-Kind(5) {
      Hintergrundposition: 100 % 0 %;
    }
  </Stil>
</Kopf>

<Text>
  <div Klasse="Container">
    <div Klasse="wrap">
      <ul class="abs-wrap">
        <li class="abs"></li>
        <li class="abs"></li>
        <li class="abs"></li>
        <li class="abs"></li>
        <li class="abs"></li>

      </ul>

    </div>

  </div>

</body>

</html>

Zusammenfassen

Dies ist das Ende dieses Artikels darüber, wie Sie mit CSS den Falteffekt erzielen, wenn die Maus über ein Bild fährt. Weitere relevante CSS-Inhalte zum Falten eines Bilds, wenn die Maus über ein Bild fährt, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<:  So verwenden Sie das JQuery-Editor-Plugin tinyMCE

>>:  Docker-Installations- und Konfigurationsschritte für das Redis-Image

Artikel empfehlen

Verwendung des Vuex-Namespace

Inhaltsverzeichnis Da Vuex einen einzelnen Zustan...

Reines CSS3 zum Erzielen einer schönen Bibliothek im Stil einer Eingabefeldanimation (Texteingabeliebe)

Teilen Sie eine wunderschöne Bibliothek im Animat...

Detaillierte Erklärung zur Überwachung von MySQL-Anweisungen

Schnelles Lesen Warum müssen wir SQL-Anweisungen ...

Eine Zusammenfassung der Gründe, warum MySQL keinen Datumsfeldindex verwendet

Inhaltsverzeichnis Hintergrund erkunden Zusammenf...

React-Diagramm Serialisierung JSON Interpretation Fallanalyse

Das Ziel dieses Dokuments ist es, die JSON-Serial...

Idee zur Implementierung eines Popup-Maskeneffekts für Kommentarantworten, kompatibel mit IE 8/Chrome/Firefox

Ich verfolge wochentags gerne die Nachrichten und ...

So überwachen Sie den Linux-Serverstatus

Wir, insbesondere Linux-Ingenieure, haben täglich...

iFrame ist eine großartige Möglichkeit, es als Popup-Ebene zu verwenden, um den Hintergrund abzudecken

Ich habe kürzlich an einem Projekt gearbeitet – Bu...

Eine kurze Diskussion über die häufig verwendeten APIs der VUE uni-app

Inhaltsverzeichnis 1. Routing und Seitensprung 2....

So implementieren Sie einen reibungslosen Neustart von Nginx

1. Hintergrund Während des Serverentwicklungsproz...

Wie die MySQL Select-Anweisung ausgeführt wird

Wie wird die MySQL-Select-Anweisung ausgeführt? I...

IE8 Beta 1 hat zwei Bereiche, die Ihre Aufmerksamkeit erfordern

<br />Verwandte Artikel: Web-Kenntnisse: Lös...

Der Unterschied zwischen Vue-Interpolationsausdruck und V-Text-Direktive

Inhaltsverzeichnis 1. Verwenden Sie Plugin-Ausdrü...

Ein unverzichtbarer Karriereplan für Webdesigner

Originalartikel, bei Nachdruck bitte Autor und Qu...

So lösen Sie das Problem der Nichtübereinstimmung des MySQL-Abfragezeichensatzes

Finden Sie das Problem Ich bin vor kurzem bei der...