Skip to content

Commit 1ce72a7

Browse files
materialcodermaterialcoder
committed
CSS3饼状loading效果
1 parent 9d13a96 commit 1ce72a7

File tree

1 file changed

+142
-0
lines changed

1 file changed

+142
-0
lines changed

‎8 CSS3饼状loading效果/index.html

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>CSS3饼状loading效果</title>
6+
<style>
7+
* {
8+
margin: 0;
9+
padding: 0;
10+
}
11+
.container {
12+
width: 120px;
13+
height: 120px;
14+
position: absolute;
15+
top: 50%;
16+
left: 50%;
17+
margin-top: -60px;
18+
margin-left: -60px;
19+
transform: rotate(-45deg);
20+
}
21+
/* 四分之一圆弧 */
22+
.outer {
23+
width: 100px;
24+
height: 100px;
25+
border-radius: 50%;
26+
border: 2px solid #f00;
27+
border-top-color: transparent;
28+
position: absolute;
29+
top: 8px;
30+
left: 8px;
31+
animation: inner 1s infinite linear;
32+
}
33+
/* 底部整圆 */
34+
.inner,.inner2 {
35+
width: 80px;
36+
height: 80px;
37+
border-radius: 50%;
38+
position: absolute;
39+
top: 20px;
40+
left: 20px;
41+
}
42+
.inner {
43+
background-color: rgb(247,12,12);
44+
animation: hided 2s steps(1,end) infinite;
45+
}
46+
.inner2 {
47+
background-color: rgb(236,124,124);
48+
animation: showed 2s steps(1,end) infinite;
49+
}
50+
51+
/* 前半部分从浅色到深色 */
52+
/* 左边的二分之一圆 */
53+
.left-half {
54+
border-radius: 50%;
55+
position: absolute;
56+
top: 0px;
57+
left: 0px;
58+
border: 40px solid rgb(236,124,124);
59+
border-right-color: transparent;
60+
border-bottom-color: transparent;
61+
animation: inner 1s infinite linear;
62+
}
63+
/* 右边的二分之一圆 */
64+
.right-half {
65+
border-radius: 50%;
66+
position: absolute;
67+
top: 0px;
68+
left: 0px;
69+
border: 40px solid rgb(236,124,124);
70+
border-top-color: transparent;
71+
border-left-color: transparent;
72+
animation: hided 1s steps(1,end) infinite;
73+
}
74+
.left-half2 {
75+
border-radius: 50%;
76+
position: absolute;
77+
top: 0px;
78+
left: 0px;
79+
border: 40px solid rgb(247,12,12);
80+
border-right-color: transparent;
81+
border-bottom-color: transparent;
82+
animation: showed 1s steps(1,end) infinite;
83+
}
84+
85+
/* 从浅色到深色部分（后半部分） */
86+
.inner2 .left-half {
87+
border-color: rgb(247,12,12);
88+
border-right-color: transparent;
89+
border-bottom-color: transparent;
90+
}
91+
.inner2 .right-half {
92+
border-color: rgb(247,12,12);
93+
border-top-color: transparent;
94+
border-left-color: transparent;
95+
}
96+
.inner2 .left-half2 {
97+
border-color: rgb(236,124,124);
98+
border-right-color: transparent;
99+
border-bottom-color: transparent;
100+
}
101+
@keyframes inner {
102+
0% {
103+
transform: rotate(0deg);
104+
}
105+
100% {
106+
transform: rotate(-360deg);
107+
}
108+
}
109+
@keyframes showed {
110+
0% {
111+
opacity: 0;
112+
}
113+
50%,100% {
114+
opacity: 1;
115+
}
116+
}
117+
@keyframes hided {
118+
0% {
119+
opacity: 1;
120+
}
121+
50%, 100% {
122+
opacity: 0;
123+
}
124+
}
125+
</style>
126+
</head>
127+
<body>
128+
<div class="container">
129+
<div class="outer"></div>
130+
<div class="inner">
131+
<div class="left-half"></div>
132+
<div class="right-half"></div>
133+
<div class="left-half2"></div>
134+
</div>
135+
<div class="inner2">
136+
<div class="left-half"></div>
137+
<div class="right-half"></div>
138+
<div class="left-half2"></div>
139+
</div>
140+
</div>
141+
</body>
142+
</html>

0 commit comments

Comments
 (0)