Hover-Effekte css. Originelle Hover-Effekte für Bilder in reinem CSS3. Farbe beim Hover ändern

CSS3 hat UX-(Erfahrungs-)Designern unzählige Möglichkeiten gegeben, und das Beste daran ist, dass die coolsten Elemente wirklich einfach zu implementieren sind.

Nur ein paar Codezeilen erzeugen erstaunliche Übergangseffekte, die Ihre Benutzer begeistern, das Engagement steigern und letztendlich richtige Verwendung wird Ihren Verkehr erhöhen. Darüber hinaus verwenden diese Effekte Hardwarebeschleunigung, was ein Fortschritt ist, an dem Sie jetzt teilnehmen können.

Hier sind 8 wirklich einfache Effekte, die Ihrer Benutzeroberfläche Leben einhauchen ( Benutzeroberfläche) und ein Lächeln auf den Gesichtern Ihrer Benutzer.

Alle diese Effekte (ein Rechteck) werden durch die Übergangseigenschaft gesteuert. Um zu sehen, wie diese Effekte funktionieren, haben wir ein div auf der HTML-Seite erstellt:

Wenn Sie fertig sind, stellen Sie seine Breite und Höhe (damit es Abmessungen hat), seine Hintergrundfarbe (damit wir es sehen können) und seine Effekteigenschaften ein.

Die Übergangseigenschaft hat drei Werte: eine Übergangseigenschaft (in unserem Fall alle), eine Übergangsgeschwindigkeit (in unserem Fall 0,3 Sekunden) und einen dritten Wert, mit dem Sie ändern können, wie Beschleunigung und Verzögerung berechnet werden, aber wir Ich bleibe bei den Standardeinstellungen, das Feld bleibt leer.

Jetzt müssen wir nur noch die Eigenschaften ändern und sie erstellen die Animation für uns.

Wenn Sie alleine weitermachen möchten, dann sind die Demodateien genau das Richtige für Sie.

1. Dimmen

Das Erstellen von Dimmeffekten ist eine ziemlich häufige Anfrage von Kunden. Dies ist eine großartige Möglichkeit, die Funktionalität hervorzuheben oder die Aufmerksamkeit auf einen Aufruf zum Handeln zu lenken.

Der Effekt wird in zwei Schritten kodiert: Zuerst stellen Sie den Anfangszustand ein; Stellen Sie als nächstes die Änderung ein, zum Beispiel beim Mauszeiger:

Fade ( Deckkraft:0,5; ) .fade:hover ( Deckkraft:1; )

(Stellen Sie sicher, dass Sie Ihrem div die Klasse „fade“ geben, um zu sehen, wie das funktioniert.)

2. Farbwechsel

In der Vergangenheit war das Animieren eines Farbwechsels unglaublich komplex, da es die Mathematik erforderte, einzelne RGB-Werte zu berechnen und sie dann neu zu kombinieren. Jetzt setzen wir einfach die Klasse des div auf "color" und legen die gewünschte Farbe in CSS fest:

Farbe: Hover (Hintergrund: #53a7ea;)

3. Vergrößern und verkleinern

Um ein Element größer zu machen, musste man früher seine Breite und Höhe oder den Padding-Parameter verwenden. Aber jetzt können wir CSS3-Transformation verwenden, um es größer zu machen.

Stellen Sie die Klasse Ihres div auf „grow“ und fügen Sie dann diesen Code zu Ihrem Blockstil hinzu:

Grow:hover ( -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); )

Das Verkleinern eines Elements ist so einfach wie das Erweitern. Um ein Element zu erhöhen, geben wir einen Wert größer als 1 an, um es zu verringern, geben wir einen Wert kleiner als 1 an:

Shrink:hover ( -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); )

4. Torsion der Elemente

CSS bietet eine Reihe von Transformationen, und eine der besten ist das Verdrehen von Elementen. Geben Sie Ihrem div die Klasse "rotate" und fügen Sie Ihrem CSS die folgenden Zeilen hinzu:

Rotate:hover ( -webkit-transform: RotateZ(-30deg); -ms-transform: RotateZ(-30deg); Transform: RotateZ(-30deg); )

5. Aus einem Quadrat einen Kreis machen

Jetzt ist der Effekt, ein quadratisches Element in ein rundes zu verwandeln und umgekehrt, sehr beliebt. AUS mit CSS Dies ist einfach zu erreichen, wir überführen einfach die Randradius-Eigenschaft. Wir verwenden einfach die Eigenschaft border-radius.

Geben Sie Ihrem div die Klasse "Kreis" und fügen Sie diese Zeilen zu Ihren Stylesheets hinzu:

Circle:hover ( border-radius:50%; )

6. 3D-Schatten

3D-Schatten waren etwa ein Jahr lang verpönt, weil sie nicht zum Flat Design passten, sehen Sie, das ist natürlich Bullshit, sie funktionieren fantastisch gut und geben dem Benutzer ein Gefühl der Beteiligung, als ob er damit arbeiten würde flaches Design, und mit einer Pseudo-3D-Oberfläche.

Dieser Effekt wird erzielt, indem ein Schattenrechteck hinzugefügt und das Element dann auf der x-Achse verschoben wird, indem die Transformations- und Übersetzungseigenschaften so geändert werden, dass es so aussieht, als ob das Element aus dem Bildschirm herauswächst.

Geben Sie Ihrem div die Klasse "threed" und fügen Sie dann den folgenden Code zu Ihrem CSS hinzu:

