Hover.css 纯 CSS3 鼠标悬停特效合集
Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮、LOGO 以及图片等元素。所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after 伪元素。因为使用了 CSS3 过渡、转换和动画效果,因此只支持 Chrome、Firefox 和 Safari 等现代浏览器。
Hover.css 是一个 CSS 特效合集,采用纯 CSS 代码编写,响应鼠标的悬停/滑过事件,可以运用到普通的链接、LOGO、SVG 图片、特色图标上面,只包含了 CSS 代码,所有实用起来非常的简单高效。
CSS3 悬停特效合集 Hover.css 是一款特效丰富,支持 2D 变化特效、边框特效、阴影特效等; 使用简单,可直接复制相关特效代码,快速应用到元素上。
下载和安装
- NPM:
npm install hover.css --save
- Bower:
bower install hover --save
- Download Zip
使用方法
Hover.css 有多种使用方法,你可以直接引入 Hover.css 文件,然后在需要特效的元素上添加特效类名,或者你想要更加自由的控制你项目的 CSS 代码容量,那么你可以只复制你需要的特效 CSS 代码到你的 Style.css 文件。
A. Copy and Paste an Effect
If you plan on only using one or several effects, it's better practice to copy and paste an effect into your own stylesheet, so a user doesn't have to download css/hover.css
in its entirety.
Assuming you want to use the Grow effect:
- Download Hover.css
- In
css/hover.css
, find the Grow CSS (each effect is named using a comment above it):/* Grow */ .hvr-grow { display: inline-block; vertical-align: middle; transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; transition-duration: 0.3s; transition-property: transform; } .hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active { transform: scale(1.1); }
- Copy this effect and then paste it into your own stylesheet.
- In the HTML file which you'd like the effect to appear, add the class of
.hvr-grow
to your chosen element.
Example element before applying Hover.css effect:
<a href="#">Add to Basket</a>
Example element after applying Hover.css effect:
<a href="#" class="hvr-grow">Add to Basket</a>
Note: As of 2.0.0
all Hover.css class names are prefixed with hvr-
to prevent conflicts with other libraries/stylesheets. If using Sass/LESS, this can easily be changed using the $nameSpace
/ @nameSpace
variable in scss/_options.scss
or less/_options.less
.
B. Reference Hover.css
If you plan on using many Hover.css effects, you may like to reference the entire Hover.css stylesheet.
- Download
hover-min.css
- Add
hover-min.css
to your websites files, in a directory namedcss
for example - Reference
hover-min.css
in<head>
of the HTML page you'd like to add Hover.css effects to:
<head>
<link href="css/hover-min.css" rel="stylesheet">
</head>
Alternatively you can add a reference into an existing stylesheet like so (this may be useful to WordPress users who are unable to edit HTML):
@import url("hover-min.css");
- Assuming you want to use the Grow effect, in the HTML file you'd like to use this effect, add the class of
.hvr-grow
to your chosen element.
Example element before applying Hover.css effect:
<a href="#" class="button">Add to Basket</a>
Example element after applying Hover.css effect:
<a href="#" class="button hvr-grow">Add to Basket</a>
A Note on the display
Property
To make an element "transformable", Hover.css gives the following to all elements it is applied to:
display: inline-block;
vertical-align: middle;
Should you wish to override this behavior, either remove the above CSS from Hover.css or change the display
property for the element. Be sure to declare the override after the Hover.css declarations so the CSS cascade will take effect. Alternatively, if you are using the Sass/LESS version of Hover.css, you can remove/comment out the forceBlockLevel()
mixin found in scss/_hacks.scss
or less/_hacks.less
.
For more information about Transformable elements, see the CSS Transforms Module .
Using FontAwesome with Icon Effects
Hover.css uses FontAwesome for its icon effects. For these effects to work, a reference to the FontAwesome stylesheet must be added by placing the following in the <head></head>
of your web page:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
Hover.css icons are added to elements via the :before
pseudo-element. Let's take the Icon Forward effect as an example (browser prefixes and additional styles removed for brevity):
.hvr-icon-forward:before {
content: "\f138";
position: absolute;
right: 1em;
padding: 0 1px;
font-family: FontAwesome;
transform: translateZ(0);
transition-duration: 0.1s;
transition-property: transform;
transition-timing-function: ease-out;
}
What's important in the above example are the font-family
and content
declarations. font-family: FontAwesome
tells the browser we want to use a FontAwesome icon in this pseudo-element, and the content
value says which one. Should you wish to change the icon, change the value of the content
property. A full list of the values and the icon they represent can be found here .
If you'd rather not tamper with Hover.css itself, you can override the default content value simply by declaring the same declaration again (providing it be declared after the default one either in Hover.css or another stylesheet):
.hvr-icon-forward:before {
content: "\f001";
}
The Icon Forward effect will then display a musical note that moves forward when hovered over (instead of the default arrow in a circle).
What's Included?
The project consists of the following folders and files:
css
- demo-page.css - Contains styles to demonstrate Hover. Not required in your projects
- hover-min.css - The minified/production version of Hover.css
- hover.css - The development version of Hover.css
scss/less
- effects - Contains each individual effect sorted into categorized folders
- _hacks.scss/_hacks.less, _mixins.scss/_mixins.less, _options.scss/_options.less - Sass/LESS Utilities
- hover.scss/hover.less - Development version of Hover.css in Sass and LESS flavours
Other
Other files of note include:
- index.html - Demonstrates all Hover.css effects
- Gruntfile.js - Used for development of Hover.css via Grunt .
Browser Support
Many Hover.css effects rely on CSS3 features such as transitions, animations, transforms and pseudo-elements, for that reason, effects may not fully work in older browsers.
- Transitions and Animations - not supported below Internet Explorer 9
- Transforms - not supported below Internet Explorer 10
- Generated Content (pseudo-elements) - not supported below Internet Explorer 8
Aside from the above mentioned browsers, Hover.css is supported across all major browsers. Please see caniuse.com for full support for many web technologies and test your webpages accordingly. It is recommended to apply fallback effects for older browsers, using CSS supported by those browsers or a feature testing library such as Modernizr .
Using Grunt for Development
Grunt is non-essential but can speed up development. With Grunt installed , run grunt
from the command line to set up a development server accessed at http://127.0.0.1:8000/ or your local IP for network testing. With Grunt running, Sass or LESS will be preprocessed (depending on whether you work out of the scss
or less
folder) and CSS files will be minified.
Note: Originally Grunt was set up to autoprefix CSS properties but to make the project as accessible as possible, this is no longer the case. The prefixed(property, value)
Sass/LESS mixin should be used for browser prefixing instead. See Using Sass/LESS for Development and [Using LESS for Development].
Using Sass/LESS for Development
Sass/LESS are non-essential but can speed up development. Preprocess Sass/LESS with your favourite software or the environment provided via Grunt .
Sass/LESS is used in the Hover.css project to separate various CSS into specific files. Each effect is within its own file in the effects
directory. Hover.css also uses the following .scss
and .less
files:
_hacks
Contains hacks (undesirable but usually necessary lines of code) applied to certain effects. Hacks explained here .
_mixins
Contains prefixed
and keyframes
mixins that apply the necessary prefixes you specify in _options.scss
/ _options.less
to properties and keyframes.
Properties can be prefixed like so:
- Sass:
@include prefixed(transition-duration, .3s);
- LESS:
.prefixed(transition-duration, .3s);
The prefixed
mixin is passed the property you want to prefix, followed by its value.
Keyframes can be prefixed like so:
- Sass:
@include keyframes(my-animation) {
to {
color: red;
}
}
The keyframes
mixin is passed the keyframe name, followed by the content using the @content directive.
- LESS:
.keyframes(my-animation, {
to {
color: red;
}
});
The keyframes
mixin is passed the keyframe name, followed by the content, both as arguments.
_options
Contains default options, various effect options and the browser prefixes you'd like to use with the prefixed
mixin. By default, only the -webkit-
prefix is set to true
(due to most browsers not requiring prefixes now).
As of 2.0.0
, _options
also includes a $nameSpace
/ @nameSpace
option which allows you to change the name all classes are prefixed with. The default namespace is hvr
.
The $includeClasses
/ @includeClasses
option by default is set to true
and will generate all Hover.css effects under their own class names, hvr-grow
for example. Should you wish to add the properties that make up Hover.css effects to your own class names, set this option to false
.
Contribute to Hover.css
If you'd like to contribute your own effects, please see the Contributing Guide .
Licenses
Commercial License
If you want to use Hover.css to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Purchase a Hover.css Commercial License at https://site.uplabs.com/posts/hover-css-a-collection-of-css3-hover-effects
Open-Source License
If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use this project under the terms of the GPLv3.
Hire Ian Lunn
Ian Lunn is a Freelance Front-end Developer and author of CSS3 Foundations .
Hire Ian for responsive websites, WordPress websites, JavaScript, animation, and optimization.
相关链接
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论