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

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

Dieser Artikel stellt vor

Online-Vorschau und Download des Quellcodes

Im heutigen Tutorial experimentieren wir mit Hover-Effekten auf einem Kreis. Dank der Border-Radius-Eigenschaft können wir kreisförmige Formen erstellen und diese tauchen immer häufiger als Designelemente auf Websites auf. Eine Verwendung, die mir besonders gut gefällt, sind runde Miniaturansichten, die interessanter aussehen als die üblichen Rechtecke. Da der Kreis eine so besondere Form hat, werden wir einige spezielle Hover-Effekte dafür erstellen!

Wir werden in diesem Tutorial Browserpräfixe weglassen. Diese sind aber selbstverständlich in der Download-Datei enthalten.

Also, lasst uns anfangen!

HTML-Struktur

Für die meisten Beispiele verwenden wir die folgende Struktur:

<ul Klasse="ch-grid">
	<li>
		<div Klasse="ch-item ch-img-1">
			<div Klasse="ch-info">
				<h3>Nutzen Sie, was Sie haben</h3>
				<p>von Angela Duncan <a href="http://drbl.in/eOPF">Auf Dribbble anzeigen</a></p>
			</div>
		</div>
	</li>
	<li>
		<div Klasse="ch-item ch-img-2">
			<div Klasse="ch-info">
				Häufige Ursachen für Flecken
				<p>von Antonio F. Mondragon <a href="http://drbl.in/eKMi">Auf Dribbble anzeigen</a></p>
			</div>
		</div>
	</li>
	<li>
		<div Klasse="ch-item ch-img-3">
			<div Klasse="ch-info">
				<h3>Rosa Blitz</h3>
				<p>von Charlie Wagers <a href="http://drbl.in/ekhp">Auf Dribbble anzeigen</a></p>
			</div>
		</div>
	</li>
</ul>

Obwohl wir hier ein Bild verwenden könnten, verschaffen wir uns durch die Verwendung eines Hintergrundbilds mehr Optionen. Wir werden sie in Klassen definieren, die mit „ch-img-“ beginnen.

Lassen Sie uns jetzt einige Hover-Effekte erstellen!

CSS-Stile

Definieren wir einige allgemeine Stile für Listen und Listenelemente:

.ch-grid {
	Rand: 20px 0 0 0;
	Polsterung: 0;
	Listenstil: keiner;
	Anzeige: Block;
	Textausrichtung: zentriert;
	Breite: 100 %;
}

.ch-grid:nach,
.ch-item:vor {
	Inhalt: '';
    Anzeige: Tabelle;
}

.ch-grid:nach {
	klar: beides;
}

.ch-grid li {
	Breite: 220px;
	Höhe: 220px;
	Anzeige: Inline-Block;
	Rand: 20px;
}

Einige der Beispiele haben eine andere Struktur, wir werden uns aber jedes genauer ansehen.

Beispiel 1

Im ersten Beispiel wird die Beschreibung durch Skalierung angezeigt. Außerdem werden wir den inneren Schatten des „.ch-item“ animieren. Positionieren wir also das „.ch-item“ und geben ihm einen schönen inneren Schatten und Übergang:

.ch-Artikel {
	Breite: 100 %;
	Höhe: 100%;
	Randradius: 50 %;
	Überlauf: versteckt;
	Position: relativ;
	Cursor: Standard;
	Kastenschatten: 
		Einschub 0 0 0 16px rgba(255,255,255,0,6),
		0 1px 2px rgba(0,0,0,0,1);
	Übergang: alle 0,4 s Ein- und Ausfahren;
}

Wie Sie vielleicht schon bemerkt haben, haben wir unseren Listenelementen zwei Klassen zugewiesen: eine ist ch-item und eine andere wird verwendet, um ein bestimmtes Hintergrundbild zu definieren:

.ch-img-1 { 
	Hintergrundbild: URL (../images/1.jpg);
}

.ch-img-2 { 
	Hintergrundbild: URL (../images/2.jpg);
}

.ch-img-3 { 
	Hintergrundbild: URL (../images/3.jpg);
}

Die „.ch-info“ wird absolut positioniert und wir geben ihr durch das Setzen von RGBA-Werten einen halbtransparenten Hintergrund. Seine Deckkraft wird auf 0 gesetzt und wir skalieren es auch auf 0 herunter:

.ch-info {
	Position: absolut;
	Hintergrund: rgba(63,147,147, 0,8);
	Breite: erben;
	Höhe: erben;
	Randradius: 50 %;
	Überlauf: versteckt;
	Deckkraft: 0;
	Übergang: alle 0,4 s Ein- und Ausfahren;
	transformieren: Skalierung(0);
}