Threed:hover ( box-shadow: 1px 1px #53a7ea, 2px 2px #53a7ea, 3px 3px #53a7ea; -webkit-transform: translateX(-3px); transform: translateX(-3px); )

7. Schaukeln

Nicht alle Elemente verwenden die Übergangseigenschaft. Wir können auch sehr komplexe Animationen mit @keyframes, Animationen und Animationsiterationen erstellen.

In diesem Fall definieren wir zunächst CSS-Animationen in Stilen. Sie werden feststellen, dass wir aufgrund von Implementierungsproblemen sowohl @-webkit-keyframes als auch @keyframes verwenden müssen (ja, Internet Explorer wirklich besser als Chrome, zumindest in dieser Hinsicht).

@-webkit-keyframes swing ( 15 % ( -webkit-transform: translateX(5px); transform: translateX(5px); ) 30 % ( -webkit-transform: translateX(-5px); transform: translateX(-5px); ) 50 % ( -webkit-transform: translateX(3px); transform: translateX(3px); ) 65 % ( -webkit-transform: translateX(-3px); transform: translateX(-3px); ) 80 % ( -webkit -transform: translateX(2px); transform: translateX(2px); ) 100 % ( -webkit-transform: translateX(0); transform: translateX(0); ) ) @keyframes swing ( 15% ( -webkit-transform: translateX(5px); transform: translateX(5px); ) 30 % ( -webkit-transform: translateX(-5px); transform: translateX(-5px); ) 50 % ( -webkit-transform: translateX(3px); transform : translateX(3px); ) 65 % ( -webkit-transform: translateX(-3px); transform: translateX(-3px); ) 80 % ( -webkit-transform: translateX(2px); transform: translateX(2px); ) 100 % ( -webkit-transform: translateX(0); transform: translateX(0); ) )

8. Fügen Sie einen Rahmen ein

Einer der derzeit angesagtesten Knopfstile ist der Geisterknopf; Schaltfläche ohne Hintergrund und dicken Rand. Wir können einem Element natürlich einfach einen Rahmen hinzufügen, aber das ändert die Position des Elements. Wir könnten dieses Problem mit Kartongrößen lösen, aber noch viel mehr. einfache Lösung ist der Übergang zum Rand durch Einfügen eines Schattens.

Geben Sie Ihrem Fall die Klasse "border" und fügen Sie das folgende CSS für Ihre Stile hinzu:

Border:hover (Box-Shadow: Inset 0 0 0 25px #53a7ea; )

Willst du wissen, ? oder ? All dies und mehr auf der Website. Abonnieren Sie unseren E-Mail-Newsletter (unten auf der Seite) oder bei und Sie erfahren als Erster von neuen Artikeln! Treten Sie auch unserem bei

Die Markup-Struktur ist sehr einfach und intuitiv. Wir erstellen einen Container, der das Bild und alle anderen Informationen enthält.

Innerhalb des View-Elements gibt es ein Element mit der Klasse mask , das unseren Effekt mit implementiert mit CSS 3. Ein Element mit einer Maskenklasse enthält einen Titel, eine Beschreibung und einen Link (bei einigen Beispielen wird ein Element mit einer Maskenklasse allein verwendet und der Inhalt wird in einem Container mit einer Inhaltsklasse platziert).

Header

Nachrichtentext

Taste

CSS

Nach dem Erstellen des Markups legen wir die Stile fest. Für unseren Satz von Effekten verwenden wir eine Klasse mit Allgemeine Regeln, und spezifische Eigenschaften werden für jedes Beispiel als separate Klassen hinzugefügt. Browserhersteller-Präfixe werden aus Gründen der Übersichtlichkeit aus dem Text der Lektion weggelassen.

Ansicht (Breite: 300px; Höhe: 200px; Rand: 10px; Float: links; Rand: 10px solid #fff; Überlauf: ausgeblendet; Position: relativ; Textausrichtung: Mitte; Box-Schatten: 1px 1px 2px #e6e6e6; Cursor : Standard; Hintergrund: #fff url(../images/bgimg.jpg) no-repeat center center ) .view .mask, .view .content (Breite: 300px; Höhe: 200px; Position: absolut; Überlauf: ausgeblendet; oben: 0; links: 0 ) .view img ( Anzeige: Block; Position: relativ ) .view h2 ( Texttransformation: Großbuchstaben; Farbe: #fff; Textausrichtung: Mitte; Position: relativ; Schriftgröße: 17px ; padding: 10px; background: rgba(0, 0, 0, 0.8); margin: 20px 0 0 0 ) .view p ( font-family: Georgia, serif; font-style: italic; font-size: 12px; position : relativ; Farbe: #fff; Polsterung: 10px 20px 20px; Textausrichtung: zentriert ) .view a.info ( Anzeige: Inline-Block; Textdekoration: keine; Polsterung: 7px 14px; Hintergrund: #000; Farbe: #fff; Texttransformation: Großbuchstaben; Box-Schatten: 0 0 1px #000 ) .view a.info:hover ( Box-Schatten: 0 0 5px #000 )

Stellen Sie sich nun 10 Effekte vor. Öffnen Sie die Demoseite in einem separaten Fenster oder Tab, sehen Sie sich den Code an und studieren Sie ihn.

Beispiel 1

Für diesen Effekt fügen wir dem Element mit der View-Klasse eine spezielle View-First-Klasse hinzu. Eine spezielle Klasse wird in jedem Beispiel zu einem Element mit einer Ansichtsklasse (Ansicht-zuerst, Ansicht-zweite, Ansicht-dritte usw.) hinzugefügt.

BEI dieses Beispiel Basisübergänge werden verwendet, um einen großartigen Effekt zu erzielen.

View-first img (Übergang: alle 0,2 s linear; ) .view-first .mask (Deckkraft: 0; Hintergrundfarbe: rgba(219,127,8, 0,7); Übergang: alle 0,4 s Ease-in-out; ) . view-first h2 ( transform: translateY(-100px); Deckkraft: 0; Übergang: alle 0,2s Ease-in-out; ) .view-first p ( transform: translateY(100px); Deckkraft: 0; Übergang: alle 0,2 s linear; ) .view-first a.info( Deckkraft: 0; Übergang: alle 0,2s Ease-in-out; )

Kommen wir nun zur Grundlage unserer Wirkung. Wenn der Mauszeiger über das Bild fährt, verwenden wir eine Verzögerung, um eine einfache Animation zu simulieren. Die Transition-Delay-Eigenschaft, die in den Hover-Pseudoklassen verwendet wird, kann so geändert werden, dass sie sich von einer regulären Klasse unterscheidet. In diesem Beispiel verwenden wir keine Verzögerungen in der normalen Klasse, aber in den Hover-Pseudoklassen sind die Übergänge leicht verzögert. Wenn der Mauszeiger das Objekt verlässt, wird der Standardwert von 0 verwendet und die „Wiederherstellung“ erfolgt schnell.

View-first:hover img ( transform: scale(1.1); ) .view-first:hover .mask ( opacity: 1; ) .view-first:hover h2, .view-first:hover p, .view-first: hover a.info ( Deckkraft: 1; transform: translateY(0px); ) .view-first:hover p ( Übergangsverzögerung: 0,1 s; ) .view-first:hover a.info ( Übergangsverzögerung: 0,2 s; )

Beispiel 2

Im zweiten Beispiel fügen wir eine spezielle view-second-Klasse hinzu, aber das Element mit der Klasse mask bleibt leer und der Inhalt wird im Element mit der Klasse content platziert.

Stil Nr. 2

Beschreibung

Taste

Hier hat die Maskenklasse andere Attribute, um den Effekt aufzubauen. Wir werden die Transformationseigenschaften verwenden (übersetzen und drehen):

View-Second Bild (Übergang: alle 0,2s Ease-In; ) .view-Second .mask (Hintergrundfarbe: rgba(115,146,184, 0,7); Breite: 300px; Polsterung: 60px; Höhe: 300px; Deckkraft: 0; transform : translate(265px, 145px) rotation(45deg); Übergang: alle 0,2s Ease-in-out; ) .view-second h2 (border-bottom: 1px solid rgba(0, 0, 0, 0,3); Hintergrund: transparent ; Rand: 20px 40px 0px 40px; transform: translate(200px, -200px); Übergang: alle 0.2s Ease-in-out; ) .view-second p ( transform: translate(-200px, 200px); Übergang: alle 0.2 s Ease-in-out; ) .view-second a.info ( transform: translate(0px, 100px); Übergang: alle 0,2s 0,1s Ease-in-out; )

Unser Effekt verwendet die Translate-Transformation, um die Elemente an ihren Platz zu verschieben. Und die Maske dreht sich auch. Beschreibungselemente erscheinen mit einer leichten Verzögerung nacheinander.

View-second:hover .mask ( Deckkraft:1; transform: translate(-80px, -125px) rotation(45deg); ) .view-second:hover h2 ( transform: translate(0px,0px); Übergangsverzögerung: 0,3 s; ) .view-second:hover p ( transform: translate(0px,0px); Übergangsverzögerung: 0,4s; ) .view-second:hover a.info ( transform: translate(0px,0px); Übergangsverzögerung : 0,5s; )

Beispiel 3

Im dritten Beispiel verwenden wir die Translations- und Rotationstransformationen, um unsere Beschreibungselemente zu rendern:

View-third-img (Übergang: alle 0,2s Ease-In; ) .view-third .mask (Hintergrundfarbe: rgba(0,0,0,0,6); Deckkraft: 0; Transformation: translate(460px, -100px) Rotieren (180 Grad); Übergang: alle 0,2 s 0,4 s nach innen und außen; ) .view-third h2( transform: translateY(-100px); Übergang: alle 0,2 s nach innen und außen; ) .view-third p ( transform: translateX(300px) rotation(90deg); Übergang: alle 0,2 s Ease-in-out; ) .view-third a.info ( transform: translateY(-200px); Übergang: alle 0,2 s Ease-in-out ; )

Genügend einfache Anweisungen um die Wirkung zu erzielen.

View-Third:hover .mask (Deckkraft:1; Übergangsverzögerung: 0s; Transformation: translate(0px, 0px); ) .view-third:hover h2 (transformation: translateY(0px); Übergangsverzögerung: 0,5s; ) .view-third:hover p ( transform: translateX(0px) rotation(0deg); Übergangsverzögerung: 0,4s; ) .view-third:hover a.info ( transform: translateY(0px); Übergangsverzögerung: 0,3 s; )

Beispiel 4

Das vierte Beispiel verwendet eine einfache Bild- und Inhaltsskalierung unter Verwendung der Skalierungstransformation. Das Bild hat in Stilen eine Verzögerung von 0,2 Sekunden, aber beim Hover beträgt die Verzögerung 0 Sekunden. Wenn Sie den Mauszeiger bewegen, wird der Effekt daher sofort angezeigt, und wenn Sie den Mauszeiger entfernen, tritt eine Verzögerung auf.

View-fourth img (Übergang: alle 0,4 s Ease-in-out 0,2 s; Opazität: 1; ) .view-fourth .mask ( background-color: rgba(0,0,0,0,8); opacity: 0; transform : Skalierung (0) drehen (-180 Grad); Übergang: alle 0,4 s erleichtern; Randradius: 0 Pixel; ) .view-fourth h2 (Opazität: 0; Rand unten: 1 Pixel solide rgba (0, 0, 0 , 0,3); Hintergrund: transparent; Rand: 20 px 40 px 0 px 40 px; Übergang: alle 0,5 s nach innen und außen; ) .view-fourth p (Deckkraft: 0; Übergang: alle 0,5 s nach innen und außen; ) . view-fourth a.info ( Deckkraft: 0; Übergang: alle 0,5 s Ease-in-out; )

Einfache Anweisungen, um den Effekt zu erzielen. CSS3 kann alles.

View-fourth:hover .mask ( Deckkraft: 1; transform: scale(1) rotate(0deg); Übergangsverzögerung: 0,2s; ) .view-fourth:hover img ( transform: scale(0); opacity: 0; Übergangsverzögerung: 0s; ) .view-fourth:hover h2, .view-fourth:hover p, .view-fourth:hover a.info( Deckkraft: 1; Übergangsverzögerung: 0,5s; )

Beispiel 5

Im fünften Beispiel gleitet der Inhalt von links nach außen, indem die Eigenschaft translate in Kombination mit der Übergangsfunktion Ease-in-out verwendet wird.

View-fifth img (Übergang: alle 0,3s Ease-in-out; ) .view-fifth .mask ( background-color: rgba(146,96,91,0.3); transform: translateX(-300px); opacity: 1 ; Übergang: alle 0.4s Ease-in-out; ) .view-fifth h2( Hintergrund: rgba(255, 255, 255, 0.5); Farbe: #000; Box-Schatten: 0px 1px 3px rgba(159, 141, 140, 0,5); ) .view-fifth p(Deckkraft: 0; Farbe: #333; Übergang: alle 0,2s linear; )

Wenn Sie den Mauszeiger darüber bewegen, gleitet das Bild nach rechts und eine Beschreibung gleitet an seiner Stelle auf der linken Seite heraus, als ob Sie das Bild verschieben würden:

View-fifth:hover .mask ( transform: translateX(0px); ) .view-fifth:hover img ( transform: translateX(300px); Übergangsverzögerung: 0,1 s; ) .view-fifth:hover p( Deckkraft: 1 ; Übergangsverzögerung: 0,4s; )

Beispiel 6

In diesem Beispiel "fallen" wir den Inhalt aus dem Vordergrund, indem wir von 10 auf 1 (normale Größe) verkleinern. Und der Knopf gleitet von unten heraus.

Ansicht-sechstes Bild (Übergang: alle 0,4 s, Ease-in-out 0,5 s; ) Ease-in 0,4 s; ) .view-sixth h2( Deckkraft: 0; Rand unten: 1 Pixel solide 0,3); Hintergrund: transparent; Rand: 20px 40px 0px 40px; transform: scale(10 ); Übergang: alle 0,3s 0,1s; ) .view-sixth p ( Deckkraft:0; transform: scale(10 ); Übergang: alle 0,3 s nach innen und außen 0,2 s; ) .view-sixth a.info ( opacity:0; transform: translateY(100px); Übergang: alle 0,3 s nach unten 0,1 s; )

Die Rücktransformation wird ebenfalls reibungslos durchgeführt:

View-sixth:hover .mask (Deckkraft:1; Übergangsverzögerung: 0s; ) .view-sixth:hover img (Übergangsverzögerung: 0s; ) .view-sixth:hover h2 (Deckkraft: 1; transform: scale( 1); Übergangsverzögerung: 0,1 s; ) .view-sixth:hover p ( Deckkraft:1; transform: scale(1); Übergangsverzögerung: 0,2 s; ) .view-sixth:hover a.info ( Deckkraft: 1; transform: translateY(0px); Übergangsverzögerung: 0,3 s; )

Beispiel 7

Beim siebten Effekt besteht die Idee darin, die Rotation des Bildes um die Mitte zu nutzen und es gleichzeitig zu verkleinern. Und die Beschreibung geht dann von oben nach unten.

View-seventh img (Übergang: alle 0,5 s Ease-out; Deckkraft: 1; ) .view-seventh .mask ( background-color: rgba(77,44,35,0.5); transform: rotation(0deg) scale(1 ); Deckkraft: 0; Übergang: alle 0,3 s nachlassen; transform: translateY(-200px) rotieren (180 Grad); ) .view-seventh h2( transform: translateY(-200px); Übergang: alle 0,2s nachlassen -out; ) .view-seventh p ( transform: translateY(-200px); Übergang: alle 0.2s Ease-in-out; ) .view-seventh a.info ( transform: translateY(-200px); Übergang: alle 0.2 s easy-in-out ; )

Beim Überfahren mit der Maus erscheinen mit Verzögerung Beschreibungselemente:

view-seventh:hover img( transform: rotation(720deg) scale(0); opacity: 0; ) .view-seventh:hover .mask (opacity: 1; transform: translateY(0px) rotation(0deg); Übergangsverzögerung : 0,4 s; ) .view-seventh:hover h2 (transformation: translateY(0px); Übergangsverzögerung: 0,7s; ) .view-seventh:hover p (transformation: translateY(0px); Übergangsverzögerung: 0,6s; ) .view-seventh:hover a.info ( transform: translateY(0px); Übergangsverzögerung: 0,5s; )

Beispiel 8

Dieses Beispiel erzeugt einen Bounce-Effekt, wenn die Beschreibungselemente von oben abgelegt werden.

View-eighth .mask ( background-color: rgba(255, 255, 255, 0.7); top: -200px; opacity: 0; transition: all 0.3s-ease-out 0.5s; ) .view-eighth h2( transform: .view-eighth p ( Farbe: #333; transform: translateY(-200px); Übergang: alle 0,2 s Ease-in-out 0,2 s; ) .view-eighth a.info ( transform: translateY(-200px); Übergang : alle 0,2s Ease-in-out 0,3s; )

Wir fügen dem Maskenelement eine Animation hinzu und definieren Verzögerungen für die Beschreibungselemente:

View-eighth:hover .mask (Deckkraft: 1; oben: 0px; Übergangsverzögerung: 0s; Animation: bounceY 0,9s linear; ) .view-eighth:hover h2 (transformation: translateY(0px); Übergangsverzögerung: 0,4 s; ) .view-eighth:hover p ( transform: translateY(0px); Übergangsverzögerung: 0,2s; ) .view-eighth:hover a.info ( transform: translateY(0px); Übergangsverzögerung: 0s; )

Um den Bounce-Effekt zu erzeugen, verwenden Sie die translateY-Funktion und ein paar Frames:

@keyframes bounceY ( 0% ( transform: translateY(-205px);) 40% ( transform: translateY(-100px);) 65% ( transform: translateY(-52px);) 82% ( transform: translateY(-25px) ;) 92% ( transform: translateY(-12px);) 55%, 75%, 87%, 97%, 100% ( transform: translateY(0px);) )

Beispiel 9

In diesem Beispiel verwenden wir zwei Maskenelemente, um den Effekt von sich schließenden Vorhängen zu erzeugen:

Stil Nr. 9

Beschreibung

Taste

Die beiden Masken haben unterschiedliche Transformationsmöglichkeiten. Sie sind auch unterschiedlich ausgerichtet.

View-ninth .mask-1, .view-ninth .mask-2 (Hintergrundfarbe: rgba(0,0,0,0.5); Höhe: 361px; Breite: 361px; Hintergrund: rgba(119,0,36, 0,5); Deckkraft: 1; Übergang: alle 0,3 s, Ease-in-out 0,6 s;) ; Transformationsursprung: 100 % 0 %; ) .view-ninth .mask-2 (oben: automatisch; unten: 0 Pixel; Transformation: Rotate(56,5 Grad) translateX (180 Pixel); Transformationsursprung: 0 % 100 %; )

View-ninth .content( background: rgba(0,0,0,0.9); height: 0px; opacity: 0.5; width: 361px; overflow: hidden; transform: rotation(-33.5deg) translate(-112px,166px) ; Transform-Origin: 0 % 100 %; Transition: alle 0,4 s Ease-in-out 0,3 s; ) .view-ninth h2( background: transparent; margin-top: 5px; border-bottom: 1px solid rgba(255.255.255, 0.2); ) .view-ninth a.info( Anzeige: keine; )

Wenn Sie mit der Maus über den Mauszeiger fahren, erscheint der Inhalt vom Rand der Kontaktmasken:

View-ninth:hover .content( height: 120px; width: 300px; opacity: 0.9; top: 40px; transform: rotation(0deg) translate(0px,0px); ) .view-ninth:hover .mask-1, . view-ninth:hover .mask-2( Übergangsverzögerung: 0s; ) .view-ninth:hover .mask-1( transform: rotation(56.5deg) translateX(1px); ) .view-ninth:hover .mask- 2 ( transformieren: drehen (56,5 Grad) translateX (-1px); )

Masken verwenden die Transition-Delay-Eigenschaft, sodass die Transformationen sofort beginnen, wenn Sie mit der Maus darüber fahren. Aber die umgekehrte Transformation wird verzögert, damit der Inhalt zusammenbrechen kann.

Beispiel 10

BEI letztes Beispiel das Bild wird bei gleichzeitiger Änderung der Transparenz vergrößert und der Inhalt auf normale Größe vergrößert.

View-tenth img ( transform: scaleY(1); transit: all 0.7s ease-in-out; ) .view-tenth .mask ( background-color: rgba(255, 231, 179, 0.3); transit: all 0.5 s linear; Deckkraft: 0; ) .view-tenth h2( border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; transform: scale(0); color : #333; Übergang: alle 0,5 s linear; Deckkraft: 0; ) .view-tenth p ( Farbe: #333; Deckkraft: 0; transform: scale(0); Übergang: alle 0,5 s linear; ) .view-tenth a.info ( Deckkraft: 0; Transformation: scale(0); Übergang: alle 0,5s linear; )

Wenn Sie den Mauszeiger darüber bewegen, ändert sich einfach der Bildmaßstab und die Transparenz:

View-tenth:hover img ( transform: scale(10); opacity: 0; ) .view-tenth:hover .mask ( opacity: 1; ) .view-tenth:hover h2, .view-tenth:hover p, . view-tenth:hover a.info( transform: scale(1); opacity: 1; )

Fazit

CSS3 hat ein enormes Potenzial für die Erstellung verschiedener visueller Effekte. Es ist wahrscheinlich, dass wir bald aufgeben können JavaScript-Nutzung für einfache Effekte.

Sehr oft können Sie auf Websites eine Änderung oder Schaltflächen beim Hover sehen. Eine spezielle Pseudo-Klasse: Hover in CSS ermöglicht es Ihnen, die Aufgabe zu implementieren. Heute werden wir einige Tricks betrachten, mit denen Sie diese Funktion ausführen können, und im Folgenden veröffentlichen wir eine Liste der interessantesten davon (mit kurzen Beschreibungen / Erklärungen). Alle Optionen sind unterteilt in:

Diese Gruppen sind sehr bedingt, weil. Viele Beispiele überschneiden sich und sind universell, das heißt, sie können beim Entwerfen verschiedener Objekte auftreten.

Schwebeeffekt ein CSS-Stile wird wie folgt rechts vom Element hinzugefügt:

a: schweben ( Farbe : rot ; )

a:schweben ( Farbe: rot; )

Am häufigsten wird der Mechanismus speziell für Links verwendet, um deren Farbe zu ändern oder Unterstreichungen hinzuzufügen / zu entfernen. Es kann jedoch auf andere Blöcke, Schaltflächen, Texte eingestellt oder beim Erstellen verwendet werden.

button : hover ( background : rgba (0 , 0 , 0 , 0 ) ; color : red ; ) .my-picture : hover ( opacity : 0.5 ; filter : alpha(opacity= 50 ) ; )

button:hover ( Hintergrund: rgba(0,0,0,0); Farbe: rot; ) .my-picture:hover ( Deckkraft: 0,5; Filter: alpha(opacity=50); )

Moderne Browser verarbeiten den CSS-Hover-Effekt gleich gut, obwohl ältere Versionen von IE 6 und niedriger nur mit Links funktionieren. Außerdem sagten einige Quellen, dass dies im Code angegeben werden muss.

Übrigens können beim Setzen von Link-Stilen auch Selektoren zusätzlich verwendet werden: Link - für noch nicht besuchte Seiten, : besucht - die, auf denen Sie bereits waren + : aktiv bestimmt die Adresse, die gerade aktiv ist. Es ist wichtig, den Hover-Effekt in CSS nach :link und :visited zu platzieren, falls vorhanden.

Kommen wir von der Theorie zur Praxis. Nachfolgend finden Sie eine Liste nützlicher Materialien und Ausschnitte – folgen Sie den Links, um die Quelle anzuzeigen.

Hover-Effekte für Schaltflächen und Links

Wie wir oben gesagt haben, ist dies die beliebteste Kategorie von Objekten auf der Website, auf der diese Technik zu finden ist. Hier sind einige Optionen für Sie.

Einfache Beispiele für Schaltflächen

Sullivan-Knöpfe

Der Trick besteht darin, dass beim Bewegen der Maus über verschiedene Schaltflächen neben der Änderung der Hintergrundfarbe auch eine kleine Animation mit Symbolen gestartet wird (jede hat ihre eigene).

CSS-Icons beim Hover

Eine Auswahl von 5 einfachen Möglichkeiten zur Umsetzung der Aufgabe. In allen Fällen handelt es sich um zusätzliche Icons, die rechts / links neben dem Text erscheinen oder diesen ersetzen.

Schaltflächen-Hover-Effekte

Im Vergleich zum vorherigen Beispiel sehen diese 12 Triggerfunktionen viel interessanter aus: sowohl optisch als auch in Bezug auf den Code. Nicht ohne JS.

Navi schwebt

Ein paar Tricks, mit denen Sie etwas Ungewöhnlicheres tun können als mit der grundlegenden Textdekorationseigenschaft. Der Hintergrund des Buttons wird zusätzlich mit verschiedenen visuellen Effekten gefüllt.

Infos zu Schweben

Die Tooltip-Funktion wird derzeit von allen Browsern unterstützt, Sie können sie jedoch an Ihre Bedürfnisse anpassen. Im aktuellen Beispiel wird die Pseudo-Klasse für das dfn-Tag gefeuert und sieht schick aus. Der Code ist ziemlich kompakt HTML + CSS.

Mana-Schaltfläche

Eine der originellsten Varianten des Schwebeeffekts in Blöcken - beim Schweben ist es, als würde man ihn mit Flüssigkeit füllen. Die Implementierung verwendet CSS, HTML und SVG. In einem bestimmten Thema von Websites wird dieses Snippet definitiv ein Geschenk des Himmels sein.

Hover-Effekte für Bilder

15 grundlegende Tricks

Trotz der Tatsache, dass der Artikel vor langer Zeit veröffentlicht wurde, funktionieren die Methoden immer noch korrekt. Hier sind wahrscheinlich alle möglichen typischen Transformationen für Grafiken gesammelt: verschiedene Arten von Zoom, Drehung, Unschärfe, Schwarzweiß, Transparenz, Filter, Strahlen usw. Sehr nützliches Material.

Schöne Bilder mit Hover-Effekten

Eine Auswahl von 30 netten und reibungslosen Aktionen, wenn Sie mit der Maus über ein Bild fahren. Durch einfache visuelle Manipulationen in Form von Zoom, Hinzufügen von Linien entsteht ein guter komplexer Eindruck. An manchen Stellen erhöht sich der Titel und die Kurzbeschreibung „zieht nach oben“. Tolle Option für ein Portfolio.

Barberpole-Hover-Animation

Auf den ersten Blick nicht kompliziert, die Animation, die am Ende sehr cool und nicht standardisiert aussieht.

CSS-Hover-Effekte mit Richtungserkennung

Eine hervorragende Auswahl an Snippets und Codes zum Thema finden Sie im Artikel von css-tricks.com. Alle diese Beispiele eint die Tatsache, dass im Laufe der Arbeit der Ort und die Richtung der Cursorbewegung bestimmt werden. Das wiederum erlaubt Ihnen, ganz originelle Reaktionen zu erzeugen, wenn Sie mit der Maus über Seitenelemente fahren:

Bei vielen komplexen Javascript- und jQuery-Lösungen für Hover-Effekte können Sie das Ergebnis deutlich diversifizieren und verbessern.

Richtungsbewusste Hover-Güte

Richtungsbewusste Kacheln mit Clip-Path Pure CSS

Suchen Sie nach den restlichen Chips im Originalartikel.

Animation

In dieser Entwicklung mehr als 100 einfache Wege"animieren" Sie Bilder oder Objekte beim Hover. Mit Hilfe dieser Funktionen können Sie unterschiedliche Darstellungen von Buttons, Titeln, Texten, soziale Symbole usw. Es gibt Optionen zum Ändern der Anzeige von Bildern und durchscheinenden Hintergrundüberlagerungen.

Der Link enthält 7 CSS3-Hover-Heading-Effekte - wenn der Benutzer mit der Maus über ein Bild fährt, sieht der Benutzer einen Informationsblock mit einem Titel, kurze Beschreibung und Link zu gehen. Man kann nicht sagen, dass die Beispiele sehr originell sind, aber sie werden definitiv dazu beitragen, ein Projekt mit statischen Inhalten zu diversifizieren.

CSS-Hover-Bibliotheken

schweben.css

Das Projekt mit dem unkomplizierten Namen Hover.css enthält eine Sammlung von CSS3-Effekten für Links, Schaltflächen, Blöcke und so weiter. Sie können den vorgefertigten Code verwenden und / oder eigene Änderungen hinzufügen. Hier gibt es viele interessante Dinge: 2D/3D-Transformationen, Arbeiten mit Hintergründen und Rahmen, Schatten, Symbolen. Die Lösung ist in den Formaten CSS, LESS und Sass verfügbar.

Imagehover.css

Eine weitere Bibliothek, die Hover-Effekte für Bilder festlegt, ist in Freie Version Sie finden 44 Transformationsoptionen (das Premium-Set enthält 5-mal mehr davon). LESS und SCSS werden hier ebenfalls unterstützt, dieser Fall wiegt nur 19kb. Die Website hat eine Seite mit einer Demonstration aller Arbeitsbeispiele. Es bietet viele einzigartige Funktionen, die oben nicht gesehen wurden.

Das Projekt umfasst mehr als 30 verschiedene Techniken für runde und eckige Objekte. Alle von ihnen sind ziemlich originell, es gibt praktisch keine einfachen „Einzelelement“ -Aktionen in Form eines regulären Zoom / Fly-Out. Die Aufgabe ist in reinem CSS3 + HTML implementiert (plus Scss-Dateien sind enthalten). Ausgezeichnete Kompatibilität mit Bootstrap 3, es gibt eine Dokumentation.

Gesamt. Wir hoffen, dass diese CSS-Hover-Effekte auf Bildern, Blöcken, Links und anderen Seitenelementen Ihnen geholfen haben, dieses Thema zu verstehen. Die Ihrer Meinung nach erfolgreichsten Lösungen können Sie in Ihren Sites implementieren - sei es die Anbindung einer vollwertigen Bibliothek oder einfach die Integration einer kleinen Version des Codes.

Wenn Sie weitere interessante Features und Snippets kennen, senden Sie ihnen bitte URLs in den Kommentaren. Und wir werden den Artikel in Zukunft aktualisieren.

Wenn Ihnen der Effekt gefällt, dann können Sie den fertigen Code einfach kopieren und verwenden!

Beleben Sie Ihre Website!

Verschiedene Hover-Effekte können den Seiten Ihrer Website Frische verleihen. Früher mussten Sie sich für jeden Effekt mit Javascript befassen, aber heute, nach dem Aufkommen der CSS3-Technologie, kann alles getan werden, indem die Verwendung von Javascript umgangen wird.

Die heutigen Beispiele sind alle für neue moderne Browser implementiert und optimiert und werden sicherlich in ihnen funktionieren (z. B. in den Browsern der Mozilla- oder WebKit-Familie). Wir können Ihnen die Funktion im IE nicht versichern, aber in den neuesten Versionen werden die Effekte definitiv so funktionieren, wie sie sollten. Aber vergessen Sie nicht, dass für jeden Effekt eine attraktive Rollback-Option vorbereitet wurde, falls der Browser den Effekt immer noch nicht unterstützt.

01. Zoom

Demo: Sehen

Dieser Effekt ist sehr einfach zu implementieren und kann auf verschiedene Arten implementiert werden. Wir haben eine Methode verwendet, bei der jedem Bild ein Randparameter hinzugefügt wird und dieser Parameter dann entfernt wird, wenn der Mauszeiger darüber bewegt wird. Nehmen wir an, die Randeinstellung beginnt bei 15 Pixel und wird beim Hover zu 2 Pixel, wodurch das Bild zu hüpfen scheint. Sie können diesen Effekt auch einfach mit Text verwenden, selbst wenn die Links vertikal statt horizontal sind.

Der Übergang kann hier nach Belieben eingestellt werden, und der Effekt wird auch ohne Übergang attraktiv sein. Wir haben den Effekt zum Beispiel etwas weicher gemacht, was unserer Meinung nach dem Effekt mehr Schwung verleihen würde.

CSS aufrüsten

Beispiel1 Bild(
Rand: 5px solide #ccc;
Schwimmer: links;
Rand: 15px
-Webkit-Übergang: Marge 0,5s Ease-out;
-moz-Übergang: Marge 0,5s Ease-out;
-o-Übergang: Marge 0,5 s Nachlassen;
}

Beispiel 1 Bild: Hover (
Rand oben: 2px;
}
02. Stapeln und wachsen

Demo: Sehen

Der Autor dieses Effekts wollte offenbar eine Art Lavalampeneffekt erzielen, denn wenn man mit der Maus über die Linkliste fährt, vergrößert sich jedes Bild langsam und kehrt dann zu seiner ursprünglichen Größe zurück.

Zur Umsetzung wurden hier Bilder mit einer Größe von 400x133 Pixel verwendet. Die Größe wurde dann mit CSS auf 300 x 100 Pixel geändert und beim Hover erweitert. Da im Beispiel die gesamte Liste zentriert ausgerichtet ist, hat die neue Größe der Bilder die gesamte Ausrichtung gebrochen. Dieses Problem kann gelöst werden, indem negative Ränder auf die halbe Breite vergrößerter Bilder eingestellt werden.

CSS-Code für Stack & Grow

/*Beispiel 2*/
#Behälter (
Breite: 300px
Rand: 0 automatisch;
}

#ex2 Bild(
Höhe: 100px;
Breite: 300px
Rand: 15px 0;
-webkit-Übergang: alle 1s einfach;
-moz-Übergang: Alle Einsen werden erleichtert;
-o-Übergang: alle Einsen werden erleichtert;
}

#ex2 Bild: Hover (
Höhe: 133px;
Breite: 400px
Rand links: -50px;
}
03. Text einblenden

Demo: Sehen

Hier wollte der Autor so etwas wie ein Event auf die Beine stellen Javascript-Typ wenn Sie den Mauszeiger über ein Element bewegen und der Effekt auf einem anderen angezeigt wird. Hier wurden Text und Bild genommen und dann in einem separaten linksbündigen div platziert. Als nächstes wurden color: transparent und line-height: 0px zum div hinzugefügt. Dadurch konnte der Text oben im div positioniert und vollständig ausgeblendet werden.

Damit der Text wieder erscheint, ändern wir einfach die Farbe und die Zeilenhöhe. Wenn Sie den Mauszeiger über das Bild bewegen, wird der Text wieder angezeigt. Sehr lustiger und leichter Effekt.

Blenden Sie Text in Effekt-CSS-Code ein

#ex3(
Breite: 730px
Höhe: 133px;
Zeilenhöhe: 0px
Farbe: transparent
Schriftgröße: 50px;
Schriftfamilie: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, serifenlos;
Schriftstärke: 300
Texttransformation: Großbuchstaben;

}

