HTML+CSS zum Erreichen eines reaktionsfähigen Karten-Hover-Effekts
|
Dazu gibt es nicht viel zu sagen, schauen wir uns erstmal die Wirkung an:
Karten-Hover, reaktionsfähige Karte, einfacher Effekt. erreichen:1. Definieren Sie die Beschriftung. .kapian ist das untere Feld und dann zwei Unterfelder, eines für das Bild und eines für den Text:
<div Klasse="kapian">
<div Klasse="tu">
<img src="3.2.png">
</div>
<div Klasse="wenben">
<h2>Das Nordlicht</h2>
<p style="padding-bottom: 20px;">natürlich</p>
<p>
Aurora Borealis ist ein farbenfrohes Leuchtphänomen, das über der Region mit hoher magnetischer Breite am Nordpol unseres Planeten auftritt.
Ich liebe das Nordlicht. Es ist so schön.
</p>
</div>
</div>2. Definieren Sie zunächst den grundlegenden CSS-Stil der unteren Box, Länge, Breite usw., der nicht im Detail beschrieben wird:
.kapian{
Position: relativ;
Breite: 300px;
Höhe: 400px;
Rahmenradius: 3px;
Hintergrundfarbe: #fff;
Kastenschatten: 2px 3px 3px rgb(139, 138, 138);
Überlauf: versteckt;
Cursor: Zeiger;
Übergang: alle 0,3 s;
}
.kapian:hover{
Kastenschatten: 2px 3px 10px rgb(36, 35, 35);
} :Wenn Sie mit der Maus darüber fahren, ändert sich der Schatten der Box. 3. Der grundlegende Stil des Bildes unter Verwendung der absoluten Positionierung:
.tu{
Position: absolut;
oben: 0;
links: 0;
Breite: 100 %;
Höhe: 300px;
Überlauf: versteckt;
}
.tu img{
Breite: 100 %;
Höhe: 100%;
Übergang: alle 0,5 s;
}
.kapian:hover .tu img{
transformieren: Skalierung (1,2);
Filter: Unschärfe (1px);
} : Wenn man mit der Maus darüberfährt, wird das Bild größer und unschärfer; 4. Definieren Sie den grundlegenden Stil des Felds, das den Text enthält, mithilfe der absoluten Positionierung:
.wenben{
Position: absolut;
unten: -200px;
Breite: 100 %;
Höhe: 300px;
Hintergrundfarbe: rgb(247, 242, 242);
Übergang: 0,5 s;
}
.kapian:hover .wenben{
unten: 0px;
}:Wenn die Maus darüber bewegt wird, ändert sich der untere Teil des absolut positionierten Textfelds, wodurch das Textfeld nach oben erweitert wird. 5. Der Stil der Zeichen im Textfeld:
.wenben h2{
Farbe: RGB (21, 74, 172);
Zeilenhöhe: 60px;
Textausrichtung: zentriert;
}
.wenben p{
Polsterung: 0 30px;
Schriftfamilie: „Fangsong“;
Schriftgröße: 16px;
Schriftstärke: fett;
Zeilenhöhe: 20px;
Textausrichtung: zentriert;
}Vollständiger Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
*{
Rand: 0;
Polsterung: 0;
Box-Größe: Rahmenbox;
}
Körper{
Höhe: 100vh;
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
Hintergrundbild: radialer Farbverlauf (RGB (241, 238, 238), schwarz);
}
.kapian{
Position: relativ;
Breite: 300px;
Höhe: 400px;
Rahmenradius: 3px;
Hintergrundfarbe: #fff;
Kastenschatten: 2px 3px 3px rgb(139, 138, 138);
Überlauf: versteckt;
Cursor: Zeiger;
Übergang: alle 0,3 s;
}
.kapian:hover{
Kastenschatten: 2px 3px 10px rgb(36, 35, 35);
}
.tu{
Position: absolut;
oben: 0;
links: 0;
Breite: 100 %;
Höhe: 300px;
Überlauf: versteckt;
}
.tu img{
Breite: 100 %;
Höhe: 100%;
Übergang: alle 0,5 s;
}
.kapian:hover .tu img{
transformieren: Skalierung (1,2);
Filter: Unschärfe (1px);
}
.wenben{
Position: absolut;
unten: -200px;
Breite: 100 %;
Höhe: 300px;
Hintergrundfarbe: rgb(247, 242, 242);
Übergang: 0,5 s;
}
.kapian:hover .wenben{
unten: 0px;
}
.wenben h2{
Farbe: RGB (21, 74, 172);
Zeilenhöhe: 60px;
Textausrichtung: zentriert;
}
.wenben p{
Polsterung: 0 30px;
Schriftfamilie: „Fangsong“;
Schriftgröße: 16px;
Schriftstärke: fett;
Zeilenhöhe: 20px;
Textausrichtung: zentriert;
}
</Stil>
</Kopf>
<Text>
<div Klasse="kapian">
<div Klasse="tu">
<img src="3.2.png">
</div>
<div Klasse="wenben">
<h2>Das Nordlicht</h2>
<p style="padding-bottom: 20px;">natürlich</p>
<p>
Aurora Borealis ist ein farbenfrohes Leuchtphänomen, das über der Region mit hoher magnetischer Breite am Nordpol unseres Planeten auftritt.
Ich liebe das Nordlicht. Es ist so schön.
</p>
</div>
</div>
</body>
</html>Zusammenfassen:Die Hoffnung ist auf dem Weg ~
Dies ist das Ende dieses Artikels darüber, wie Sie mit HTML+CSS responsive Karten-Hover-Effekte erzielen. Weitere relevante HTML+CSS-Karten-Hover-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Reines CSS3 realisiert den Effekt des Ein- und Austretens von Divs in der richtigen Reihenfolge
Artikel empfehlen
Beispielcode zum Anzeigen einer Bildlaufleiste nach dem Verkleinern der HTML-Seite
Hier erfahren Sie, wie Sie nach der Verkleinerung...
MySQL-Datenbankoptimierung: Detaillierte Erläuterung der Sharding-Operationen für Tabellen und Datenbanken
Dieser Artikel veranschaulicht anhand von Beispie...
Ein paar Dinge zu favicon.ico (am besten im Stammverzeichnis ablegen)
Öffnen Sie eine beliebige Webseite, zum Beispiel ...
Zusammenfassung einiger Tipps zum MySQL-Indexwissen
Inhaltsverzeichnis 1. Grundkenntnisse der Indizie...
Eine sehr detaillierte Erklärung der Linux C++ Multi-Thread-Synchronisierung
Inhaltsverzeichnis 1. Mutex 1. Initialisierung de...
So benennen Sie unter Linux eine Gruppe von Dateien auf einmal um
Unter Linux verwenden wir normalerweise den Befeh...
Webdesign-Erfahrung: Effizientes Schreiben von Webcode
Ursprünglich sollte dieses siebte Kapitel eine aus...
Zusammenfassung häufig verwendeter Tags in HTML (unbedingt lesen)
Inhaltsdetail-Tags: <h1>~<h6>Titel-Ta...
jQuery erzielt einen Bildlaufwiedergabeeffekt auf großem Bildschirm
In diesem Artikel wird der spezifische Code von j...
CSS realisiert die Layoutmethode „Fest links“ und „Adaptiv rechts“
1. Schwebendes Layout 1. Lassen Sie zuerst das Di...
Der vollständige Leitfaden zum Rasterlayout in CSS
Grid ist ein zweidimensionales Rasterlayoutsystem...
Detaillierte Erklärung dieser Zeigerfunktion in JS
Die Pfeilfunktion ist eine neue Funktion in ES6. ...
Verarbeitungsideen zum Entschlüsseln von WeChat-Applet-Paketen auf dem PC in node.js
Inhaltsverzeichnis Wo ist der Quellcode des Apple...
Detaillierte Erklärung zur Verwendung des Alias-Befehls unter Linux
1. Verwendung von Pseudonymen Mit dem Alias-Befeh...
CSS-Benennung: BEM, Scoped CSS, CSS-Module und CSS-in-JS erklärt
Der Anwendungsbereich von CSS ist global. Wenn da...