Der Titel verfügt über etwas Polsterung und Rand sowie einen weichen Textschatten:

.ch-info h3 {
	Farbe: #fff;
	Texttransformation: Großbuchstaben;
	Buchstabenabstand: 2px;
	Schriftgröße: 22px;
	Rand: 0 30px;
	Polsterung: 45px 0 0 0;
	Höhe: 140px;
	Schriftfamilie: „Open Sans“, Arial, serifenlos;
	Textschatten: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0,3);
}

Das p-Element hat eine Deckkraft von 0 und einen Übergang (wir möchten, dass es beim Hovern eingeblendet wird, aber mit einer Verzögerung):

.ch-info p {
	Farbe: #fff;
	Polsterung: 10px 5px;
	Schriftstil: kursiv;
	Rand: 0 30px;
	Schriftgröße: 12px;
	Rahmen oben: 1px durchgezogen rgba(255,255,255,0,5);
	Deckkraft: 0;
	Übergang: alle 1 s, Ein-Aus 0,4 s;
}

Die Links werden in Großbuchstaben geschrieben und wir legen die Hover-Farbe auf Gelb fest:

.ch-info pa {
	Anzeige: Block;
	Farbe: rgba(255,255,255,0,7);
	Schriftstil: normal;
	Schriftstärke: 700;
	Texttransformation: Großbuchstaben;
	Schriftgröße: 9px;
	Buchstabenabstand: 1px;
	Polsterung oben: 4px;
	Schriftfamilie: „Open Sans“, Arial, serifenlos;
}

.ch-info pa:hover {
	Farbe: rgba(255,242,34, 0,8);
}

Und jetzt zur lustigen Schwebeaktion! Die Grösse des inneren Schattens von ".ch-item" wird von 16px auf 1px eingestellt:

.ch-item:hover {
	Kastenschatten: 
		Einschub 0 0 0 1px rgba(255,255,255,0,1),
		0 1px 2px rgba(0,0,0,0,1);
}

".ch-info" wird eingeblendet und auf 1 skaliert:

.ch-item:hover .ch-info {
	transformieren: Skalierung(1);
	Deckkraft: 1;
}

Es wird (zeitverzögert) der Beschreibungsabsatz p eingeblendet:

.ch-item:hover .ch-info p {
	Deckkraft: 1;
}

Hier ist das erste Beispiel! Schauen wir uns das Nächste an.

Beispiel 2

Die HTML-Struktur in diesem Beispiel ist die gleiche wie im ersten.

In diesem Beispiel verwenden wir den Schatten von „.ch-item“, um unseren Kreis zu füllen und als Hintergrund für die Beschreibung zu dienen. Also nichts Besonderes hier, nur ein zusätzlicher Schattenwert:

.ch-Artikel {
	Breite: 100 %;
	Höhe: 100%;
	Randradius: 50 %;
	Position: relativ;
	Cursor: Standard;
	Kastenschatten: 
		Einschub 0 0 0 0 rgba(200,95,66, 0,4),
		Einschub 0 0 0 16px rgba(255,255,255,0,6),
		0 1px 2px rgba(0,0,0,0,1);
	Übergang: alle 0,4 s Ein- und Ausfahren;
}

Hintergrundbild:

.ch-img-1 { 
	Hintergrundbild: URL (../images/4.jpg);
}

.ch-img-2 { 
	Hintergrundbild: URL (../images/5.jpg);
}

.ch-img-3 { 
	Hintergrundbild: URL (../images/6.jpg);
}

Die ".ch-info" wird nochmals skaliert:

.ch-info {
	Position: absolut;
	Breite: 100 %;
	Höhe: 100%;
	Randradius: 50 %;
	Überlauf: versteckt;
	Deckkraft: 0;
	Übergang: alle 0,4 s Ein- und Ausfahren;
	transformieren: Skalierung(0);
	Rückseitensichtbarkeit: versteckt;
}

Lassen Sie uns unser Textelement formatieren:

.ch-info h3 {
	Farbe: #fff;
	Texttransformation: Großbuchstaben;
	Position: relativ;
	Buchstabenabstand: 2px;
	Schriftgröße: 22px;
	Rand: 0 30px;
	Polsterung: 65px 0 0 0;
	Höhe: 110px;
	Schriftfamilie: „Open Sans“, Arial, serifenlos;
	Textschatten: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0,3);
}

.ch-info p {
	Farbe: #fff;
	Polsterung: 10px 5px;
	Schriftstil: kursiv;
	Rand: 0 30px;
	Schriftgröße: 12px;
	Rahmen oben: 1px durchgezogen rgba(255,255,255,0,5);
}

