Hover

CSS3鼠标移到元素上面的动画效果,可运用在超链接、按钮、logo、SVG、图片等等。能够很方便地使用在你自己的元素上,支持 CSS、Sass、LESS
2019-03-12 我要评论 13 我要收藏

Hover.css

Join the chat at https://gitter.im/IanLunn/Hover

Hover.css 是一个 CSS3 的鼠标悬停效果集合,可用于超链接,按钮,logo,SVG,推荐图片等等。能够很简单地运用到我们的元素中。 格式有 CSS, Sass, 和 LESS。

Demo | 教程

下载/安装

  • NPM: npm install --save hover.css
  • Bower: bower install Hover
  • 下载 Zip

如何使用

Hover.css 的使用方式有很多种,复制你想运用到元素中的效果并粘贴到你自己的样式文件中,或者直接引用该文件。然后只需要将指定的样式名添加到元素中即可。

A. 复制粘贴一个效果

如果你知准备使用其中的一个或几个效果,最好的做法是将这些效果复制到你自己的样式中去,所以一个用户不必完整下载css/hover.css 文件。

假设你想使用 Grow 效果:

1.下载 Hover.css

  1. css/hover.css 中,找到 Grow 样式(每个效果上面都有一个评论):

    /* 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);
    }
  2. 复制这个效果然后粘贴到你自己的样式中。
  3. 在你想运用效果的 HTML 文件中,将 .hvr-grow 样式添加到你选择的元素上。

运用 Hover.css 效果之前的元素:

<a href="#">Add to Basket</a>

运用 Hover.css 效果之后的元素:

<a href="#" class="hvr-grow">Add to Basket</a>

注意: 截至 2.0.0 版本,所有的 Hover.css 样式名都是以 hvr- 为前缀的,这样做是为了避免和其它库/样式冲突。如果使用了 Sass/LESS,就能在 scss/_options.scssless/_options.less 文件中通过改变$nameSpace/@nameSpace 轻易改变 Hover.css 的前缀。

B. 引用 Hover.css

如果你打算使用 Hover.css 中的很多效果,你可能想引用整个 Hover.css 样式文件。

  1. 下载 hover-min.css
  2. hover-min.css 添加到你的项目的文件夹中,比如放到 css 文件夹下。
  3. 在你想运用 Hover.css 的 HMTL 页面中的 <head> 中引用 hover-min.css
    <head>
    <link href="css/hover-min.css" rel="stylesheet">
    </head>

    除此之外,你也可以将 Hover.css 引用到一个已经存在的样式文件中(这在 WordPress 用户不能编辑 HTML 的情况下是很有用的):

    @import url("hover-min.css");
  4. 假如你想使用 Grow 效果,在 HTML 文件中将 .hvr-grow 样式添加到你选择的元素上。

运用 Hover.css 效果之前的元素:

<a href="#" class="button">Add to Basket</a>

运用 Hover.css 效果之前的元素:

<a href="#" class="button hvr-grow">Add to Basket</a>

A Note on the display 属性

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.

使用 FontAwesome 图标效果

Hover.css 使用 FontAwesome 作为它的图标效果。要让这些效果生效,必须将 FontAwesome 的样式文件引用到你的 web 页面中的 <head></head> 中:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">

Hover.css 图标是通过 :before 伪元素添加到元素上的。让我们以 Icon Forward 效果为例(为了简洁起见,浏览器前缀和附加的样式都移除了):

.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;
}

上面例子中重要的是 font-familycontent 声明。font-family: FontAwesome 告诉浏览器我们想在这个伪元素中使用 FontAwesome 图标,而 content 则是告诉要使用哪一个图标。想更换图标和 content 属性值吗? 在这里能找到 FontAwesome 图标和值的完整列表

如果你不想修改 Hover.css,你可以简单地再次通过同样的声明来覆盖默认的 content 值:

.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).

包含什么?

Hover 项目包含了如下的文件夹和文件:

css

  • demo-page.css - 包含了演示 Hover 的样式,不需要引用到你的项目中。
  • hover-min.css - Hover.css 的压缩 / 生产版本的。
  • hover.css - Hover.css 的开发版本。

scss/less

  • effects - 包含每个独立的效果,整理在分类文件夹下。
  • _hacks.scss/_hacks.less, _mixins.scss/_mixins.less, _options.scss/_options.less - Sass/LESS Utilities
  • hover.scss/hover.less - Hover.css 的 Sass 和 LESS 的开发版本。

其它

其他文件包括:

浏览器支持

Hover.css 的很多效果都依赖于 CSS3 的特性,比如 过渡,动画,变换 和 伪元素,因为这个原因,这些效果在老的浏览器中不能完全工作。

除了上面提到的浏览器,所有主流浏览器都支持 Hover.css 。请查看 caniuse.com 获取很多 web 技术的完整支持及测试你的 web 页面。

推荐为老的浏览器应用兼容效果,使用这些浏览器支持的 CSS,或者功能测试库比如 Modernizr

使用 Grunt 做开发

Grunt 不是必须的,但是可以提高开发效率。安装 完 Grunt 后,在命令行中运行 grunt 来搭建开发服务器,然后访问 http://127.0.0.1:8000/。启动 Grunt 后,Sass 或 LESS 将会被预处理(取决于你是否用到了 scssless 文件夹)CSS文件将被压缩。

注意: 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].

使用 Sass/LESS 做开发

Sass/LESS 不是必须的,但是可以提高开发效率。用你喜欢的软件或 Grunt 提供的环境处理 Sass/LESS 。

Sass/LESS 在 Hover.css 项目中被用来分离不同的 CSS 到特定的文件中。每个效果都在 effects 文件夹下的自己的文件中。Hover.css 同样用到了下面的 .scss.less 文件:

_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.

为 Hover.css 做贡献

如果你想贡献自己的效果,请查看 贡献指南

许可

Hover.css 是开源的,在 MIT License 下许可。

在个人及商业项目中,分配,使用,或修改您的喜好。请保留 readme 和许可文件。

css/hover.css顶部保留作者信息 and placing it on your credits page or humans.txt is much appreciated

雇佣 Ian Lunn

Ian Lunn 是一个自由职业者,前端开发工程师和 CSS3 Foundations 的作者。

雇佣 Ian 做响应式网站,WordPress 网站,JavaScript, 动画, 和优化。

支持将来的开发

为了支持 Hover.css 和 Ian Lunn 创建的其它项目的将来的开发,请考虑捐款。

你的捐款不是以营利为目的的(或啤酒!),而是让 lan 花更少的时间在客户项目想,花更多的时间在开源软件上。

谢谢!

比特币:

使用下面的地址为我们捐献比特币:

1KEbFvcXL8m6LogG2wjSUFz2xH6PeN6jRd

Hover 相关推荐
对于该库,你有要推荐的内容么?点此提交推荐
请文明评论,与人为善,比聪明更重要!
评论