Beispiel für die Verwendung von CSS zum Erzielen eines Schwebeeffekts beim Bewegen der Maus über die Karte

Beispiel für die Verwendung von CSS zum Erzielen eines Schwebeeffekts beim Bewegen der Maus über die Karte

Prinzip

Setzen Sie beim Schweben einen Schatten auf das Element: Box-Shadow, um seinen Stil vom normalen abzuheben.

Informationen zu Box-Shadow-Ausdrücken finden Sie unter MDN:

/* x-Versatz | y-Versatz | Schattenfarbe */
Box-Shadow: 60px -16px blaugrün;

/* x-Versatz | y-Versatz | Schattenunschärferadius | Schattenfarbe */
Box-Schatten: 10px 5px 5px schwarz;

/* X-Versatz | Y-Versatz | Schattenunschärferadius | Schattenausbreitungsradius | Schattenfarbe */
Kastenschatten: 2px 2px 2px 1px rgba (0, 0, 0, 0,2);

/* Einfügen (Schatten nach innen) | X-Versatz | Y-Versatz | Schattenfarbe */
Box-Shadow: Einschub 5em 1em Gold;

/* Beliebig viele Schatten, durch Kommas getrennt*/
Box-Shadow: 3px 3px Rot, -1em 0 0,4em Oliv;

So geben Sie einen einzelnen Box-Shadow an:

  • Gegeben sind zwei, drei oder vier numerische Werte.

Wenn nur zwei Werte angegeben sind, werden diese vom Browser als Offset auf der x-Achse und Offset auf der y-Achse interpretiert.
Wenn ein dritter Wert angegeben ist, wird dieser als Größe des Unschärferadius interpretiert.
Ist ein vierter Wert angegeben, wird dieser als Größe des Ausdehnungsradius interpretiert.

  • Optional, Einschub (Schatten nach innen).
  • Optional: ein Farbwert.

Im Folgenden sind einige Stile aufgeführt, die in diesem Blogsystem häufig verwendet werden.

1. Bewegen Sie die Maus darüber, um den gefalteten Papierstil zu imitieren

Code-Implementierung:

Das transition wird dem Schwebezustand hinzugefügt, um einen Farbverlaufseffekt zu erzeugen.

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Mausbewegung simuliert den Stil gefalteten Papiers</title>
</Kopf>
<style type="text/css">
  /* Kernstile */
  .Karte {
    Breite: 300px;
    Höhe: 180px;
    Rand: 10px durchgezogen #FFF;
    Rahmen unten: 0 keine;
    Hintergrundfarbe: #FFF;
    Kastenschatten: 0 1px 1px 0 rgba(0, 0, 0, .15)
  }

  .Karte:hover {
    Kastenschatten: 0 5px 5px 0 rgba (0, 0, 0, .25);
    Übergang: alle 0,2 s sanftes Ein- und Aussteigen;
  }

  /* Nicht-Kernstile */
  .Kartenkopfzeile {
    Textausrichtung: zentriert;
  }

  .Kartenkörper, .Kartenfußzeile {
    Textausrichtung: links;
  }
</Stil>
<body style="Hintergrund: #e3e3e3;">
<div Klasse="Karte">
  <div Klasse="Kartenkopfzeile">
    <p>Dies ist eine Karte</p>
  </div>
  <div Klasse="Kartenkörper">
    <p>Beschreibung: Wenn die Maus darüber schwebt, ist der Effekt ähnlich dem Falten von Papier</p>
  </div>
  <div Klasse="Kartenfußzeile">
    <p>Prinzip: Ändern Sie den Offset auf der Y-Achse und den Schattendiffusionsradius (die zweite und dritte Zahl)</p>
  </div>
</div>
</body>
</html>

2. Mauszeiger imitieren den Papierfokusstil

Code-Implementierung:

Der Unterschied zum Obigen besteht darin, dass die spezifischen Werte box-shadow Eigenschaft (der Versatz auf der Y-Achse und der Schattendiffusionsradius, dh die zweite und dritte Zahl) angepasst werden.

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Mauszeiger simuliert Papierfokus-Stil</title>
</Kopf>
<style type="text/css">
  /* Kernstile */
  .Karte {
    Polsterung: 10px;
    Breite: 300px;
    Höhe: 180px;
    Hintergrundfarbe: #FFF;
    Kastenschatten: keiner;
  }

  .Karte:hover {
    Kastenschatten: 0 1px 6px 0 rgba(0, 0, 0, .2);
    Rahmenfarbe: #eee;
    Übergang: alle 0,2 s sanftes Ein- und Aussteigen;
  }

  /* Nicht-Kernstile */
  .Kartenkopfzeile {
    Textausrichtung: zentriert;
  }

  .Kartenkörper, .Kartenfußzeile {
    Textausrichtung: links;
  }
</Stil>
<body style="Hintergrund: #e3e3e3;">
<div Klasse="Karte">
  <div Klasse="Kartenkopfzeile">
    <p>Dies ist eine Karte</p>
  </div>
  <div Klasse="Kartenkörper">
    <p>Beschreibung: Wenn die Maus darüber schwebt, ist das gesamte Dokument im Fokus</p>
  </div>
  <div Klasse="Kartenfußzeile">
    <p>Prinzip: Ändern Sie den Offset auf der Y-Achse und den Schattendiffusionsradius (die zweite und dritte Zahl)</p>
  </div>
</div>
</body>
</html>

3. Mouseover imitiert den Papierhebestil

Code-Implementierung:

Durch Kombinieren box-shadow Eigenschaft und der transform Eigenschaft.

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Mausbewegung simuliert den Stil des Papierhebens</title>
</Kopf>
<style type="text/css">
  /* Kernstile */
  .Karte {
    Polsterung: 10px;
    Breite: 300px;
    Höhe: 180px;
    Hintergrundfarbe: #FFF;
    Rand: keiner;
    Rahmenradius: 6px;
    -webkit-transition: alle 250 ms kubischer Bézier (0,02, 0,01, 0,47, 1);
    Übergang: alle 250 ms kubisch-bézier (.02, .01, .47, 1);
  }

  .Karte:hover {
    Kastenschatten: 0 16px 32px 0 rgba (48, 55, 66, 0,15);
    transformieren: übersetzen(0,-5px);
    Übergangsverzögerung: 0 s !wichtig;
  }

  .box-shadow {
    -webkit-box-shadow: 0 0,25rem 1rem rgba(48, 55, 66, 0,15);
    Kastenschatten: 0 4px 16px rgba (48, 55, 66, 0,15);
  }

  /* Nicht-Kernstile */
  .Kartenkopfzeile {
    Textausrichtung: zentriert;
  }

  .Kartenkörper, .Kartenfußzeile {
    Textausrichtung: links;
  }
</Stil>
<body style="Hintergrund: #e3e3e3;">
<div Klasse="Kartenbox-Schatten">
  <div Klasse="Kartenkopfzeile">
    <p>Dies ist eine Karte</p>
  </div>
  <div Klasse="Kartenkörper">
    <p>Beschreibung: Beim Bewegen der Maus wird das gesamte Papier angehoben</p>
  </div>
  <div Klasse="Kartenfußzeile">
    <p>Prinzip: Transform-Attribut hinzufügen</p>
  </div>
</div>
</body>
</html>

4. Mouseover imitiert den Papieraufstiegsstil (Animationsimplementierung)

Code-Implementierung:

Verwenden Sie die Regel @keyframes , um Animationen zu erstellen, die einen Satz CSS-Stile schrittweise in einen anderen ändern.
Führen Sie beim Hovern Animationen aus.

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Wenn die Maus darüber schwebt, wird der Eindruck von aufsteigendem Papier simuliert</title>
</Kopf>
<style type="text/css">
  /* Kernstile */
  .Karte {
    Polsterung: 10px;
    Breite: 300px;
    Höhe: 180px;
    Hintergrundfarbe: #FFF;
    Rand: keiner;
    Rahmenradius: 6px;
    -webkit-transition: alle 250 ms kubischer Bézier (0,02, 0,01, 0,47, 1);
    Übergang: alle 250 ms kubisch-bézier (.02, .01, .47, 1);
  }

  .Karte:hover {
    Animation: Flug 0,0001 s linear;
    Animationsfüllmodus: beides;
  }

  @keyframes fliegen {
    0% {
      Box-Schatten: 2px 2px 2px #e2dede, -2px 2px 2px #e2dede;
    }
    100 % {
      Box-Schatten: 6px 8px 12px #e2dede, -6px 8px 12px #e2dede;
    }
  }

  /* Nicht-Kernstile */
  .Kartenkopfzeile {
    Textausrichtung: zentriert;
  }

  .Kartenkörper, .Kartenfußzeile {
    Textausrichtung: links;
  }