#ex3:schweben(
Zeilenhöhe: 133px;
Farbe: #575858;
}

#ex3 Bild(
Schwimmer: links;
Rand: 0 15px;
}
04. Schiefes Foto

Demo: Sehen

Dieser Effekt ist sehr einfach, eignet sich aber hervorragend für eine Thumbnail-Galerie. Zuerst müssen Sie ein Raster mit Bildern erstellen und dann die Bilder drehen, wenn Sie mit der Maus darüber fahren, was einen attraktiven Effekt erzeugt.

Hier gibt es viele neue CSS-Werte zu verwenden, daher lohnt es sich, auch die Fallback-Option für mehr in Betracht zu ziehen frühe Versionen Browser. In unserer Galerie werden jedoch Übergänge, Transformationen sowie Blockschatten nach Ihrem Wunsch verwendet. Die Transformation ist für die Drehung des Bildes verantwortlich, und die Übergänge sind für den weichen und glatten Effekt verantwortlich.

Hier können Sie Pseudoselektoren verwenden.

CSS-Code für Crooked Photo

#ex4 (
Breite: 800px
Rand: 0 automatisch;
}

#ex4 Bild(
Rand: 20px
Rand: 5px solide #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
Box-Schatten: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-Übergang: alle 0,5s Ease-out;
-moz-Übergang: alle 0,5s Ease;
-o-Übergang: alle 0,5s Ease;
}

