-
Notifications
You must be signed in to change notification settings - Fork 27
/
Copy pathhover.html
132 lines (132 loc) · 8.72 KB
/
hover.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3 hover</title>
<link rel="stylesheet"type="text/css" href="./build/css/hover.min.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/./css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<a href="https://github.com/yaochuxia/hover" target="_blank" class="github-corner">
<svg width="50" height="50" viewBox="0 0 250 250" style="fill:#E1E1E1; color:#000; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg>
</a>
<div class="warp">
<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_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_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>Wayra</h2>
<a href="#" class="hvr_border_thick">Open Project</a>
<!-- <a href="#" class="hvr_border_pipaluk"><span>Open</span></a>
--> <h2>Border Transitions</h2>
<a href="#" class="hvr_border_fade">Border Fade</a>
<a href="#" class="hvr_border_hollow">Hollow</a>
<a href="#" class="hvr_border_trim">Trim</a>
<a href="#" class="hvr_border_ripple_out">Ripple Out</a>
<a href="#" class="hvr_border_ripple_in">Ripple In</a>
<a href="#" class="hvr_border_outline_out">Outline Out</a>
<a href="#" class="hvr_border_outline_in">Outline In</a>
<a href="#" class="hvr_border_round_corners">Round Corners</a>
<a href="#" class="hvr_border_underline_from_left">Underline From Left</a>
<a href="#" class="hvr_border_underline_from_center">Underline From Center</a>
<a href="#" class="hvr_border_underline_from_right">Underline From Right</a>
<a href="#" class="hvr_border_reveal">Reveal</a>
<a href="#" class="hvr_border_underline_reveal">Underline Reveal</a>
<a href="#" class="hvr_border_overline_reveal">Overline Reveal</a>
<a href="#" class="hvr_border_overline_from_left">Overline From Left</a>
<a href="#" class="hvr_border_overline_from_center">Overline From Center</a>
<a href="#" class="hvr_border_overline_from_right">Overline From Right</a>
<h2>Icons</h2>
<a href="#" class="hvr_icon_back">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>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_qutset">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>
</div>
</body>
</html>