<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>纯CSS3鼠标滑过特效动画库Hover.css下载地址</title>
<link href="css/demo-page.css" rel="stylesheet" media="all">
<link href="css/hover.css" rel="stylesheet" media="all">
<link href="http://libs.useso.com/js/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<h1>Hover.css</h1>
<p class="intro">A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, SASS, and LESS.</p>
<div class="effects">
<h2>2D Transitions</h2>
<a href="#" class="hvr-grow">Grow</a>
<a href="#" class="hvr-shrink">Shrink</a>
<a href="#" class="hvr-pulse">Pulse</a>
<a href="#" class="hvr-pulse-grow">Pulse Grow</a>
<a href="#" class="hvr-pulse-shrink">Pulse Shrink</a>
<a href="#" class="hvr-push">Push</a>
<a href="#" class="hvr-pop">Pop</a>
<a href="#" class="hvr-bounce-in">Bounce In</a>
<a href="#" class="hvr-bounce-out">Bounce Out</a>
<a href="#" class="hvr-rotate">Rotate</a>
<a href="#" class="hvr-grow-rotate">Grow Rotate</a>
<a href="#" class="hvr-float">Float</a>
<a href="#" class="hvr-sink">Sink</a>
<a href="#" class="hvr-bob">Bob</a>
<a href="#" class="hvr-hang">Hang</a>
<a href="#" class="hvr-skew">Skew</a>
<a href="#" class="hvr-skew-forward">Skew Forward</a>
<a href="#" class="hvr-skew-backward">Skew Backward</a>
<a href="#" class="hvr-wobble-horizontal">Wobble Horizontal</a>
<a href="#" class="hvr-wobble-vertical">Wobble Vertical</a>
<a href="#" class="hvr-wobble-to-bottom-right">Wobble To Bottom Right</a>
<a href="#" class="hvr-wobble-to-top-right">Wobble To Top Right</a>
<a href="#" class="hvr-wobble-top">Wobble Top</a>
<a href="#" class="hvr-wobble-bottom">Wobble Bottom</a>
<a href="#" class="hvr-wobble-skew">Wobble Skew</a>
<a href="#" class="hvr-buzz">Buzz</a>
<a href="#" class="hvr-buzz-out">Buzz Out</a>
<h2>Background Transitions</h2>
<a href="#" class="hvr-fade">Fade</a>
<a href="#" class="hvr-sweep-to-right">Sweep To Right</a>
<a href="#" class="hvr-sweep-to-left">Sweep To Left</a>
<a href="#" class="hvr-sweep-to-bottom">Sweep To Bottom</a>
<a href="#" class="hvr-sweep-to-top">Sweep To Top</a>
<a href="#" class="hvr-bounce-to-right">Bounce To Right</a>
<a href="#" class="hvr-bounce-to-left">Bounce To Left</a>
<a href="#" class="hvr-bounce-to-bottom">Bounce To Bottom</a>
<a href="#" class="hvr-bounce-to-top">Bounce To Top</a>
<a href="#" class="hvr-radial-out">Radial Out</a>
<a href="#" class="hvr-radial-in">Radial In</a>
<a href="#" class="hvr-rectangle-in">Rectangle In</a>
<a href="#" class="hvr-rectangle-out">Rectangle Out</a>
<a href="#" class="hvr-shutter-in-horizontal">Shutter In Horizontal</a>
<a href="#" class="hvr-shutter-out-horizontal">Shutter Out Horizontal</a>
<a href="#" class="hvr-shutter-in-vertical">Shutter In Vertical</a>
<a href="#" class="hvr-shutter-out-vertical">Shutter Out Vertical</a>
<h2>Icons</h2>
<small>Font icons courtesy of <a href="https://fortawesome.github.io/Font-Awesome/">FontAwesome</a>. <a href="https://github.com/IanLunn/Hover/#using-fontawesome-with-icon-effects">How to use FontAwesome icons</a> with Hover.css.</small>
<a href="#" class="hvr-icon-back">Icon Back</a>
<a href="#" class="hvr-icon-forward">Icon Forward</a>
<a href="#" class="hvr-icon-down">Icon Down</a>
<a href="#" class="hvr-icon-up">Icon Up</a>
<a href="#" class="hvr-icon-spin">Icon Spin</a>
<a href="#" class="hvr-icon-drop">Icon Drop</a>
<a href="#" class="hvr-icon-fade">Icon Fade</a>
<a href="#" class="hvr-icon-float-away">Icon Float Away</a>
<a href="#" class="hvr-icon-sink-away">Icon Sink Away</a>
<a href="#" class="hvr-icon-grow">Icon Grow</a>
<a href="#" class="hvr-icon-shrink">Icon Shrink</a>
<a href="#" class="hvr-icon-pulse">Icon Pulse</a>
<a href="#" class="hvr-icon-pulse-grow">Icon Pulse Grow</a>
<a href="#" class="hvr-icon-pulse-shrink">Icon Pulse Shrink</a>
<a href="#" class="hvr-icon-push">Icon Push</a>
<a href="#" class="hvr-icon-pop">Icon Pop</a>
<a href="#" class="hvr-icon-bounce">Icon Bounce</a>
<a href="#" class="hvr-icon-rotate">Icon Rotate</a>
<a href="#" class="hvr-icon-grow-rotate">Icon Grow Rotate</a>
<a href="#" class="hvr-icon-float">Icon Float</a>
<a href="#" class="hvr-icon-sink">Icon Sink</a>
<a href="#" class="hvr-icon-bob">Icon Bob</a>
<a href="#" class="hvr-icon-hang">Icon Hang</a>
<a href="#" class="hvr-icon-wobble-horizontal">Icon Wobble Horizontal</a>
<a href="#" class="hvr-icon-wobble-vertical">Icon Wobble Vertical</a>
<a href="#" class="hvr-icon-buzz">Icon Buzz</a>
<a href="#" class="hvr-icon-buzz-out">Icon Buzz Out</a>
<h2>Border Transitions</h2>
<a href="#" class="hvr-border-fade">Border Fade</a>
<a href="#" class="hvr-hollow">Hollow</a>
<a href="#" class="hvr-trim">Trim</a>
<a href="#" class="hvr-ripple-out">Ripple Out</a>
<a href="#" class="hvr-ripple-in">Ripple In</a>
<a href="#" class="hvr-outline-out">Outline Out</a>
<a href="#" class="hvr-outline-in">Outline In</a>
<a href="#" class="hvr-round-corners">Round Corners</a>
<a href="#" class="hvr-underline-from-left">Underline From Left</a>
<a href="#" class="hvr-underline-from-center">Underline From Center</a>
<a href="#" class="hvr-underline-from-right">Underline From Right</a>
<a href="#" class="hvr-reveal">Reveal</a>
<a href="#" class="hvr-underline-reveal">Underline Reveal</a>
<a href="#" class="hvr-overline-reveal">Overline Reveal</a>
<a href="#" class="hvr-overline-from-left">Overline From Left</a>
<a href="#" class="hvr-overline-from-center">Overline From Center</a>
<a href="#" class="hvr-overline-from-right">Overline From Right</a>
<h2>Shadow and Glow Transitions</h2>
<a href="#" class="hvr-shadow">Shadow</a>
<a href="#" class="hvr-grow-shadow">Grow Shadow</a>
<a href="#" class="hvr-float-shadow">Float Shadow</a>
<a href="#" class="hvr-glow">Glow</a>
<a href="#" class="hvr-shadow-radial">Shadow Radial</a>
<a href="#" class="hvr-box-shadow-outset">Box Shadow Outset</a>
<a href="#" class="hvr-box-shadow-inset">Box Shadow Inset</a>
<h2>Speech Bubbles</h2>
<a href="#" class="hvr-bubble-top">Bubble Top</a>
<a href="#" class="hvr-bubble-right">Bubble Right</a>
<a href="#" class="hvr-bubble-bottom">Bubble Bottom</a>
<a href="#" class="hvr-bubble-left">Bubble Left</a>
<a href="#" class="hvr-bubble-float-top">Bubble Float Top</a>
<a href="#" class="hvr-bubble-float-right">Bubble Float Right</a>
<a href="#" class="hvr-bubble-float-bottom">Bubble Float Bottom</a>
<a href="#" class="hvr-bubble-float-left">Bubble Float Left</a>
<h2>Curls</h2>
<a href="#" class="hvr-curl-top-left">Curl Top Left</a>
<a href="#" class="hvr-curl-top-right">Curl Top Right</a>
<a href="#" class="hvr-curl-bottom-right">Curl Bottom Right</a>
<a href="#" class="hvr-curl-bottom-left">Curl Bottom Left</a>
</div>
<script>
var effects = document.querySelectorAll('.effects')[0];
effects.addEventListener('click', function(e) {
if (e.target.className.indexOf('hvr') > -1) {
e.preventDefault();
e.target.blur();
}
});
</script>
</body>
</html>
纯CSS3实现的鼠标滑过特效动画库Hover.css.zip （228个子文件） 
hover.css 122KB hover-min.css 101KB demo-page.css 4KB
index.html 8KB hover.less 11KB _icon-buzz-out.less 1KB _icon-hang.less 1KB _icon-bob.less 1KB _shadow-radial.less 965B _icon-wobble-horizontal.less 964B _buzz-out.less 960B _icon-wobble-vertical.less 956B _float-shadow.less 945B _options.less 930B _icon-drop.less 912B _outline-in.less 850B _hacks.less 810B _icon-push.less 808B _icon-pop.less 805B _curl-top-left.less 783B _mixins.less 771B _wobble-to-top-right.less 758B _hang.less 749B _bob.less 749B _icon-pulse-shrink.less 746B _icon-pulse-grow.less 739B _icon-bounce-out.less 738B _icon-sink-away.less 734B _icon-buzz.less 723B _wobble-to-bottom-right.less 715B _bounce-to-bottom.less 707B _icon-pulse.less 707B _bounce-to-left.less 706B _bounce-to-right.less 705B _bounce-to-top.less 704B _icon-float-away.less 701B _bubble-float-bottom.less 680B _bubble-float-right.less 676B _shutter-out-horizontal.less 675B _bubble-float-left.less 673B _shutter-in-horizontal.less 673B _bubble-float-top.less 671B _shutter-out-vertical.less 671B _wobble-horizontal.less 671B _shutter-in-vertical.less 669B _wobble-bottom.less 665B _wobble-vertical.less 663B _radial-out.less 655B _wobble-top.less 653B _radial-in.less 653B _icon-down.less 647B _curl-bottom-right.less 647B _curl-bottom-left.less 642B _curl-top-right.less 637B _icon-bounce.less 635B _sweep-to-bottom.less 635B _sweep-to-left.less 634B _sweep-to-right.less 633B _sweep-to-top.less 632B _outline-out.less 628B _rectangle-out.less 619B _wobble-skew.less 619B _icon-up.less 617B _rectangle-in.less 617B _icon-grow-rotate.less 600B _ripple-in.less 588B _icon-rotate.less 579B _ripple-out.less 578B _icon-grow.less 568B _icon-shrink.less 557B _reveal.less 552B _underline-reveal.less 551B _bubble-bottom.less 549B _overline-reveal.less 547B _bubble-left.less 546B _bubble-right.less 546B _bubble-top.less 543B _icon-float.less 541B _icon-forward.less 540B _icon-sink.less 538B _icon-back.less 533B _underline-from-center.less 513B _overline-from-center.less 508B _underline-from-right.less 490B _underline-from-left.less 490B _trim.less 489B _overline-from-right.less 485B _overline-from-left.less 485B _border-fade.less 482B _box-shadow-inset.less 443B _icon-spin.less 438B _buzz.less 430B _pulse-shrink.less 430B _pulse-grow.less 423B _icon-fade.less 419B _pulse.less 392B _push.less 381B _hollow.less 349B _pop.less 344B _grow-shadow.less 280B共 228 条
- 1
- 2
- 3
资源评论
易小侠
- 粉丝: 6598
- 资源: 9万+