#ex4 Bild: Hover (
-webkit-transform: rotieren (-7 Grad);
-moz-transform: rotieren (-7 Grad);
-o-transformieren: drehen (-7 Grad);
}
05. Einblenden und reflektieren

Demo: Sehen

Dieser Effekt ist etwas knifflig zu implementieren, also mussten wir ein wenig daran herumfummeln, damit er funktioniert. Die Standardbildposition ist leicht transparent. Wenn Sie dann den Mauszeiger über das Bild bewegen, wird die Transparenzstufe verringert, und das Bild kehrt zu seinem ursprünglichen Aussehen sowie zu einem leichten Leuchten und einer Reflexion zurück (nur für Browser der WebKit-Familie).

Leider handelt es sich bei der Reflexion nicht genau um einen Übergang, sodass sie sofort angezeigt wird, obwohl der Rest des Inhalts in Zeitlupe angezeigt wird.

Wenn Sie in Bezug auf CSS-Reflexionen verwirrt sind, können Sie in diesem Artikel (David Walsh) mehr darüber erfahren.

Einblenden und CSS-Code reflektieren

#ex5 (
Breite: 700px
Rand: 0 automatisch;
Mindesthöhe: 300px
}

#ex5 Bild(
Rand: 25px
Deckkraft: 0,8
Rand: 10px solide #eee;

