Hover
2.3.1
Eine Sammlung von CSS3-basierten Hover-Effekten, die auf Links, Schaltflächen, Logos, SVG, vorgestellte Bilder usw. angewendet werden können. Einfach auf Ihre eigenen Elemente anwenden, modifizieren oder einfach als Inspiration verwenden. Verfügbar in CSS, Sass und LESS.
Demo | Anleitung
npm install hover.css --savebower install hover --saveHover.css kann auf verschiedene Arten verwendet werden; Kopieren Sie entweder den Effekt, den Sie verwenden möchten, und fügen Sie ihn in Ihr eigenes Stylesheet ein oder verweisen Sie auf das Stylesheet. Fügen Sie dann einfach den Klassennamen des Effekts zu dem Element hinzu, auf das Sie ihn anwenden möchten.
Wenn Sie nur einen oder mehrere Effekte verwenden möchten, empfiehlt es sich, einen Effekt zu kopieren und in Ihr eigenes Stylesheet einzufügen, damit ein Benutzer css/hover.css nicht vollständig herunterladen muss.
Angenommen, Sie möchten den Grow-Effekt nutzen:
Laden Sie Hover.css herunter
Suchen Sie in css/hover.css nach dem Grow-CSS (jeder Effekt wird mit einem Kommentar darüber benannt):
/* Grow */
. hvr-grow {
display : inline-block;
vertical-align : middle;
transform : translateZ ( 0 );
box-shadow : 0 0 1 px rgba ( 0 , 0 , 0 , 0 );
backface-visibility : hidden;
-moz-osx-font-smoothing : grayscale;
transition-duration : 0.3 s ;
transition-property : transform;
}
. hvr-grow : hover ,
. hvr-grow : focus ,
. hvr-grow : active {
transform : scale ( 1.1 );
}Kopieren Sie diesen Effekt und fügen Sie ihn dann in Ihr eigenes Stylesheet ein.
Fügen Sie in der HTML-Datei, in der der Effekt angezeigt werden soll, die Klasse .hvr-grow zu Ihrem ausgewählten Element hinzu.
Beispielelement vor der Anwendung des Hover.css-Effekts:
< a href =" # " > Add to Basket a >Beispielelement nach Anwendung des Hover.css-Effekts:
< a href =" # " class =" hvr-grow " > Add to Basket a > Hinweis : Ab 2.0.0 wird allen Hover.css-Klassennamen das Präfix hvr- vorangestellt, um Konflikte mit anderen Bibliotheken/Stylesheets zu vermeiden. Wenn Sie Sass/LESS verwenden, kann dies einfach mithilfe der Variablen $nameSpace / @nameSpace in scss/_options.scss oder less/_options.less geändert werden.
Wenn Sie viele Hover.css-Effekte verwenden möchten, möchten Sie möglicherweise auf das gesamte Hover.css-Stylesheet verweisen.
hover-min.css herunterhover-min.css zu den Dateien Ihrer Website hinzu, beispielsweise in einem Verzeichnis namens csshover-min.css im < head >
< link href =" css/hover-min.css " rel =" stylesheet " >
head >Alternativ können Sie wie folgt einen Verweis in ein vorhandenes Stylesheet einfügen (dies kann für WordPress-Benutzer nützlich sein, die kein HTML bearbeiten können):
@import url ( "hover-min.css" );.hvr-grow zu Ihrem ausgewählten Element hinzu.Beispielelement vor der Anwendung des Hover.css-Effekts:
< a href =" # " class =" button " > Add to Basket a >Beispielelement nach Anwendung des Hover.css-Effekts:
< a href =" # " class =" button hvr-grow " > Add to Basket a >displayUm ein Element „transformierbar“ zu machen, gibt Hover.css für alle Elemente, auf die es angewendet wird, Folgendes an:
display : inline-block;
vertical-align : middle; Wenn Sie dieses Verhalten überschreiben möchten, entfernen Sie entweder das obige CSS aus Hover.css oder ändern Sie die display für das Element. Stellen Sie sicher, dass Sie die Überschreibung nach den Hover.css-Deklarationen deklarieren, damit die CSS-Kaskade wirksam wird. Wenn Sie alternativ die Sass/LESS-Version von Hover.css verwenden, können Sie das forceBlockLevel() Mixin in scss/_hacks.scss oder less/_hacks.less entfernen/auskommentieren.
Weitere Informationen zu transformierbaren Elementen finden Sie im CSS Transforms Module.
Um ein Hover.css-Symbol hinzuzufügen, platzieren Sie das Symbol-HTML in dem Element, auf das ein Hover.css-Effekt angewendet wird. Zum Beispiel:
Im obigen Code haben wir einem Linkelement die Klasse hvr-icon-forward zugewiesen, die ein Symbol vorwärts bewegt, wenn der Mauszeiger über dem Link gehalten wird. Dem Symbol selbst wird die Klasse hvr-icon zugewiesen, um Hover.css mitzuteilen, dass dies das Symbol ist, das wir animieren möchten. In diesem Beispiel stammt unser Symbol von FontAwesome, das wir gemäß den Anweisungen von FontAwesome in den unserer Webseite geladen haben, etwa so:
< link href =" //maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css " rel =" stylesheet " media =" all " >Hinweis: Ab Hover.css v2.3.0 können Sie jede beliebige Methode zum Hinzufügen von Symbolen verwenden (zuvor wurde nur FontAwesome standardmäßig unterstützt.) Sie können beispielsweise eine andere Symbolbibliothek oder stattdessen eine verwenden Bild etwa so:
Hier fungiert das Bild als Symbol, da auf es die Klasse hvr-icon angewendet wird. Wenn Sie mit der Maus darüber fahren, dreht sich das Symbol gemäß der Definition der Klasse hvr-icon-spin im übergeordneten Element.
Die Position des Symbols liegt vollständig in Ihrer Kontrolle. Sie könnten es vor dem Text platzieren, etwa so:
Oder verwenden Sie benutzerdefiniertes CSS, um das Symbol nach Ihren Wünschen zu positionieren.
Das Projekt besteht aus folgenden Ordnern und Dateien:
Weitere wichtige Dateien sind:
Viele Hover.css-Effekte basieren auf CSS3-Funktionen wie Übergängen, Animationen, Transformationen und Pseudoelementen. Aus diesem Grund funktionieren Effekte in älteren Browsern möglicherweise nicht vollständig.
Abgesehen von den oben genannten Browsern wird Hover.css von allen gängigen Browsern unterstützt. Bitte besuchen Sie caniuse.com für vollständige Unterstützung für viele Webtechnologien und testen Sie Ihre Webseiten entsprechend. Es wird empfohlen, Fallback-Effekte für ältere Browser anzuwenden und dabei CSS zu verwenden, das von diesen Browsern unterstützt wird, oder eine Funktionstestbibliothek wie Modernizr.
Grunzen ist nicht unbedingt erforderlich, kann aber die Entwicklung beschleunigen. Wenn Grunt installiert ist, führen Sie grunt über die Befehlszeile aus, um einen Entwicklungsserver einzurichten, auf den Sie für Netzwerktests unter http://127.0.0.1:8000/ oder Ihrer lokalen IP zugreifen können. Wenn Grunt ausgeführt wird, wird Sass oder LESS vorverarbeitet (je nachdem, ob Sie im scss oder less -Ordner arbeiten) und CSS-Dateien werden minimiert.
Hinweis: Ursprünglich war Grunt so eingerichtet, dass CSS-Eigenschaften automatisch vorangestellt werden. Um das Projekt jedoch so zugänglich wie möglich zu machen, ist dies nicht mehr der Fall. Das prefixed(property, value) Sass/LESS-Mixin sollte stattdessen für die Browser-Präfixierung verwendet werden. Siehe Sass/LESS für die Entwicklung verwenden und [LESS für die Entwicklung verwenden].
Sass/LESS sind nicht unbedingt erforderlich, können aber die Entwicklung beschleunigen. Verarbeiten Sie Sass/LESS mit Ihrer Lieblingssoftware oder der über Grunt bereitgestellten Umgebung vor.
Sass/LESS wird im Hover.css-Projekt verwendet, um verschiedene CSS in bestimmte Dateien zu unterteilen. Jeder Effekt befindet sich in einer eigenen Datei im effects . Hover.css verwendet außerdem die folgenden .scss und .less -Dateien:
Enthält Hacks (unerwünschte, aber normalerweise notwendige Codezeilen), die auf bestimmte Effekte angewendet werden. Hacks hier erklärt.
Enthält prefixed und keyframes Mixins, die die erforderlichen Präfixe, die Sie in _options.scss / _options.less angeben, auf Eigenschaften und Keyframes anwenden.
Eigenschaften können wie folgt vorangestellt werden:
@include prefixed(transition-duration , .3s);. prefixed ( transition-duration , .3 s ); Dem prefixed Mixin wird die Eigenschaft übergeben, die Sie voranstellen möchten, gefolgt von ihrem Wert.
Keyframes können wie folgt vorangestellt werden:
@include keyframes(my-animation) {
to {
color : red;
}
} Dem keyframes Mixin wird der Keyframe-Name übergeben, gefolgt vom Inhalt mithilfe der @content-Direktive.
. keyframes ( my-animation , {
to {
color : red;
}
}); Dem keyframes Mixin wird der Keyframe-Name gefolgt vom Inhalt übergeben, beides als Argumente.
Enthält Standardoptionen, verschiedene Effektoptionen und die Browser-Präfixe, die Sie mit dem prefixed Mixin verwenden möchten. Standardmäßig ist nur das Präfix -webkit- auf true gesetzt (da die meisten Browser derzeit keine Präfixe erfordern).
Ab 2.0.0 enthält _options auch die Option $nameSpace / @nameSpace , mit der Sie den Namen ändern können, der allen Klassen vorangestellt wird. Der Standard-Namespace ist hvr .
Die Option $includeClasses / @includeClasses ist standardmäßig auf true gesetzt und generiert alle Hover.css-Effekte unter ihren eigenen Klassennamen, zum Beispiel hvr-grow . Wenn Sie die Eigenschaften, aus denen Hover.css-Effekte bestehen, zu Ihren eigenen Klassennamen hinzufügen möchten, setzen Sie diese Option auf false .
Wenn Sie Ihre eigenen Effekte beisteuern möchten, lesen Sie bitte den Beitragsleitfaden.
Hover.css wird je nach Ihren Anforderungen unter einer kostenlosen persönlichen/Open-Source- oder kostenpflichtigen kommerziellen Lizenz zur Verfügung gestellt. Um Lizenzen zu vergleichen, besuchen Sie bitte den Ian Lunn Design Limited Store und erwerben Sie hier eine kommerzielle Lizenz.
Für den persönlichen/Open-Source-Gebrauch wird Hover.css unter einer MIT-Lizenz zur Verfügung gestellt
Vollständige Lizenz lesen
Für die kommerzielle Nutzung wird Hover.css unter den Lizenzen „Commercial“, „Extended Commercial“ und „OEM Commercial“ zur Verfügung gestellt.
Kauf | Vollständige Lizenz lesen
*Mit Ausnahme von Anwendungen, die es Endbenutzern ermöglichen, separate Anwendungen zu erstellen. Siehe die kommerzielle OEM-Lizenz.
Kauf | Vollständige Lizenz lesen
Sollte Ihre Anwendung es Endbenutzern ermöglichen, separate Anwendungen zu erstellen, die die Software von Ian Lunn Design Limited integrieren, beispielsweise ein Entwicklungs-Toolkit, eine Bibliothek oder einen Anwendungs-Builder, müssen Sie eine kommerzielle OEM-Lizenz erwerben. Bitte kontaktieren Sie uns für weitere Informationen zur OEM-Kommerzielllizenz.
Hover.css wurde zuvor unter einer MIT-Lizenz sowohl für die kommerzielle als auch für die nichtkommerzielle Nutzung zur Verfügung gestellt. Jeder, der vor Version 2.2.0 (24. März 2017) eine MIT-Lizenz für die kommerzielle Nutzung erworben hat, kann weiterhin Hover.css-Versionen vor Version 2.2.0 unter derselben Lizenz verwenden.
Wenn Sie ein Upgrade auf Version 2.2.0 oder höher durchführen möchten oder einfach Ihre Unterstützung für Hover.css zeigen möchten (wir würden uns sehr darüber freuen!), erwerben Sie bitte eine aktuelle kommerzielle Lizenz. Erwerben Sie eine kommerzielle Lizenz.
Ian Lunn ist ein freiberuflicher Front-End-Entwickler und Autor von CSS3 Foundations.
Beauftragen Sie Ian für responsive Websites, WordPress-Websites, JavaScript, Animation und Optimierung.