</Stil>
<body style="Hintergrund: #e3e3e3;">
<div Klasse="Kartenbox-Schatten">
  <div Klasse="Kartenkopfzeile">
    <p>Dies ist eine Karte</p>
  </div>
  <div Klasse="Kartenkörper">
    <p>Beschreibung: Wenn die Maus darüber schwebt, hebt sich das ganze Papier</p>
  </div>
  <div Klasse="Kartenfußzeile">
    <p>So funktioniert es: Verwenden der @keyframes-Regel zum Erstellen von Animationen</p>
  </div>
</div>
</body>
</html>

Oben finden Sie die Einzelheiten eines Beispiels, wie Sie mit CSS den Schwebeeffekt von Karten erzielen, wenn Sie mit der Maus darüber fahren. Weitere Informationen dazu, wie Sie mit CSS den Schwebeeffekt von Karten erzielen, wenn Sie mit der Maus darüber fahren, finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

<<:  Detailliertes Verständnis des Lebenszyklusvergleichs zwischen Vue2 und Vue3

>>:  Allgemeine Shell-Skriptbefehle und zugehöriges Wissen unter Linux

Artikel empfehlen

Linux: Kein Speicherplatz mehr auf Gerät 500 – Fehler aufgrund voller Inodes

Was ist ein Inode? Um Inode zu verstehen, müssen ...

Zusammenfassung häufiger Probleme beim Herunterladen und Installieren von MySQL 5.7 unter Win7 64-Bit

1. Laden Sie MySQL von der offiziellen Website he...

HTML- und CSS-Grundlagen (unbedingt lesen)

(1) HTML: HyperText Markup Language, die im Wesen...

Uniapp implementiert Beispielcode für die Anmeldung mit DingTalk-Scancode

Da Uniapp nicht über eine autorisierte DingTalk-A...

Teilen Sie einen auf Ace basierenden Markdown-Editor

Ich denke, Editoren lassen sich in zwei Kategorie...

Zeigen Sie die abhängigen Bibliotheken von so oder ausführbaren Programmen unter Linux an

Anzeigen der abhängigen Bibliotheken von so oder ...

So lösen Sie das Problem des verstümmelten DOS-Fensters in MySQL

Das Problem mit dem verstümmelten Code ist folgen...

Sechs Methoden zur Nginx-Optimierung

1. Optimieren Sie die Nginx-Parallelität [root@pr...

25 Tools zur Verbesserung der Website-Benutzerfreundlichkeit und Conversion-Raten

Bei einer Website bezieht sich die Benutzerfreundl...

Detaillierte Erläuterung der Bereitstellung und grundlegenden Verwendung von Docker Compose

1. Docker Compose Übersicht Compose ist ein Tool ...

HTML+CSS zum Erreichen eines Surround-Reflexionsladeeffekts

In diesem Artikel wird hauptsächlich die Implemen...

Detaillierte Erläuterung des Vue Lazyload-Beispiels für verzögertes Laden von Bildern

Dokumentation: https://github.com/hilongjw/vue-la...

Wann ist die Verwendung von dl, dt und dd sinnvoll?

dl: Definitionsliste Definitionsliste dt: Definiti...

Zusammenfassung der Tipps zur Verwendung von coalesce() in MySQL

Vorwort Kürzlich habe ich zufällig MySQLs Coalesc...

Das neueste Installations-Tutorial für virtuelle Maschinen VMware 14

Zuerst gebe ich Ihnen den Aktivierungscode für VM...