/*Übergang*/
-webkit-Übergang: alle 0,5s Ease;
-moz-Übergang: alle 0,5s Ease;
-o-Übergang: alle 0,5s Ease;

/*Betrachtung*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)) );
}

#ex5 Bild: Hover (
Deckkraft: 1

/*Betrachtung*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)) );

/*Glühen*/
-webkit-box-shadow: 0px 0px 20px rgba(255.255.255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255.255.255,0.8);
Box-Schatten: 0px 0px 20px rgba(255.255.255,0.8);
}
Fazit

Diese 5 Beispiele sollten ausreichen, um Sie zu inspirieren, etwas Eigenes zu schaffen. Denken Sie daran, dass Sie immer schon damit experimentieren können fertige Beispiele und dann erzählen Sie uns davon.

Wenn Sie irgendwo im Netz auf andere auffällige Effekte gestoßen sind, dann teilen Sie uns und anderen Lesern gerne mit.

Der Beitrag enthält eine Auswahl an verschiedenen Effekten u CSS-Animationen, was bei Ihrer Arbeit nützlich sein kann und auch den ständigen Rückgriff auf JavaScript überflüssig macht. Vielleicht sind die Beispiele nicht die neusten und ungewöhnlichsten, aber meiner Meinung nach brauchbar.

