CSS3 的鼠标悬停效果和动画 Hover

MIT
HTML/CSS 查看源码»
跨平台
2017-09-05
同一种调调

hover

CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮、LOGO 以及图片等元素。所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after 伪元素。因为使用了 CSS3 过渡、转换和动画效果,因此只支持 Chrome、Firefox 和 Safari 等现代浏览器。

使用

在 gulp 中使用

var gulp = require('gulp');
var stylus = require('gulp-stylus');
var watch = require('gulp-watch');
var nib = require('nib');
var rename = require('gulp-rename');

var autoprefixer = require('gulp-autoprefixer');
var browserslist = ['Android 2.3', 'Android >= 4', 'Chrome >= 20', 'Firefox >= 24', 'Explorer >= 8', 'iOS >= 6', 'Opera >= 12', 'Safari >= 6'];


    gulp.src('./style/hover.styl')
        .pipe(stylus({
            compress:true,
            use: nib()
        }))
        .pipe(rename('hover.min.css'))//重命命
        .pipe(gulp.dest('./build/css/'));//压缩到的文件夹

常规使用方法

直接在页面中引用./build/css/hover.min.css

<link rel="stylesheet" href="./build/css/hover.min.css">
<a href="#" class="hvr_pulse_grow">Pulse Grow</a>
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

发现一个jquery的hover在ie6、7下的bug

在IE7+及FF浏览器中,:hover伪类可以用于任何对象,但在IE5、IE6中,:hover伪类仅能用于a(超链接)对象,且该a对象必须要拥有href属性。所以这次为了要在ie6上也能正常显示hover效果,二话不...

2015/03/26 10:51
35
0
css3创建导航链接效果

css3创建导航链接效果 发布时间:2013-08-22编辑:杨青阅读(1009) 分享一些常用和创意的导航链接效果。例子中鼠标悬停使用伪元素和动画来创建一个微妙和有现代节奏感的链接效果。 注意,伪...

2015/01/27 14:02
9
0
非常棒的Eclipse插件---用于C、C++开发

The libhover plug-in for Eclipse provides plug-and-play hover help support for the GNU C Library and GNU C++ Standard Library. This allows developers to see existing documentati...

2014/10/16 16:46
27
0
纯css实现菜单激活状态切换

纯css实现菜单激活状态切换,当鼠标悬停菜单项时,原本激活状态的项变为普通状态,而鼠标悬停的项变为激活状态

2016/05/28 15:39
151
0
jquery增,删,改一个html标签的class名字

jquery增加,移除,修改一个html标签的class名字 一个标签可以指定多个class 1. 增加一个class: $(".default").addClass("hover_s"); 2. 移除一个class: $(".default").removeClass("defau...

2013/11/16 20:53
29
0
jquery CRUD一个元素class属性

jquery增加,移除,修改一个html标签的class名字 一个标签可以指定多个class 1. 增加一个class: $(".default").addClass("hover_s"); 2. 移除一个class: $(".default").removeClass("defau...

2016/04/05 22:23
4
1
鼠标hover和移出触发jQuery事件代码

当我们需要实现鼠标的移入和移出这两个触发事件时,通过jQuery代码动态去执行不同的代码,实现鼠标移入移出动作带来的不同效果。

2016/09/29 15:29
87
0
jQuery如何让鼠标经过菜单时显示子菜单并且鼠标经过子菜单时子菜单也显示

jQuery如何让鼠标经过菜单时显示子菜单并且鼠标经过子菜单时子菜单也显示 关键思路就是在父菜单栏的hover函数里再加入子菜单的hover函数 jq代码: $(function() { PopoutMenu("police_comput...

2016/08/26 22:55
8
0
上下无缝轮播

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body,ul,li,img{ margin: 0; padding: 0; } li{ list-style: none; } #box{ width: 500px; ...

07/14 08:14
2
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部