.ch-info pa {
	Anzeige: Block;
	Farbe: rgba(255,255,255,0,7);
	Schriftstil: normal;
	Schriftstärke: 700;
	Texttransformation: Großbuchstaben;
	Schriftgröße: 9px;
	Buchstabenabstand: 1px;
	Polsterung oben: 4px;
	Schriftfamilie: „Open Sans“, Arial, serifenlos;
}

.ch-info pa:hover {
	Farbe: rgba(255,242,34, 0,8);
}

Beim Hovern stellen wir den inneren Schatten (den rötlichen Schatten) auf einen erweiterten Radius von 110 Pixeln ein. Dadurch werden alle Kreise abgedeckt:

.ch-item:hover {
	Kastenschatten: 
		Einschub 0 0 0 110px rgba(200,95,66, 0,4),
		Einschub 0 0 0 16px rgba(255,255,255,0,8),
		0 1px 2px rgba(0,0,0,0,1);
}

Wir skalieren ".ch-info" und blenden es ein:

.ch-item:hover .ch-info {
	Deckkraft: 1;
	transformieren: Skalierung(1);	
}

Beispiel 3

In diesem Beispiel verwenden wir Rotation. Die Struktur unterscheidet sich geringfügig von den beiden vorherigen Beispielen, da wir „.ch-thumb“ als zweite Partition hinzufügen müssen. Die Listenelemente sehen also folgendermaßen aus:

<li>
	<div Klasse="ch-item">	
		<div Klasse="ch-info">
			<h3>Musikposter</h3>
			<p>von Jonathan Quintin <a href="http://drbl.in/eGjw">Auf Dribbble anzeigen</a></p>
		</div>
		<div class="ch-thumb ch-img-1"></div>
	</div>
</li>

Das Styling von „.ch-item“ bleibt gleich wie bisher (mit einem dezenten Schatten):

.ch-Artikel {
	Breite: 100 %;
	Höhe: 100%;
	Randradius: 50 %;
	Position: relativ;
	Cursor: Standard;
	Kastenschatten: 0 1px 3px rgba(0,0,0,0,2);
}

Das Element „.ch-thumb“ verfügt über einen bestimmten Transformationsursprung (irgendwo in der Mitte rechts) und Übergang. Dies ist das Element, das wir beim Hovern nach unten drehen möchten, sodass das Element „.ch-info“ angezeigt wird:

.ch-thumb {
	Breite: 100 %;
	Höhe: 100%;
	Randradius: 50 %;
	Überlauf: versteckt;
	Position: absolut;
	Box-Shadow: Einschub 0 0 0 15px rgba(255,255,255, 0,5);
	Transform-Ursprung: 95 % 40 %;
	Übergang: alle 0,3 s Ein- und Ausfahren;
}

Erstellen Sie mithilfe der Pseudoklasse einen kleinen Messingverschluss mit radialem Farbverlauf:

.ch-thumb:nach {
	Inhalt: '';
	Breite: 8px;
	Höhe: 8px;
	Position: absolut;
	Randradius: 50 %;
	oben: 40%;
	links: 95 %;
	Rand: -4px 0 0 -4px;
	Hintergrund: radialer Farbverlauf (Ellipse in der Mitte, rgba(14,14,14,1) 0 %, rgba(125,126,125,1) 100 %);
	Kastenschatten: 0 0 1px rgba(255,255,255,0,9);
}

Definieren wir für jedes ".ch-thumb"-Element ein Hintergrundbild:

.ch-img-1 { 
	Hintergrundbild: URL (../images/7.jpg);
	Z-Index: 12;
}

.ch-img-2 { 
	Hintergrundbild: URL (../images/8.jpg);
	Z-Index: 11;
}

.ch-img-3 { 
	Hintergrundbild: URL (../images/9.jpg);
	Z-Index: 10;
}

Der Stil des ".ch-info"-Elements ist wie folgt:

.ch-info {
	Position: absolut;
	Breite: erben;
	Höhe: erben;
	Randradius: 50 %;
	Überlauf: versteckt;
	Hintergrund: #c9512e url(../images/noise.png);
	Box-Schatten: Einschub 0 0 0 5px rgba(0,0,0,0,0,05);
}

Die Textelemente werden wie folgt positioniert und formatiert:

.ch-info h3 {
	Farbe: #fff;
	Texttransformation: Großbuchstaben;
	Position: relativ;
	Buchstabenabstand: 2px;
	Schriftgröße: 18px;
	Rand: 0 60px;
	Polsterung: 22px 0 0 0;
	Höhe: 85px;
	Schriftfamilie: „Open Sans“, Arial, serifenlos;
	Textschatten: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0,3);
}

.ch-info p {
	Farbe: #fff;
	Polsterung: 10px 5px;
	Schriftstil: kursiv;
	Rand: 0 30px;
	Schriftgröße: 12px;
	Rahmen oben: 1px durchgezogen rgba(255,255,255,0,5);
}