1. CSS3-Uhr mit jQuery

Diese Uhr wurde mit einem der wichtigsten CSS3-Tools erstellt - rotieren und unter Einbeziehung der jQuery-Bibliothek.

2. CSS-Analoguhr

Eher klassisch, Analoge Uhr. Sie werden mithilfe des Webkit-Übergangs und der CSS-Eigenschaft „transform“ erstellt. Damit die Uhrzeit aber mit der aktuellen übereinstimmt, benötigen Sie JavaScript.

3. Rotierender 3D-Würfel

Drehung und Bewegung entlang der Seiten des Würfels erfolgen mit den Standardtasten "hoch", "runter", "links" und "rechts". Die 3D-Form selbst wird mit webkit-perspective, -webkit-transform und -webkit-transition erstellt.

4. Mehrere einziehbare 3D-Würfel

Hier sind bereits mehrere 3D-Würfel, die CSS3 und die Transformations- und Übergangseigenschaften direkt verwenden. Wenn Sie den Mauszeiger über den Würfel bewegen, bewegt er sich zur Seite und zeigt den Text auf der anderen Seite der Form.

5. Akkordeon-Menü

Reiner CSS-Akkordeon-Menüeffekt, bei dem das Klicken auf jede der Zeilen ein zusätzliches Fenster im Hauptteil der Liste selbst öffnet. Native Animation in WebKit-basierten Browsern.

