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

Lösung für die in Firefox oder IE nicht ermittelte Spannweite

Code kopieren Der Code lautet wie folgt: <html...

Zusammenfassung einiger effizienter magischer Operatoren in JS

JavaScript veröffentlicht mittlerweile jedes Jahr...

Beispiel für die Verwendung einer Keep-Alive-Komponente in Vue

Problembeschreibung (was ist Keep-Alive) Keep-Ali...

Verwenden von js, um einen Wasserfalleffekt zu erzielen

In diesem Artikelbeispiel wird der spezifische Co...

Beispiel für die Implementierung eines hohlen Dreieckpfeils und eines X-Symbols mit anschließendem Pseudoelement

Im Frontend-Designentwurf sieht man oft Schließen...

So sichern Sie das Skript für Linux-Server automatisch (MySQL, Sicherung von Anhängen)

1. Erstellen Sie die Skriptdatei backup.sh #!/bin...

Der gesamte Prozess der Realisierung der Website-Internationalisierung mit Vite2 und Vue3

Inhaltsverzeichnis Vorwort Installieren Sie vue-i...

Der Designprozess des Logos zum Mittherbstfest von Alibaba in Kombination mit der Website

<br />Denken Sie zuerst an die Idee, zeichne...

Lösung für den Fehler beim Aufruf von Yum im Docker-Container

Beim Ausführen von yum im Dockerfile oder im Cont...

So installieren Sie die neueste Version von Docker mit dem Befehl „Deepin apt“

Schritt 1: Ubuntu-Quelle hinzufügen Wechseln Sie ...

Lösung für den Fehler bei der Installation von Docker auf der CentOS-Version

1. Versionsinformationen # Katze /etc/system-rele...

MySQL-Datenbank-Indexreihenfolge durch Sortierung – detaillierte Erklärung

Inhaltsverzeichnis Die Ursache des Vorfalls Sorti...

Zusammenfassung der allgemeinen APIs und erweiterten APIs von Vue

Inhaltsverzeichnis nächstesTick Mixins $forceUpda...

Schnelles Verständnis und Beispielanwendung der Vuex-Zustandsmaschine

Inhaltsverzeichnis 1. Schnelles Verständnis von K...

Die HTML-Tag-ID kann eine Variable sein

<table id=" <%=var1%>">, der...