-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhover.html
More file actions
94 lines (85 loc) · 1.59 KB
/
hover.html
File metadata and controls
94 lines (85 loc) · 1.59 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello word</title>
<style>
.gap {
float: left;
margin: 10px 30px 10px 10px;
}
em {
color: red;
font-style: normal;
}
/*demo公共样式*/
.demo,
.demo * {
box-sizing: border-box;
}
.demo {
position: relative;
width: 220px;
height: 220px;
}
/*demo1: hover后旋转 + 透明度改变*/
.demo1 .spinner,
.demo1 .info {
border-radius: 50%;
-ms-transition: all .8s ease-in-out;
transition: all .8s ease-in-out; /*过渡*/
}
.demo1 .spinner {
width: 230px;
height: 230px;
border: 10px solid #ecab18;
border-right-color: #1ad280;
border-bottom-color: #1ad280;
}
.demo1 .info {
position: absolute;
top: 10px;
left: 10px;
width: 210px;
height: 210px;
line-height: 210px;
font-size: 34px;
text-align: center;
color: #fff;
background-color: rgba(0,0,0,.6);
opacity: 0;
}
.demo1 a:hover .spinner {
-ms-transform: rotate(180deg);
transform: rotate(180deg); /*旋转*/
}
.demo1 a:hover .info {
opacity: 1; /*透明度*/
}
</style>
</head>
<body>
<pre>
说明：
1. 代码兼容性：支持 CSS3 的现代浏览器（chrome、ie10+）
</pre>
<div class="gap">
<div class="demo demo1">
<a href="#">
<div class="spinner"></div>
<div class="info">Hello</div>
</a>
</div>
<pre>
知识点：
1、动画过渡：<em>transition</em>: all .8s ease-in-out;
（1）效果1-旋转：<em>transform</em>: rotate(180deg);
（2）效果2-透明度：<em>opacity</em>: 1;
2、辅助效果
（1）border
（2）border-redius
（3）box-sizing
</pre>
</div>
</body>
</html>