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

Erste Schritte: Eine kurze Einführung in die grundlegenden Tags und Attribute von HTML

In CSS häufig verwendete Schriftstile zum Festlegen verschiedener Schriftartänderungen (Beispiel mit ausführlicher Erläuterung)

CSS-Schrifteigenschaften definieren die Schriftfa...

Detaillierte Schritte zur Installation eines Webservers mit Apache httpd2.4.37 auf centos8

Schritt 1: yum install httpd -y #httpd-Dienst ins...

So installieren und konfigurieren Sie die dekomprimierte Version von MySQL 8.0.12 unter Windows 10 mit grafischen Tutorials

Dieser Artikel zeichnet die Installations- und Ko...

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

Erste Schritte: Eine kurze Einführung in die grundlegenden Tags und Attribute von HTML

Zusammenfassung der Wissenspunkte zum CSS-Frontend (unbedingt lesen)

Lassen Sie uns darüber sprechen, was das URL-Objekt von JavaScript ist

Beheben Sie das Problem, dass sich die Ränder des Suchfelds und der Suchschaltfläche nicht überlappen können

Häufige Browserkompatibilitätsprobleme (Zusammenfassung)

So implementieren Sie Bildmapping mit CSS

Beispielcode zur Implementierung der Schnittstellensignatur mit Vue+Springboot

JavaScript zur Implementierung der Webversion des Gobang-Spiels

Detaillierte Erklärung der Props-Konfiguration von Vue

So kommunizieren Sie mit anderen Benutzern über die Linux-Befehlszeile

Artikel empfehlen

Zeichnen Sie ein iPhone basierend auf CSS3

Detaillierte Erklärung zum Anpassen des Stils von CSS-Bildlaufleisten

Das WeChat-Applet implementiert das Scrollen von Text

In HTML eingebettetes Flash Lösung zum Einbetten von Flash-Dateien in den HTML-Webseitencode (Teil 2)

Häufige Probleme und Lösungen beim Erstellen von MySQL MGR

In CSS häufig verwendete Schriftstile zum Festlegen verschiedener Schriftartänderungen (Beispiel mit ausführlicher Erläuterung)

Detaillierte Schritte zur Installation eines Webservers mit Apache httpd2.4.37 auf centos8

So installieren und konfigurieren Sie die dekomprimierte Version von MySQL 8.0.12 unter Windows 10 mit grafischen Tutorials

Detaillierte Erklärung zur Verwendung von INS und DEL zum Markieren von Dokumentänderungen

8 Beispiele für die Verwendung des Killall-Befehls zum Beenden von Prozessen in Linux

So verwenden Sie den Yum-Befehl

Zusammenfassung mehrerer Methoden zur Implementierung der vertikalen Zentrierung mit CSS

Detaillierte Erläuterung des auf Python basierenden MySQL-Replikationstools

Vollständige Schritte zum Bereitstellen von JAR-Paketprojekten mithilfe von Shell-Skripten unter Linux

Docker-Netzwerkmodus und Konfigurationsmethode