Der Link ist ein kleiner Kreis, der sich beim Hovern von rechts nähert:

.ch-info pa {
	Anzeige: Block;
	Farbe: #333;
	Breite: 80px;
	Höhe: 80px;
	Hintergrund: rgba(255,255,255,0,3);
	Randradius: 50 %;
	Farbe: #fff;
	Schriftstil: normal;
	Schriftstärke: 700;
	Texttransformation: Großbuchstaben;
	Schriftgröße: 9px;
	Buchstabenabstand: 1px;
	Polsterung oben: 24px;
	Rand: 7px auto 0;
	Schriftfamilie: „Open Sans“, Arial, serifenlos;
	Deckkraft: 0;
	Übergang: 
		Transformieren 0,3 s, Ein-Aus-Zeit 0,2 s,
		Deckkraft 0,3 s, Ein-/Ausblendung 0,2 s,
		Hintergrund 0,2 s linear 0 s;
	transformieren: verschiebeX(60px) drehen(90 Grad);
}

.ch-info pa:hover {
	Hintergrund: rgba(255,255,255,0,5);
}

Da wir möchten, dass die Bewegung und Deckkraft verzögert erfolgen, der Hintergrund jedoch keinen Übergang aufweist, trennen wir die Übergänge.

Beim Hovern drehen wir den „.ch-thumb“ und verschieben/drehen das Link-Element:

.ch-item:hover .ch-thumb {
	Box-Schatten: Einschub 0 0 0 15px rgba(255,255,255, 0,5), 0 1px 3px rgba(0,0,0,0,2);
	transformieren: drehen (-110 Grad);
}
.ch-item:hover .ch-info pa{
	Deckkraft: 1;
	transformieren: verschiebeX(0px) drehen(0grad);
}

Beispiel 4

Das vierte Beispiel beinhaltet einige 3D-Rotationen. Daher müssen wir die Struktur so anpassen, dass es einen Container für die Perspektive sowie für Vorder- und Rückseite gibt. Die Listenelemente sehen also folgendermaßen aus:

<li>
	<div Klasse="ch-item ch-img-1">				
		<div Klasse="ch-info-wrap">
			<div Klasse="ch-info">
				<div class="ch-info-front ch-img-1"></div>
				<div Klasse="ch-info-back">
					<h3>Bärentyp</h3>
					<p>von Josh Schott <a href="http://drbl.in/ewUW">Auf Dribbble anzeigen</a></p>
				</div>	
			</div>
		</div>
	</div>
</li>

Wie Sie sehen, haben wir sowohl zu ".ch-item" als auch zu ".ch-info-front" das Hintergrundbild hinzugefügt. Der Trick besteht darin, ".ch-info-wrap" den gleichen Hintergrund zu geben.

Dadurch entsteht die Illusion, dass unser „.ch-item“ ein Loch aufweist.

".ch-item" wird die folgenden Stile haben:

.ch-Artikel {
	Breite: 100 %;
	Höhe: 100%;
	Randradius: 50 %;
	Position: relativ;
	Kastenschatten: 0 1px 2px rgba(0,0,0,0,1);
	Cursor: Standard;
}

Die Datei „.ch-info-wrap“ erhält perspektivische Eigenschaften und wir fügen außerdem einen Übergang für den Schatten hinzu:

.ch-info-wrap{
	Position: absolut;
	Breite: 180px;
	Höhe: 180px;
	Randradius: 50 %;
	Perspektive: 800px;
	Übergang: alle 0,4 s Ein- und Ausfahren;
	oben: 20px;
	links: 20px;
	Hintergrund: #f9f9f9 url(../images/bg.jpg);
	Kastenschatten: 
		0 0 0 20px rgba(255,255,255,0,2), 
		Einschub 0 0 3px rgba(115,114, 23, 0,8);

}

Die Datei „.ch-info“ benötigt den Wert „preserve-3d“ für den Transform-Stil und wir werden ihr einen Übergang zuweisen, da dies das Element ist, das wir in 3D drehen werden:

.ch-info{
	Position: absolut;
	Breite: 180px;
	Höhe: 180px;
	Randradius: 50 %;
	Übergang: alle 0,4 s Ein- und Ausfahren;
	Transformationsstil: 3D bewahren;
}

Die Vorder- und Rückseiten weisen die folgenden gängigen Stile auf:

.ch-info > div {
	Anzeige: Block;
	Position: absolut;
	Breite: 100 %;
	Höhe: 100%;
	Randradius: 50 %;
	Hintergrundposition: Mitte Mitte;
	Rückseitensichtbarkeit: versteckt;
}

Die Rückseite wird gedreht, so dass wir sie zunächst nicht sehen:

.ch-info .ch-info-zurück {
	transformieren: 3d drehen (0,1,0,180 Grad);
	Hintergrund: #000;
}

Nochmals das Hintergrundbild:

.ch-img-1 { 
	Hintergrundbild: URL (../images/10.jpg);
}

.ch-img-2 { 
	Hintergrundbild: URL (../images/11.jpg);
}

.ch-img-3 { 
	Hintergrundbild: URL (../images/12.jpg);
}

...und Textelemente:

.ch-info h3 {
	Farbe: #fff;
	Texttransformation: Großbuchstaben;
	Buchstabenabstand: 2px;
	Schriftgröße: 14px;
	Rand: 0 15 px;
	Polsterung: 40px 0 0 0;
	Höhe: 90px;
	Schriftfamilie: „Open Sans“, Arial, serifenlos;
	Textschatten: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0,3);
}

.ch-info p {
	Farbe: #fff;
	Polsterung: 10px 5px;
	Schriftstil: kursiv;
	Rand: 0 30px;
	Schriftgröße: 12px;
	Rahmen oben: 1px durchgezogen rgba(255,255,255,0,5);
}

.ch-info pa {
	Anzeige: Block;
	Farbe: rgba(255,255,255,0,7);
	Schriftstil: normal;
	Schriftstärke: 700;
	Texttransformation: Großbuchstaben;
	Schriftgröße: 9px;
	Buchstabenabstand: 1px;
	Polsterung oben: 4px;
	Schriftfamilie: „Open Sans“, Arial, serifenlos;
}

.ch-info pa:hover {
	Farbe: rgba(255,242,34, 0,8);
}

Beim Hovern ändern wir den Schatten von „.ch-info-wrap“ und drehen „.ch-info“, sodass wir die Rückseite sehen können:

.ch-item:hover .ch-info-wrap {
	Kastenschatten: 
		0 0 0 0 rgba(255,255,255,0,8), 
		Einschub 0 0 3px rgba(115,114, 23, 0,8);
}

.ch-item:hover .ch-info {
	transformieren: 3d drehen (0,1,0, -180 Grad);
}

Beispiel 5

In diesem Beispiel möchten wir ".ch-thumb" auf 0 verkleinern und ".ch-info" anzeigen, indem wir es einblenden und auf 1 verkleinern. Der Aufbau des fünften Beispiels ist der gleiche wie der des vorherigen Beispiels.

Das ".ch-item" hat folgende Stile:

.ch-Artikel {
	Breite: 100 %;
	Höhe: 100%;
	Randradius: 50 %;
	Position: relativ;
	Kastenschatten: 0 1px 2px rgba(0,0,0,0,1);
	Cursor: Standard;
}

".ch-info-wrap" und ".ch-info" haben den folgenden gemeinsamen Stil:

.ch-info-wrap, 
.ch-info{
	Position: absolut;
	Breite: 180px;
	Höhe: 180px;
	Randradius: 50 %;
}

Lassen Sie uns den "Loch"-Trick noch einmal durchführen, indem wir denselben Hintergrund auf ".ch-info-wrap" einstellen:

.ch-info-wrap {
	oben: 20px;
	links: 20px;
	Hintergrund: #f9f9f9 url(../images/bg.jpg);
	Kastenschatten: 
		0 0 0 20px rgba(255,255,255,0,2), 
		Einschub 0 0 3px rgba(115,114, 23, 0,8);

}

Ein gängiger Stil ist „Vorne“ und „Hinten“ (es heißt nicht mehr „Vorne“ und „Hinten“):

.ch-info > div {
	Anzeige: Block;
	Position: absolut;
	Breite: 100 %;
	Höhe: 100%;
	Randradius: 50 %;
	Hintergrundposition: Mitte Mitte;
}

Die „Vorderseite“ weist einen Übergang auf (sie schrumpft und verschwindet):

.ch-info .ch-info-front {
	Übergang: alle 0,6 s Ein- und Ausfahren;
}

".ch-info-back" hat zunächst eine Deckkraft von 0 und kann auf 1,5 erweitert werden:

.ch-info .ch-info-zurück {
	Deckkraft: 0;
	Hintergrund: #223e87;
	Zeigerereignisse: keine;
	transformieren: Skalierung (1,5);
	Übergang: alle 0,4 s, Ein- und Ausfahren 0,2 s;
}

Wir müssen Zeigerereignisse auf „Keine“ setzen, da das Element nicht alles andere „blockieren“ soll. Denken Sie daran, es ist herangezoomt, wir können es aufgrund seiner Undurchsichtigkeit nicht sehen, aber es ist immer noch da.

Wie übliche Hintergrundbild- und Textelemente, nur mit etwas anderen Farben:

.ch-img-1 { 
	Hintergrundbild: URL (../images/13.jpg);
}

.ch-img-2 { 
	Hintergrundbild: URL (../images/14.jpg);
}

.ch-img-3 { 
	Hintergrundbild: URL (../images/15.jpg);
}

.ch-info h3 {
	Farbe: #fff;
	Texttransformation: Großbuchstaben;
	Buchstabenabstand: 2px;
	Schriftgröße: 18px;
	Rand: 0 15 px;
	Polsterung: 40px 0 0 0;
	Höhe: 80px;
	Schriftfamilie: „Open Sans“, Arial, serifenlos;
	Textschatten: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0,3);
}

.ch-info p {
	Farbe: #fff;
	Polsterung: 10px 5px 0;
	Schriftstil: kursiv;
	Rand: 0 30px;
	Schriftgröße: 12px;
	Rahmen oben: 1px durchgezogen rgba(255,255,255,0,5);
}

.ch-info pa {
	Anzeige: Block;
	Farbe: #e7615e;
	Schriftstil: normal;
	Schriftstärke: 700;
	Texttransformation: Großbuchstaben;
	Schriftgröße: 9px;
	Buchstabenabstand: 1px;
	Polsterung oben: 4px;
	Schriftfamilie: „Open Sans“, Arial, serifenlos;
}

.ch-info pa:hover {
	Farbe: #fff;
}

Beim Hovern verkleinern wir den Teil „.ch-info-front“ auf 0 und setzen die Deckkraft auf 0. Dadurch verschwindet er dahinter.

.ch-item:hover .ch-info-front {
	transformieren: Skalierung(0);
	Deckkraft: 0;
}

".ch-info-back" wird auf 1 verkleinert und eingeblendet. Außerdem setzen wir das Zeigerereignis auf „auto“, da wir nun in der Lage sein möchten, auf den Link zu klicken:

.ch-item:hover .ch-info-back {
	transformieren: Skalierung(1);
	Deckkraft: 1;
	Zeigerereignisse: auto;
}

Beispiel 6

In diesem Beispiel möchten wir den inneren Abschnitt „.ch-thumb“ nach unten klappen, um die Beschreibung anzuzeigen. Das HTML ist dasselbe wie in den beiden vorherigen Beispielen.

".ch-item" wird wie bisher formatiert:

.ch-Artikel {
	Breite: 100 %;
	Höhe: 100%;
	Randradius: 50 %;
	Position: relativ;
	Kastenschatten: 0 1px 2px rgba(0,0,0,0,1);
	Cursor: Standard;
}

Der gemeinsame Stil des Wrappers und des Beschreibungselements:

".ch-info-wrap", allgemeine Stile für ".ch-info"-Elemente:

.ch-info-wrap, 
.ch-info{
	Position: absolut;
	Breite: 180px;
	Höhe: 180px;
	Randradius: 50 %;
	Übergang: alle 0,4 s Ein- und Ausfahren;
}

".ch-info-wrap" wird Perspektive haben:

.ch-info-wrap {
	oben: 20px;
	links: 20px;
	Hintergrund: #f9f9f9 url(../images/bg.jpg);
	Kastenschatten: 
		0 0 0 20px rgba(255,255,255,0,2), 
		Einschub 0 0 3px rgba(115,114, 23, 0,8);
	Perspektive: 800px;
}

Das ".ch-info"-Element erfordert folgende Transformationsstile:

.ch-info {
	Transformationsstil: 3D bewahren;
}

Es entsteht ein Übergang zwischen Vorder- und Rückseite. Beachten Sie, dass wir die Sichtbarkeit der Rückseite dieses Mal nicht auf „versteckt“ setzen, da wir möchten, dass die Rückseite des „.ch-thumb“ angezeigt wird, wenn wir ihn nach unten klappen:

.ch-info > div {
	Anzeige: Block;
	Position: absolut;
	Breite: 100 %;
	Höhe: 100%;
	Randradius: 50 %;
	Hintergrundposition: Mitte Mitte;
	Übergang: alle 0,6 s Ein- und Ausfahren;
}

Lassen Sie uns den richtigen Transform-Ursprung festlegen, damit wir ihn einschalten können:

.ch-info .ch-info-front {
	Transform-Ursprung: 50 % 100 %;	
	Z-Index: 100;
	Kastenschatten: 
		Einschub 2px 1px 4px rgba(0,0,0,0,1);
}

Wir legen einen RGBA-Wert mit Null-Deckkraft für „.ch-info-back“ fest:

.ch-info .ch-info-zurück {
	Hintergrund: rgba(230,132,107,0);
}

und der übliche Stil anderer Elemente:

.ch-img-1 { 
	Hintergrundbild: URL (../images/16.jpg);
}

.ch-img-2 { 
	Hintergrundbild: URL (../images/17.jpg);
}

.ch-img-3 { 
	Hintergrundbild: URL (../images/18.jpg);
}

.ch-info h3 {
	Farbe: #fff;
	Texttransformation: Großbuchstaben;
	Buchstabenabstand: 2px;
	Schriftgröße: 14px;
	Rand: 0,25px;
	Polsterung: 40px 0 0 0;
	Höhe: 90px;
	Schriftfamilie: „Open Sans“, Arial, serifenlos;
	Textschatten: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0,3);
}

.ch-info p {
	Farbe: #fff;
	Polsterung: 10px 5px;
	Schriftstil: kursiv;
	Rand: 0 30px;
	Schriftgröße: 12px;
	Rahmen oben: 1px durchgezogen rgba(255,255,255,0,5);
}

.ch-info pa {
	Anzeige: Block;
	Farbe: rgba(255,255,255,0,7);
	Schriftstil: normal;
	Schriftstärke: 700;
	Texttransformation: Großbuchstaben;
	Schriftgröße: 9px;
	Buchstabenabstand: 1px;
	Polsterung oben: 4px;
	Schriftfamilie: „Open Sans“, Arial, serifenlos;
}

.ch-info pa:hover {
	Farbe: rgba(255,242,34, 0,8);
}

Während wir schweben, drehen wir die Vorderseite und animieren den Schatten leicht. Die Rückseite wird in die Hintergrundfarbe übergehen:

.ch-item:hover .ch-info-front {
	transformieren: 3d drehen (1,0,0, -180 Grad);
	Kastenschatten: 
		Einschub 0 0 5px rgba(255,255,255,0,2), 
		Einschub 0 0 3px rgba(0,0,0,0,3);
}

.ch-item:hover .ch-info-back {
	Hintergrund: rgba(230,132,107,0,6);
}

Beispiel 7

Das letzte Beispiel ähnelt dem Drehen des Würfels. Wir zeigen die Beschreibung, indem wir ihn von oben nach hinten drehen. Da wir jede Fläche drehen, benötigen wir kein zusätzliches übergeordnetes Element. Unser HTML sieht also folgendermaßen aus:

<li>
	<div Klasse="ch-item">				
		<div Klasse="ch-info">
			<div class="ch-info-front ch-img-1"></div>
			<div Klasse="ch-info-back">
				<h3>Maus</h3>
				<p>von Alexander Shumihin <a href="http://drbl.in/eAoj">Auf Dribbble anzeigen</a></p>
			</div>	
		</div>
	</div>
</li>

Wir werden perspektivische Werte für ".ch-item" bereitstellen:

.ch-Artikel {
	Breite: 100 %;
	Höhe: 100%;
	Randradius: 50 %;
	Position: relativ;
	Cursor: Standard;
	Perspektive: 900px;
}

Für „.ch-info“ wird der Preserve-3D-Wert benötigt:

.ch-info{
	Position: absolut;
	Breite: 100 %;
	Höhe: 100%;
	Transformationsstil: 3D bewahren;
}

Die Vorder- und Rückseite verfügen über einen Übergang und der Transformationsursprung wird auf 50 % 0 % festgelegt:

.ch-info > div {
	Anzeige: Block;
	Position: absolut;
	Breite: 100 %;
	Höhe: 100%;
	Randradius: 50 %;
	Hintergrundposition: Mitte Mitte;
	Übergang: alle 0,4 s linear;
	Transform-Ursprung: 50 % 0 %;
}

Geben wir dem vorderen Teil einen schönen Innenschatten:

.ch-info .ch-info-front {
	Box-Schatten: Einschub 0 0 0 16px rgba(0,0,0,0,3);
}

Die Rückseite wird zunächst so gedreht, dass sie als Unterseite des Würfels erscheint:

.ch-info .ch-info-zurück {
	transformieren: verschiebe3d(0,0,-220px) drehe3d(1,0,0,90Grad);
	Hintergrund: #000;
	Deckkraft: 0;
}

Gängige Stile für Hintergrundbilder und Textelemente:

.ch-img-1 { 
	Hintergrundbild: URL (../images/19.jpg);
}

.ch-img-2 { 
	Hintergrundbild: URL (../images/20.jpg);
}

.ch-img-3 { 
	Hintergrundbild: URL (../images/21.jpg);
}

.ch-info h3 {
	Farbe: #fff;
	Texttransformation: Großbuchstaben;
	Buchstabenabstand: 2px;
	Schriftgröße: 24px;
	Rand: 0 15 px;
	Polsterung: 60px 0 0 0;
	Höhe: 110px;
	Schriftfamilie: „Open Sans“, Arial, serifenlos;
	Textschatten: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0,3);
}

