-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo-hover.html
131 lines (127 loc) · 5.25 KB
/
demo-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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hover</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="ec-css-hover.css">
<style>
.hover-box{
max-width: 1200px;
margin: 20px auto;
}
.hover-box p{
line-height: 50px;
}
.hover-box span{
cursor: pointer;
height: 40px;
line-height: 40px;
text-align: center;
display: inline-block;
color: #333;
background: #ccc;
min-width: 80px;
padding: 0 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="hover-box">
<p>鼠标效果 简单动画(hover effect)</p>
<span class="ech-rectangle">rectangle</span>
<span class="ech-radius">radius</span>
<span class="ech-border">border</span>
<span class="ech-border-in">border-in</span>
<span class="ech-big">big</span>
<span class="ech-small">small</span>
<span class="ech-shadow">shadow</span>
<span class="ech-shadow-in">shadow-in</span>
<span class="ech-shadow-white">shadow-white</span>
<span class="ech-shadow-big">shadow-big</span>
<span class="ech-fade-out">fade-out</span>
<span class="ech-t">up</span>
<span class="ech-b">bottom</span>
<span class="ech-l">left</span>
<span class="ech-r">right</span>
<span class="ech-grow-rotate-l">grow-rotate-l</span>
<span class="ech-grow-rotate-r">grow-rotate-r</span>
<span class="ech-rotate5">rotate5</span>
<span class="ech-rotate15">rotate15</span>
<span class="ech-rotate30">rotate30</span>
<span class="ech-rotate60">rotate60</span>
<span class="ech-rotate90">rotate90</span>
<span class="ech-rotate180">rotate180</span>
<span class="ech-rotate360">rotate360</span>
<span class="ech-rotate-5">rotate-5</span>
<span class="ech-rotate-15">rotate-15</span>
<span class="ech-rotate-30">rotate-30</span>
<span class="ech-rotate-60">rotate-60</span>
<span class="ech-rotate-90">rotate-90</span>
<span class="ech-rotate-180">rotate-180</span>
<span class="ech-skew-l">skew-l</span>
<span class="ech-skew-r">skew-r</span>
<span class="ech-skew-l-t">skew-l-t</span>
<span class="ech-skew-r-t">skew-r-t</span>
<span class="ech-skew-l-b">skew-l-b</span>
<span class="ech-skew-r-b">skew-r-b</span>
</div>
<div class="hover-box">
<p>鼠标颜色效果(主要利用:after :before实现)</p>
<span class="ech-fade">fade</span>
<span class="ech-fade-t">fade-t</span>
<span class="ech-fade-b">fade-b</span>
<span class="ech-fade-l">fade-l</span>
<span class="ech-fade-r">fade-r</span>
<span class="ech-bounce-t">bounce-t</span>
<span class="ech-bounce-b">bounce-b</span>
<span class="ech-bounce-l">bounce-l</span>
<span class="ech-bounce-r">bounce-r</span>
<span class="ech-fade-c-out">fade-c-out</span>
<span class="ech-fade-c-in">fade-c-in</span>
<span class="ech-fade-m-out">fade-m-out</span>
<span class="ech-fade-m-in">fade-m-in</span>
<span class="ech-overline-l">overline-l</span>
<span class="ech-overline-r">overline-r</span>
<span class="ech-underline-l">underline-l</span>
<span class="ech-underline-r">underline-r</span>
<span class="ech-underline-c">underline-c</span>
<span class="ech-underline-c-out">underline-c-out</span>
<span class="ech-overline-c">overline-c</span>
<span class="ech-overline-c-out">overline-c-out</span>
</div>
<div class="hover-box">
<p>鼠标效果 较复杂动画(hover effect)</p>
<span class="ech-shake-time">shake-time</span>
<span class="ech-bounce">bounce</span>
<span class="ech-wobble">wobble</span>
<span class="ech-swing">swing</span>
<span class="ech-shake">shake</span>
<span class="ech-flash">flash</span>
<span class="ech-wobble-c">wobble-c</span>
<span class="ech-wobble-t">wobble-t</span>
<span class="ech-wobble-b">wobble-b</span>
</div>
<div class="hover-box">
<p>鼠标效果 较复杂动画-无限执行(hover effect)</p>
<span class="ech-pulse">pulse</span>
<span class="ech-pulse-shrink">pulse-shrink</span>
<span class="ech-swing ech-infinite">swing-infinite</span>
<span class="ech-shake-time ech-infinite">shake-time-infinite</span>
<span class="ech-shake ech-infinite">shake-infinite</span>
<span class="ech-flash ech-infinite">flash-infinite</span>
</div>
<div class="hover-box">
<p>鼠标效果 箭头效果</p>
<span class="ech-arrow-l">arrow-l</span>
<span class="ech-arrow-r">arrow-r</span>
<span class="ech-arrow-t">arrow-t</span>
<span class="ech-arrow-b">arrow-b</span>
<span class="ech-arrow-l-move">arrow-l</span>
<span class="ech-arrow-r-move">arrow-r</span>
<span class="ech-arrow-t-move">arrow-t</span>
<span class="ech-arrow-b-move">arrow-b</span>
</div>
</body>
</html>