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

Detaillierte Erklärung der MySQL Truncate-Verwendung

Inhaltsverzeichnis MySQL Truncate-Verwendung 1. T...

WeChat-Applet implementiert Suchfunktion und springt zur Suchergebnisseite

Suchseite: search.wxml-Seite: <view class=&quo...

Detaillierte Erläuterung der Implementierung gemeinsam genutzter Module in Angular-Projekten

Inhaltsverzeichnis 1. Gemeinsam genutztes CommonM...

Tutorial zur Installation von htop unter CentOS 8

Wenn Sie Ihr System interaktiv überwachen möchten...

Detailliertes Beispiel zur Implementierung von Transaktions-Commit und -Rollback in MySQL

Vor Kurzem mussten wir eine geplante Migration de...

Detaillierte Anwendungsfälle von MySql Escape

MySQL-Escape Escape bedeutet die ursprüngliche Se...

Detaillierte Erläuterung zur Konfiguration des externen Tomcat-Servers in HBuilderX zum Anzeigen und Bearbeiten der JSP-Schnittstelle

1. Die erste Methode besteht darin, den lokalen T...

mysql5.7.21.zip Installations-Tutorial

Der detaillierte Installationsprozess von mysql5....

Super ausführliches Tutorial zur Installation von MySQL 8.0.23

Inhaltsverzeichnis Vorwort 1. Laden Sie MySQL von...

So handhaben Sie gleichzeitige Aktualisierungen von MySQL-Daten

Wird UPDATE gesperrt? Wird die SQL-Anweisung gesp...

Beispielcode für kreisförmigen Hover-Effekt mit CSS-Übergängen

Dieser Artikel stellt vor Online-Vorschau und Dow...

Detaillierte Erläuterung des grundlegenden Falls des React.js-Frameworks Redux

react.js Rahmen Redux https://github.com/reactjs/...

Zusammenfassung einiger Gedanken zur Binlog-Optimierung in MySQL

Frage Frage 1: Wie kann der Leistungsverlust beho...

CSS zum Erzielen des Effekts einer rotierenden Flip-Card-Animation

Die CSS-Animation des rotierenden Flip-Effekts, d...

Häufige Verwendung von Hooks in React

Inhaltsverzeichnis 1. Was ist ein Hook? 2. Warum ...