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
V-Bind in Vue verstehen
Inhaltsverzeichnis 1. Analyse des wichtigsten Que...
Das Prinzip und die grundlegende Verwendung von Vue.use() in Vue
Inhaltsverzeichnis Vorwort 1. Verstehen mit Beisp...
Was ist SSH-Portweiterleitung? Was nützt das?
Inhaltsverzeichnis Vorwort 1. Lokale Portweiterle...
Möglichkeiten zur Verbesserung der MongoDB-Leistung
MongoDB ist eine Hochleistungsdatenbank, bei der ...
Grafisches Tutorial zur Installation von Tomcat8 auf einem Linux-System Centos7.X
1. Erstellen Sie den Tomcat-Installationspfad mkd...
CSS3-Bézierkurven-Beispiel: Erstellen von Link-Hover-Animationseffekten
Wir verwenden animierte CSS3-Übergänge, um einen ...
Detaillierte Erläuterung der CSS BEM-Schreibstandards
BEM ist ein komponentenbasierter Ansatz zur Weben...
So fragen Sie die neueste Transaktions-ID in MySQL ab
Vorne geschrieben: Manchmal müssen Sie möglicherw...
Das Konzept und die Eigenschaften von benutzerdefinierten MySQL-Variablen
Ein MySQL Custom Value ist ein temporärer Contain...
Nginx verwendet den Gzip-Algorithmus zum Komprimieren von Nachrichten
Was ist HTTP-Komprimierung Manchmal werden relati...
Beispiel für Auslassungspunkte bei Überlauf von mehrzeiligem CSS-Text
Auslassungspunkte werden angezeigt, wenn mehrzeil...
Grundlegendes Tutorial zur Steuerung des mobilen Roboters Turtlebot3 mit ROS
Chinesisch-Tutorial https://www.ncnynl.com/catego...
Lösung für das Problem, dass der Server bei der Installation des Pagoda Panels keine Remoteverbindung zur Datenbank herstellen kann
Ich plane, meine eigene Website zu erstellen, als...
Verwenden Sie CSS3, um den Code für dynamische Spezialeffekte beim Hovern von Schaltflächen zu implementieren
Wir haben vorgestellt, wie man mit den CSS3-Spalt...
Reines CSS zum Erzielen eines schmelzenden Kerzenmusters (Wassertropfen) – Beispielcode
Ergebnisse erzielen Umsetzungsideen Der Schmelzef...