6. CSS-Parallax-Scrolling

Dies ist ein animiertes Auto-Parallax-Scrolling mit CSS-Übergängen basierend auf WebKit. Wenn Sie den Mauszeiger über das Textfeld bewegen, beginnen sich die Sterne im Hintergrund sanft zur Seite zu bewegen. Es entsteht der Effekt des Fliegens.

7. Matrix

Der Kultfilm „Matrix“ ist einer der besten Science-Fiction-Filme. Das Beispiel zeigt, wie man dieselbe erstaunliche Animation (schwarzer Bildschirm mit laufenden Zahlen) in CSS3 nachbildet.

8 dynamische Palaroids

In diesem Beispiel ist die detaillierte Beschreibung Erstellen von animierten Fotos basierend auf CSS3-Befehlen. Ein Klick auf ein Bild vergrößert es und bringt es nach vorne.

9. Bildskalierung

In diesem Beispiel werden die Bilder beim Hover einfach vergrößert. Ein einfacher, aber manchmal sehr nützlicher Effekt.

10. JavaScript-Effekte auf CSS3

Als Alternative zu JavaScript schlägt der Beitrag sieben CSS3-Effekte vor: verschiedene Blöcke, die sich drehen, verschwinden, herausbewegen, wachsen usw.

11. Virtuelle Aufzeichnungen von DJ Hero

