使用 CSS3 實現超炫的 Loading（加載）動畫效果
SpinKit 是一套網頁動畫效果，包含8種基於 CSS3 實現的很炫的加載動畫。藉助 CSS3 Animation 的強大功能來建立平滑，易於定製的動畫。SpinKit 的目標不是提供一個每一個瀏覽器都兼容的解決方案，而是給現代瀏覽器提供更優的技術實現方案和更佳的使用體驗。（爲保證最佳的效果，請在 Chrome、Firefox 和 Safari 等現代瀏覽器中瀏覽）javascript
您可能感興趣的相關文章
Loading 動畫效果一css
HTML 代碼：html
|
1
2
3
4
5
6
7
|
<div
class
=
"spinner"
>
<div
class
=
"rect1"
></div>
<div
class
=
"rect2"
></div>
<div
class
=
"rect3"
></div>
<div
class
=
"rect4"
></div>
<div
class
=
"rect5"
></div>
</div>
|
CSS 代碼：前端
|
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
|
.spinner {
margin
:
100px
auto
;
width
:
50px
;
height
:
60px
;
text-align
:
center
;
font-size
:
10px
;
}
.spinner > div {
background-color
:
#67CF22
;
height
:
100%
;
width
:
6px
;
display
: inline-
block
;
-webkit-animation: stretchdelay
1.2
s infinite ease-in-out;
animation: stretchdelay
1.2
s infinite ease-in-out;
}
.spinner .rect
2
{
-webkit-animation-delay:
-1.1
s;
animation-delay:
-1.1
s;
}
.spinner .rect
3
{
-webkit-animation-delay:
-1.0
s;
animation-delay:
-1.0
s;
}
.spinner .rect
4
{
-webkit-animation-delay:
-0.9
s;
animation-delay:
-0.9
s;
}
.spinner .rect
5
{
-webkit-animation-delay:
-0.8
s;
animation-delay:
-0.8
s;
}
@-webkit-keyframes stretchdelay {
0%
,
40%
,
100%
{ -webkit-transform: scaleY(
0.4
) }
20%
{ -webkit-transform: scaleY(
1.0
) }
}
@keyframes stretchdelay {
0%
,
40%
,
100%
{
transform: scaleY(
0.4
);
-webkit-transform: scaleY(
0.4
);
}
20%
{
transform: scaleY(
1.0
);
-webkit-transform: scaleY(
1.0
);
}
}
|
Loading 動畫效果二java
HTML 代碼：css3
|
1
|
<div
class
=
"spinner"
></div>
|
CSS 代碼：web
|
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
|
.spinner {
width
:
60px
;
height
:
60px
;
background-color
:
#67CF22
;
margin
:
100px
auto
;
-webkit-animation: rotateplane
1.2
s infinite ease-in-out;
animation: rotateplane
1.2
s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
0%
{ -webkit-transform: perspective(
120px
) }
50%
{ -webkit-transform: perspective(
120px
) rotateY(
180
deg) }
100%
{ -webkit-transform: perspective(
120px
) rotateY(
180
deg) rotateX(
180
deg) }
}
@keyframes rotateplane {
0%
{
transform: perspective(
120px
) rotateX(
0
deg) rotateY(
0
deg);
-webkit-transform: perspective(
120px
) rotateX(
0
deg) rotateY(
0
deg)
}
50%
{
transform: perspective(
120px
) rotateX(
-180.1
deg) rotateY(
0
deg);
-webkit-transform: perspective(
120px
) rotateX(
-180.1
deg) rotateY(
0
deg)
}
100%
{
transform: perspective(
120px
) rotateX(
-180
deg) rotateY(
-179.9
deg);
-webkit-transform: perspective(
120px
) rotateX(
-180
deg) rotateY(
-179.9
deg);
}
}
|
Loading 動畫效果三瀏覽器
HTML 代碼：框架
|
1
2
3
4
|
<div
class
=
"spinner"
>
<div
class
=
"double-bounce1"
></div>
<div
class
=
"double-bounce2"
></div>
</div>
|
CSS 代碼：工具
|
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
|
.spinner {
width
:
60px
;
height
:
60px
;
position
:
relative
;
margin
:
100px
auto
;
}
.double-bounce
1
, .double-bounce
2
{
width
:
100%
;
height
:
100%
;
border-radius:
50%
;
background-color
:
#67CF22
;
opacity:
0.6
;
position
:
absolute
;
top
:
0
;
left
:
0
;
-webkit-animation: bounce
2.0
s infinite ease-in-out;
animation: bounce
2.0
s infinite ease-in-out;
}
.double-bounce
2
{
-webkit-animation-delay:
-1.0
s;
animation-delay:
-1.0
s;
}
@-webkit-keyframes bounce {
0%
,
100%
{ -webkit-transform: scale(
0.0
) }
50%
{ -webkit-transform: scale(
1.0
) }
}
@keyframes bounce {
0%
,
100%
{
transform: scale(
0.0
);
-webkit-transform: scale(
0.0
);
}
50%
{
transform: scale(
1.0
);
-webkit-transform: scale(
1.0
);
}
}
|
Loading 動畫效果四
HTML 代碼：
CSS 代碼：
Loading 動畫效果五
HTML 代碼：
CSS 代碼：
Loading 動畫效果六
HTML 代碼：
CSS 代碼：
Loading 動畫效果七
HTML 代碼：
CSS 代碼：
Loading 動畫效果八
HTML 代碼：
CSS 代碼：
相關文章
- 1. 使用 CSS3 實現超炫的 Loading（加載）動畫效果
- 2. CSS3 Loading（加載）動畫效果
- 3. 純css實現超炫的加載動畫效果
- 4. CSS3 實現loading動畫效果
- 5. CSS3 實現 loading 動畫效果
- 6. css3實現loading加載動畫
- 7. 30種CSS3炫酷頁面預加載loading動畫特效
- 8. 純css3 加載loading動畫特效
- 9. CSS3效果：animate實現點點點loading動畫效果（一）
- 10. css3效果： animate實現點點點loading動畫效果（一）
- 更多相關文章...
- • ionic 加載動畫 - ionic 教程
- • ionic 加載動作 - ionic 教程
- • ☆基於Java Instrument的Agent實現
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
