-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (118 loc) · 5.87 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,uesr-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<title>Hover.css</title>
<link rel="stylesheet" type="text/css" href="css/page.css">
<link rel="stylesheet" type="text/css" href="scss/hover.css">
</head>
<body>
<div class="main">
<header>
<h1>Hover CSS</h1>
<nav>
<a href="index.html#2d-transitions">2D Transitions</a>
<a href="index.html#background-transitions">Background Transitions</a>
<a href="index.html#border-transitions">Border Transitions</a>
<a href="index.html#shadow-and-glow-transitions">Shadow and Glow Transitions</a>
<a href="index.html#speech-bubbles">Speech Bubbles</a>
<a href="index.html#curls">Curls</a>
</nav>
</header>
<div id="effects" class="effects">
<h2><a name="2d-transitions">2D Transitions</a></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-pulseGrow">Pulse Grow</a>
<a href="#" class="hvr-pulseShrink">Pules Shrink</a>
<a href="#" class="hvr-push">Push</a>
<a href="#" class="hvr-pop">Pop</a>
<a href="#" class="hvr-bounceIn">Bounce In</a>
<a href="#" class="hvr-bounceOut">Bounce Out</a>
<a href="#" class="hvr-rotate">Rotate</a>
<a href="#" class="hvr-growRotate">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-skewForward">Skew Forward</a>
<a href="#" class="hvr-skewBackward">Skew Backward</a>
<a href="#" class="hvr-wobbleHorizontal">Wobble Horizontal</a>
<a href="#" class="hvr-wobbleVertical">Wobble Vertical</a>
<a href="#" class="hvr-wobbleToBottomRight">Wobble To Bottom Right</a>
<a href="#" class="hvr-wobbleToTopRight">Wobble To Top Right</a>
<a href="#" class="hvr-wobbleTop">Wobble Top</a>
<a href="#" class="hvr-wobbleBottom">Wobble Bottom</a>
<a href="#" class="hvr-wobbleSkew">Wobble Skew</a>
<a href="#" class="hvr-buzz">Buzz</a>
<a href="#" class="hvr-buzzOut">Buzz Out</a>
<a href="#" class="hvr-forward">Forward</a>
<a href="#" class="hvr-backward">Backward</a>
<h2><a name="background-transitions">Background Transitions</a></h2>
<a href="#" class="hvr-fade">Fade</a>
<a href="#" class="hvr-back-pulse">Back Pulse</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><a name="border-transitions">Border Transitions</a></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><a name="shadow-and-glow-transitions">Shadow and Glow Transitions</a></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><a name="speech-bubbles">Speech Bubbles</a></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><a name="curls">Curls</a></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>
</div>
<footer></footer>
</div>
</body>
</html>