forked from Chuyue0/javascript-demo
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcss3_loading.html
47 lines (45 loc) · 1.83 KB
/
css3_loading.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>css 加载动画效果</title>
<style type="text/css">
.wrap { width: 64px; height: 64px; position: relative; }
.inner, .inner2 { position: absolute; width: 38px; height: 38px; border-radius: 40px; overflow: hidden; left: 13px; top: 13px; }
.inner { opacity: 1; background-color: #89abdd; animation: second-half-hide 1.6s steps(1, end) infinite; }
.inner2 { opacity: 0; background-color: #4b86db; animation: second-half-show 1.6s steps(1, end) infinite; }
.spiner, .filler, .masker { position: absolute; width: 50%; height: 100%; }
.spiner { border-radius: 40px 0 0 40px; background-color: #4b86db; transform-origin: right center; animation: spin 800ms infinite linear; left: 0; top: 0; }
.filler { border-radius: 0 40px 40px 0; background-color: #4b86db; animation: second-half-hide 800ms steps(1, end) infinite; left: 50%; top: 0; opacity: 1; }
.masker { border-radius: 40px 0 0 40px; background-color: #89abdd; animation: second-half-show 800ms steps(1, end) infinite; left: 0; top: 0; opacity: 0; }
.inner2 .spiner, .inner2 .filler { background-color: #89abdd; }
.inner2 .masker { background-color: #4b86db; }
@keyframes spin {
0% { transform: rotate(360deg); }
100% { transform: rotate(0deg); }
}
@keyframes second-half-hide {
0% { opacity: 1; }
50%, 100% { opacity: 0; }
}
@keyframes second-half-show {
0% { opacity: 0; }
50%, 100% { opacity: 1; }
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
<div class="spiner"></div>
<div class="filler"></div>
<div class="masker"></div>
</div>
<div class="inner2">
<div class="spiner"></div>
<div class="filler"></div>
<div class="masker"></div>
</div>
</div>
</body>
</html>