按钮图标

纯CSS3鼠标滑过特效动画库

阿里云


Hover.css 是一款效果很酷的纯 CSS3 鼠标滑过特效动画库。Hover.css 支持的元素包括超链接、按钮、logos、SVG 和图片等。当鼠标滑过元素时有背景颜色变化效果、图标变化效果、阴影、抖动、旋转、折角等 107 种特效。

使用方法

首先你需要将 hover.css 加入到 HTML 文档的头部。

也想出现在这里?联系我们
创客主机
  1. <link href="css/hover.css" rel="stylesheet" media="all">

现在假设你需要为一个按钮添加 hover 效果。

  1. <a href="#" class="button">Checkout</a>
  1. .button {
  2.     display: inline-block;
  3.     padding: 1em;
  4.     background-color: #79BD9A;
  5.     text-decoration: none;
  6.     color: white;
  7. }

现在你需要找到你效果要添加的鼠标滑过效果的 class 名称,然后将它加入到按钮的 class 中即可。

  1. <a href="#" class="button hvr-float">Checkout</a>

使用 FontAwesome 来制作图标动画效果,Hover.css 使用 FontAwesome 来制作它的图标效果。要使用这些图标,首先要引入 FontAwesome 文件。

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

Hover.css 的图标是通过元素的:before 伪元素添加到元素上的。下面是一个图标向前运动的例子(代码中没有添加浏览器前缀):

  1. .hvr-icon-forward:before {
  2.     content: "\f138";
  3.     position: absolute;
  4.     right: 1em;
  5.     padding: 0 1px;
  6.     font-family: FontAwesome;
  7.     transform: translateZ(0);
  8.     transition-duration: 0.1s;
  9.     transition-property: transform;
  10.     transition-timing-function: ease-out;
  11. }

上面的代码的关键点是 font-family 和 content 的声明。font-family: FontAwesome 告诉浏览器你想为伪元素使用 FontAwesome 字体,content 则表示是哪一个图标。所以,如果你想改变图标,就修改 content 中的内容。可以查看 FontAwesome 的所有图标参考来查找你需要的图标。如果你不想修改 Hover.css 文件,你可以通过覆盖的方法来实现图标的修改自定义一个 CSS 文件,在 Hover.css 文件之后引入,文件中添加要修改的内容:

  1. .hvr-icon-forward:before {
  2.     content: "\f001";
  3. }

深入了解 Hover.css 中的一些 hack 技术,所有的 hover.css 效果都使用一些不影响效果的 CSS 属性来制作,有时候你可能会需要去修改这些 CSS 属性,下面来看一下一些特殊的地方。

  1. display: inline-block

每一种效果要正常工作需要设置一个 dispaly 属性。默认情况下,Hover.css 将所有的元素都设置为 display: inline-block。你可以根据需要将它修改为 display: block 或 display: inline。如果你使用的元素已经有了 dispaly 属性,那么效果中的 display 不会覆盖你原有的 display。

  1. transform: translateZ(0)

transform: translateZ(0)是一个总所周知的“性能 hack”。它通常和 CSS3 transforms 一起使用来提高移动手机和平板的 transforms 效果。

  1. box-shadow: 0 0 1px rgba(0, 0, 0, 0)

当在移动手机和平板上观察 CSS3 transformed 效果时,边缘有时看起来有锯齿状或稍有不同的颜色。通过使用 box-shadow: 0 0 1px rgba(0, 0, 0, 0),可以为元素使用透明的阴影效果,这样会使边部看起来十分的平滑。更多的信息请参考:https://github.com/IanLunn/Hover

纯 CSS3 鼠标滑过特效动画库

已有 587 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!