Der Beitrag erklärt, wie man Spinning Records erstellt. Die Rotationsgeschwindigkeit kann direkt auf dem Bildschirm eingestellt werden.

12. Gleitvinyl

Der Effekt der verschiebbaren Schallplatte wird mithilfe von CSS3- und HTML-Übergängen erstellt. Animationen wie diese erwecken eine Webseite zum Leben, verleihen einem Standard-Albumcover Originalität und so weiter.

13. Bild-Hover-Effekte

Wenn Sie den Mauszeiger über ein Bild bewegen, kann es sich zur Seite bewegen, drehen, verkleinern, sich von quadratisch in rund verwandeln, verschwommen werden ... Kurz gesagt, Bilder ändern ihre Eigenschaften auf jede erdenkliche Weise.

14. Rotierendes Dreieck

Wenn Sie auf das Dreieck klicken, beginnt es sich zu drehen.

15. Raum

Ganzer Raum, fit in CSS. Dient als Beispiel für die Überlagerung rotierender Ebenen (bemerkbarer beim Herauszoomen im Browser).

16. Las Meninas in 3D

Ein interessanter CSS-Effekt, der Diego Velázquez' berühmten Las Meninas dreidimensional aussehen lässt.

17. CSS für Mac OS X

Am unteren Rand des Bildschirms befindet sich eine Reihe grundlegender Mac OS X-Symbole, die sich beim Bewegen der Maus vergrößern. Der Effekt verleiht der Seite Dynamik.

18. Drop-In-Modalitäten

CSS3-Effekte und Eigenschaften von Drop-In-Modals helfen bei der Erstellung schneller, animierter und einfache Änderung modale Fenster.

19. Objekte animieren

Transformationsänderungen Aussehen Element im Browser. Dargestellt am Beispiel einer Rakete, die von einem Ende des Bildschirms zum anderen "fliegt". Werkzeuge zum Verschieben, Drehen usw. können verwendet werden.

20. Farbuhr

Die Farbuhr basiert auf jQuery und CSS3. Ähnliche Wirkung wird sich im Zusammenhang mit dem Warten auf den Abschluss eines Wettbewerbs, Abstimmungen und dergleichen als nützlich erweisen.

21. Lightbox-Galerie mit jQuery und CSS3

Dies ist eine wunderbare Galerie, mit der Sie Bilder in einer selektiven Reihenfolge sortieren und anordnen können. Für Interaktivität verwendet die Galerie jQuery, jQuery UI und jQuery-Plugin Fantasiebox. Lightbox unterstützt den Titel und die Beschreibung der Bilder, gruppiert sie und ordnet die Folien automatisch in einer Reihe an.

22. "Elastische" Vorschauen

Vergrößern Sie die Bildvorschau beim Hover. Wenn Sie also auf das Menü klicken, steigt es proportional an.

23. Dynamische Karten

Dieses Beispiel ist ein dynamischer Kartensatz, der verwendet wird HTML-Funktionen und CSS3.

24. Sliding jQuery-Menü

Das Slideout-Menü im Beispiel wurde mit einer Kombination aus CSS3 und jQuery erstellt. Wenn Sie den Mauszeiger über das Bild bewegen, wird ein Popup-Fenster mit Text angezeigt.

25. CSS-Registerkarten

Wenn Sie im Beispiel mit der Maus über die Überschriften der Registerkarten fahren, ändert sich die Liste unten.

26. Fisheye-Menü

Das Beispiel zeigt, wie Sie ein Fisheye-Menü mit CSS-Animation und SVG erstellen. Als zusätzlichen Bonus gibt es eine Demo-SVG im IMG-Tag.

27. Dropdown-Menü

Dieser Typ bietet dank der Verwendung von CSS3-Übergängen eine sehr bequeme Navigation durch das Hauptmenü.

28. Titel aus Star Wars

Berühmte Titel aus Star Wars. HTML und CSS reichen aus, um sie auszuführen.

29. Weitere Fisheye-CSS-Effekte

Wieder Symbole, die beim Schweben größer werden.

30. Frame-für-Frame-Animation

Es stehen mehrere Demonstrationsoptionen zur Verfügung.
Im ersten Beispiel müssen Sie auf das Bild klicken, um Frames zu wechseln. Jeder Klick ist ein Zug. Frames werden wiederholt, es entsteht eine gewisse Schleife.
Im zweiten Beispiel reicht es aus, den Cursor über das Bild zu bewegen, um Frames zu wechseln. Dementsprechend hängt die Geschwindigkeit der Animation von der Geschwindigkeit der Mausbewegung ab.