.ch-info p {
	Farbe: #fff;
	Polsterung: 10px 5px;
	Schriftstil: kursiv;
	Rand: 0 30px;
	Schriftgröße: 12px;
	Rahmen oben: 1px durchgezogen rgba(255,255,255,0,5);
}

.ch-info pa {
	Anzeige: Block;
	Farbe: rgba(255,255,255,0,7);
	Schriftstil: normal;
	Schriftstärke: 700;
	Texttransformation: Großbuchstaben;
	Schriftgröße: 9px;
	Buchstabenabstand: 1px;
	Polsterung oben: 4px;
	Schriftfamilie: „Open Sans“, Arial, serifenlos;
}

.ch-info pa:hover {
	Farbe: rgba(255,242,34, 0,8);
}

Wir verwenden translate3d, um die Vorderseite auf der Y-Achse des 3D-Raums zu verschieben, und rotate3d, um sie tatsächlich zu drehen. Wir blenden es außerdem aus, da wir davon später nichts mehr sehen wollen:

.ch-item:hover .ch-info-front {
	transformieren: übersetzen3d(0,280px,0) drehen3d(1,0,0,-90deg);
	Deckkraft: 0;
}

Die Rückseite wird „nach hinten“ auf 0 Grad gedreht (denken Sie daran, dass sie ursprünglich nach unten gedreht war):

.ch-item:hover .ch-info-back {
	transformieren: 3d drehen(1,0,0,0Grad);
	Deckkraft: 1;
}

Das ist es! Eine ganze Reihe an Hover-Effekten, die viele verschiedene Variationen ermöglichen. Probieren Sie sie aus!

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<:  Lösung für das Problem, dass es beim Klicken auf „Alles auswählen“ in der Shuttle-Box von Element bei großen Datenmengen hängen bleibt

>>:  Lösen Sie das Problem, dass der Container nach dem Docker-Lauf „Beendet (0)“ anzeigt.

Artikel empfehlen

Bootstrap 3.0 Studiennotizen Grid-System-Fall

Vorwort Im vorherigen Artikel haben wir hauptsäch...

Implementierung des Zugriffs auf den gleitenden Überprüfungscode von Vue + DRF + Drittanbietern

Inhaltsverzeichnis 1. Hintergrund 2. Verifizierun...

Detaillierte Erklärung der grundlegenden Verwendung von MySQL-Triggern [Erstellen, Anzeigen, Löschen usw.]

Inhaltsverzeichnis 1. MySQL-Trigger erstellen: 1....

Detaillierte Erläuterung des Implementierungsprinzips von ACID-Transaktionen in MySQL

Einführung Beginnen wir wie immer mit einer Szene...

Zwei Möglichkeiten zur Lösung des Problems, dass die MySQL-Master-Slave-Datenbank nicht synchronisiert wird

Inhaltsverzeichnis Zwei Möglichkeiten zur Lösung ...

So verwenden Sie residente Knoten für die Ebenenverwaltung in CocosCreator

CocosCreator-Version: 2.3.4 Die meisten Spiele ve...

Grundkenntnisse zum Lastenausgleich und ein einfaches Beispiel zum Lastenausgleich mit nginx

Nginx kann im Allgemeinen für siebenschichtigen L...

Tutorial zur Installation und Konfiguration von MySQL 8.0.12 unter Win10

Installation, Konfiguration, Start, Anmeldung und...

Bereitstellung des Quellcodes des Docker-Containers. httpd verwendet Speichervolumen, um die Website bereitzustellen (empfohlen).

Inhaltsverzeichnis Stellen Sie httpd mit dem Quel...

Ein Beispiel für die Verwendung von Dapr zur Vereinfachung von Microservices von Grund auf

Inhaltsverzeichnis Vorwort 1. Docker installieren...

Detailliertes Tutorial zur Installation von ElasticSearch 6.x im Docker

Ziehen Sie zuerst das Image (oder erstellen Sie e...

Die Iframe-Aktualisierungsmethode ist bequemer

So aktualisieren Sie Iframe 1. Zum Aktualisieren k...

HTML + CSS + JS realisiert, dass die Leinwand dem Quellcode für Spezialeffekte des kleinen Kreises der Maus folgt

Wirkung (Quellcode am Ende): erreichen: 1. Tags d...

So implementieren Sie CSS, um Auslassungspunkte anzuzeigen, wenn einzeiliger oder mehrzeiliger Text überläuft

1. Einreihiger Überlauf 1. Wenn eine einzelne Zei...

Implementierung von Nginx-Filterzugriffsprotokollen für statische Ressourcendateien

Unordentliches Protokoll Nginx wird im täglichen ...