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
Über den Startfehler, der durch Inkompatibilität zwischen VMware-Workstations und Gerät/Anmeldeinformationen verursacht wird
VMware-Workstations starten den virtuellen Maschi...
Vue-Plugin-Fehler: Auf dieser Seite wurde Vue.js erkannt. Problem gelöst
Das Vue-Plugin meldet einen Fehler: Vue.js wurde ...
Analysieren Sie, wie eine SQL-Abfrageanweisung in MySQL ausgeführt wird
Inhaltsverzeichnis 1. Übersicht über die logische...
Allgemeiner Leitfaden zur Sicherheitskonfiguration von Linux/CentOS-Servern
Linux ist ein offenes System. Im Internet sind vi...
Horizontale und vertikale Zentrierung von DIV und Bildern, kompatibel mit mehreren Browsern
Der erste Typ: vollständige CSS-Steuerung, Layer ...
Docker exec führt mehrere Befehle aus
Der Befehl „Docker Exec“ kann Befehle in einem la...
Einige Gedanken und Erfahrungen zum Thema Gestaltung und Erstellung von Webseiten (Websites)
Zuerst, bevor Sie posten! Nochmals vielen Dank an ...
Beispiel für einen WeChat-Applet-Rechner
In diesem Artikel wird der spezifische Code des W...
7 nützliche neue TypeScript-Funktionen
Inhaltsverzeichnis 1. Optionale Verkettung 2. Nul...
Detaillierte Einführung in Robots.txt
Robots.txt ist eine reine Textdatei, in der Websi...
MySQL-Zeitdifferenzfunktionen (TIMESTAMPDIFF, DATEDIFF), Funktionen zur Berechnung von Datumsumrechnungen (date_add, day, date_format, str_to_date)
1. Zeitdifferenzfunktionen (TIMESTAMPDIFF, DATEDI...
5 Befehle zur Verwendung des Rechners in der Linux-Befehlszeile
Hallo zusammen, ich bin Liang Xu. Bei der Verwend...
Tiefgreifendes Verständnis der Eigenschaft „Vertical-Align“ und grundlegender Probleme in CSS
vertical-align wird hauptsächlich verwendet, um d...
In einem Artikel erfahren Sie, wie Sie mehrere DIVs und Schaltflächenbindungs-Eingabeereignisse in VUE implementieren
Aktuell besteht die Anforderung, dass beim Klicke...
7 Fähigkeiten, die Webdesigner haben müssen
Webdesign ist sowohl eine Wissenschaft als auch e...