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