使用CSS3实现超炫的Loading（加载）动画效果_html/css_WEB-ITnose
SpinKit 是一套网页动画效果，包含8种基于 CSS3 实现的很炫的加载动画。借助 CSS3 Animation 的强大功能来创建平滑，易于定制的动画。SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案，而是给现代浏览器提供更优的技术实现方案和更佳的使用体验。（为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览）
Loading 动画效果一
HTML 代码：
1
2
3
4
5
6
7
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 动画效果二
HTML 代码：
1
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
.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
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 代码：
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
.spinner {
margin : 100px auto ;
width : 32px ;
height : 32px ;
position : relative ;
}
.cube 1 , .cube 2 {
background-color : #67CF22 ;
width : 30px ;
height : 30px ;
position : absolute ;
top : 0 ;
left : 0 ;
-webkit-animation: cubemove 1.8 s infinite ease-in-out;
animation: cubemove 1.8 s infinite ease-in-out;
}
.cube 2 {
-webkit-animation-delay: -0.9 s;
animation-delay: -0.9 s;
}
@-webkit-keyframes cubemove {
25% { -webkit-transform: translateX( 42px ) rotate( -90 deg) scale( 0.5 ) }
50% { -webkit-transform: translateX( 42px ) translateY( 42px ) rotate( -180 deg) }
75% { -webkit-transform: translateX( 0px ) translateY( 42px ) rotate( -270 deg) scale( 0.5 ) }
100% { -webkit-transform: rotate( -360 deg) }
}
@keyframes cubemove {
25% {
transform: translateX( 42px ) rotate( -90 deg) scale( 0.5 );
-webkit-transform: translateX( 42px ) rotate( -90 deg) scale( 0.5 );
} 50% {
transform: translateX( 42px ) translateY( 42px ) rotate( -179 deg);
-webkit-transform: translateX( 42px ) translateY( 42px ) rotate( -179 deg);
} 50.1% {
transform: translateX( 42px ) translateY( 42px ) rotate( -180 deg);
-webkit-transform: translateX( 42px ) translateY( 42px ) rotate( -180 deg);
} 75% {
transform: translateX( 0px ) translateY( 42px ) rotate( -270 deg) scale( 0.5 );
-webkit-transform: translateX( 0px ) translateY( 42px ) rotate( -270 deg) scale( 0.5 );
} 100% {
transform: rotate( -360 deg);
-webkit-transform: rotate( -360 deg);
}
}
Loading 动画效果五
HTML 代码：
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
.spinner {
margin : 100px auto ;
width : 90px ;
height : 90px ;
position : relative ;
text-align : center ;
-webkit-animation: rotate 2.0 s infinite linear;
animation: rotate 2.0 s infinite linear;
}
.dot 1 , .dot 2 {
width : 60% ;
height : 60% ;
display : inline- block ;
position : absolute ;
top : 0 ;
background-color : #67CF22 ;
border-radius: 100% ;
-webkit-animation: bounce 2.0 s infinite ease-in-out;
animation: bounce 2.0 s infinite ease-in-out;
}
.dot 2 {
top : auto ;
bottom : 0px ;
-webkit-animation-delay: -1.0 s;
animation-delay: -1.0 s;
}
@-webkit-keyframes rotate { 100% { -webkit-transform: rotate( 360 deg) }}
@keyframes rotate { 100% { transform: rotate( 360 deg); -webkit-transform: rotate( 360 deg) }}
@-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 代码：
1
2
3
4
5
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
.spinner {
margin : 100px auto 0 ;
width : 150px ;
text-align : center ;
}
.spinner > div {
width : 30px ;
height : 30px ;
background-color : #67CF22 ;
border-radius: 100% ;
display : inline- block ;
-webkit-animation: bouncedelay 1.4 s infinite ease-in-out;
animation: bouncedelay 1.4 s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both ;
animation-fill-mode: both ;
}
.spinner .bounce 1 {
-webkit-animation-delay: -0.32 s;
animation-delay: -0.32 s;
}
.spinner .bounce 2 {
-webkit-animation-delay: -0.16 s;
animation-delay: -0.16 s;
}
@-webkit-keyframes bouncedelay {
0% , 80% , 100% { -webkit-transform: scale( 0.0 ) }
40% { -webkit-transform: scale( 1.0 ) }
}
@keyframes bouncedelay {
0% , 80% , 100% {
transform: scale( 0.0 );
-webkit-transform: scale( 0.0 );
} 40% {
transform: scale( 1.0 );
-webkit-transform: scale( 1.0 );
}
}
Loading 动画效果七
HTML 代码：
1
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
.spinner {
width : 40px ;
height : 40px ;
margin : 100px auto ;
background-color : #333 ;
border-radius: 100% ;
-webkit-animation: scaleout 1.0 s infinite ease-in-out;
animation: scaleout 1.0 s infinite ease-in-out;
}
@-webkit-keyframes scaleout {
0% { -webkit-transform: scale( 0.0 ) }
100% {
-webkit-transform: scale( 1.0 );
opacity: 0 ;
}
}
@keyframes scaleout {
0% {
transform: scale( 0.0 );
-webkit-transform: scale( 0.0 );
} 100% {
transform: scale( 1.0 );
-webkit-transform: scale( 1.0 );
opacity: 0 ;
}
}
Loading 动画效果八
HTML 代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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
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
.spinner {
margin : 100px auto ;
width : 20px ;
height : 20px ;
position : relative ;
}
.container 1 > div, .container 2 > div, .container 3 > div {
width : 6px ;
height : 6px ;
background-color : #333 ;
border-radius: 100% ;
position : absolute ;
-webkit-animation: bouncedelay 1.2 s infinite ease-in-out;
animation: bouncedelay 1.2 s infinite ease-in-out;
-webkit-animation-fill-mode: both ;
animation-fill-mode: both ;
}
.spinner .spinner-container {
position : absolute ;
width : 100% ;
height : 100% ;
}
.container 2 {
-webkit-transform: rotateZ( 45 deg);
transform: rotateZ( 45 deg);
}
.container 3 {
-webkit-transform: rotateZ( 90 deg);
transform: rotateZ( 90 deg);
}
.circle 1 { top : 0 ; left : 0 ; }
.circle 2 { top : 0 ; right : 0 ; }
.circle 3 { right : 0 ; bottom : 0 ; }
.circle 4 { left : 0 ; bottom : 0 ; }
.container 2 .circle 1 {
-webkit-animation-delay: -1.1 s;
animation-delay: -1.1 s;
}
.container 3 .circle 1 {
-webkit-animation-delay: -1.0 s;
animation-delay: -1.0 s;
}
.container 1 .circle 2 {
-webkit-animation-delay: -0.9 s;
animation-delay: -0.9 s;
}
.container 2 .circle 2 {
-webkit-animation-delay: -0.8 s;
animation-delay: -0.8 s;
}
.container 3 .circle 2 {
-webkit-animation-delay: -0.7 s;
animation-delay: -0.7 s;
}
.container 1 .circle 3 {
-webkit-animation-delay: -0.6 s;
animation-delay: -0.6 s;
}
.container 2 .circle 3 {
-webkit-animation-delay: -0.5 s;
animation-delay: -0.5 s;
}
.container 3 .circle 3 {
-webkit-animation-delay: -0.4 s;
animation-delay: -0.4 s;
}
.container 1 .circle 4 {
-webkit-animation-delay: -0.3 s;
animation-delay: -0.3 s;
}
.container 2 .circle 4 {
-webkit-animation-delay: -0.2 s;
animation-delay: -0.2 s;
}
.container 3 .circle 4 {
-webkit-animation-delay: -0.1 s;
animation-delay: -0.1 s;
}
@-webkit-keyframes bouncedelay {
0% , 80% , 100% { -webkit-transform: scale( 0.0 ) }
40% { -webkit-transform: scale( 1.0 ) }
}
@keyframes bouncedelay {
0% , 80% , 100% {
transform: scale( 0.0 );
-webkit-transform: scale( 0.0 );
} 40% {
transform: scale( 1.0 );
-webkit-transform: scale( 1.0 );
}
}
完整源码下载
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
用户遭遇罕见故障 三星 Watch 智能手表突现白屏问题
Apr 03, 2024 am 08:13 AM
你可能遇到过智能手机屏幕出现绿色线条的问题，即使没见过，也一定在网络上看到过相关图片。那么，智能手表屏幕变白的情况你遇见过吗？4月2日，CNMO从外媒了解到，一名Reddit用户在社交平台上分享了一张图片，展示了三星Watch系列智能手表屏幕变白的情况。该用户写道："我离开时正在充电，回来时就这样了，我尝试重启，但重启过程中屏幕还是这样。"三星Watch智能手表屏幕变白这位Reddit用户并未指明这款智能手表的具体型号。不过，从图片上看，应该是三星Watch5。此前，另一位Reddit用户也报告
![动画不工作在PowerPoint中[修复]](https://img.php.cn/upload/article/000/887/227/170831232982910.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
动画不工作在PowerPoint中[修复]
Feb 19, 2024 am 11:12 AM
您是否正在尝试制作演示文稿，但无法添加动画？如果动画在你的WindowsPC上的PowerPoint中不起作用，那么这篇文章将会帮助你。这是一个常见的问题，许多人都在抱怨。例如，在Microsoft团队中演示或在屏幕录制期间，动画可能会停止工作。在本指南中，我们将探索各种故障排除技术，以帮助您修复在Windows上的PowerPoint中无法运行的动画。为什么我的PowerPoint动画不起作用？我们注意到可能导致Windows上PowerPoint中的动画无法工作问题的一些可能原因如下：由于个
![在Illustrator中加载插件时出错[修复]](https://img.php.cn/upload/article/000/465/014/170831522770626.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
在Illustrator中加载插件时出错[修复]
Feb 19, 2024 pm 12:00 PM
启动AdobeIllustrator时是否会弹出加载插件时出错的消息？一些Illustrator用户在打开该应用程序时遇到了此错误。消息后面紧跟着一系列有问题的插件。该错误提示表明已安装的插件存在问题，但也可能是由于VisualC++DLL文件损坏或首选项文件受损等其他原因引起。如果遇到此错误，我们将在本文中指导您修复问题，请继续阅读以下内容。在Illustrator中加载插件时出错如果您在尝试启动AdobeIllustrator时收到“加载插件时出错”的错误消息，您可以使用以下用途：以管理员身
九州风神阿萨辛 4S 散热器评测 风冷'刺客大师”范儿
Mar 28, 2024 am 11:11 AM
说起阿萨辛ASSASSIN，相信玩家们一定会想到《刺客信条》中的各位刺客大师，不仅身手了得，而且"躬身于黑暗、服务于光明"的信条，与国内知名机箱/电源/散热器品牌九州风神（DeepCool）旗下的阿萨辛ASSASSIN系列旗舰级风冷散热器不谋而合。最近，该系列的最新产品阿萨辛ASSASSIN4S重磅上线，"西装刺客，再进阶"为高级玩家带来全新的风冷散热体验。外观一览细节满满阿萨辛4S散热器采用双塔构造+单风扇内嵌设计，外面包覆立方体造型的整流罩，整体感极强，并提供白、黑两种配色可选，满足不同色系
Stremio字幕不工作；加载字幕时出错
Feb 24, 2024 am 09:50 AM
字幕在你的WindowsPC上不能在Stremio上运行吗？一些Stremio用户报告说，视频中没有显示字幕。许多用户报告说遇到了一条错误消息，上面写着“加载字幕时出错”。以下是与此错误一起显示的完整错误消息：加载字幕时出错加载字幕失败：这可能是您正在使用的插件或您的网络有问题。正如错误消息所说，可能是您的互联网连接导致了错误。因此，请检查您的网络连接，并确保您的互联网工作正常。除此之外，这个错误的背后可能还有其他原因，包括字幕加载项冲突、特定视频内容不支持字幕以及Stremio应用程序过时。如
轻松拿捏 4K 高清图像理解！这个多模态大模型自动分析网页海报内容，打工人简直不要太方便
Apr 23, 2024 am 08:04 AM
一个可以自动分析PDF、网页、海报、Excel图表内容的大模型，对于打工人来说简直不要太方便。上海AILab，香港中文大学等研究机构提出的InternLM-XComposer2-4KHD（简写为IXC2-4KHD）模型让这成为了现实。相比于其他多模态大模型不超过1500x1500的分辨率限制，该工作将多模态大模型的最大输入图像提升到超过4K（3840x1600）分辨率，并支持任意长宽比和336像素～4K动态分辨率变化。发布三天，该模型就登顶HuggingFace视觉问答模型热度榜单第一。轻松拿捏
航嘉 MX750P 全模组电源评测：750W 的白金实力浓缩
Mar 28, 2024 pm 03:20 PM
ITX平台以小巧的身形吸引了不少追求极致和独特美感的玩家，随着制程的提升和技术的进步，英特尔第14代酷睿和RTX40系显卡都可以在ITX平台中发挥实力，游戏玩家也对SFX电源有了更高的要求。游戏爱好者航嘉推出新的MX系列电源，在满足高性能需求的ITX平台中，MX750P全模组电源的定额功率高达750W，同时通过了80PLUS白金级认证。以下我们就带来这款电源的评测。航嘉MX750P全模组电源采用了简约时尚的设计理念，共有黑白两款供玩家选择，均采用磨砂表面处理，搭配银灰色和红色的字体有很好的质感，
跳票 2 年，国产 3D 动画电影《二郎神之深海蛟龙》定档 7 月 13 日
Jan 26, 2024 am 09:42 AM
本站1月26日消息，国产3D动画电影《二郎神之深海蛟龙》发布一组最新剧照，正式宣布将于7月13日上映。据了解，《二郎神之深海蛟龙》是由迷狐星（北京）动漫有限公司、霍尔果斯众合千澄影业有限公司、浙江横店影业有限公司、浙江共赢影业有限公司、成都天火科技有限公司、华文映像（北京）影业有限公司出品，王君执导的动画电影，原定2022年7月22日在中国大陆上映。本站剧情简介：封神之战后，姜子牙携“封神榜”分封诸神，而后封神榜被天庭密封于九州秘境深海之下。事实上，除了分封神位，封神榜中还封缄着众多强大的妖邪元
