更新日志:
[2019-10-30]
- 修复刚载入时,全部竖条由大变小的bug
- 添加对 Opera和 Foxfire的支持
- 添加一些有关CSS3动画兼容性的说明
- 修复一个scaleY倍数错误
[2019-10-30]
- 文章发布
说明:
-
效果图:
-
源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3-Loading</title>
<style type="text/css">
/*
横向 loading动画
-----------------------------------[ 一些前缀和说明 ]-----------------------------------
1)Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性;
2)Opera 需要前缀 -o-, Foxfire需要前缀-moz-,Chrome 和 Safari 需要前缀 -webkit-;
3)Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性;
-o-xxx: Opera
-moz-xxx: Foxfire
-webkit-xxx: Safari 和 Chrome
----------------------------------------------------------------------------------------
*/
.spinner {
position: fixed;
top: 36%;
left: 42%;
width: 100%;
height: 20%;
z-index: 1003;
}
/*.spinner下的子元素*/
.spinner>div {
background-color: #45a8cf;
height: 38px;
width: 16px;
margin-right: 10px;
display: inline-block;
-o-animation: myFrames 2s infinite ease-in-out;
-moz-animation: myFrames 2s infinite ease-in-out;
-webkit-animation: myFrames 2s infinite ease-in-out;
animation: myFrames 2s infinite ease-in-out;
}
.spinner .blob-1 {
-o-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.spinner .blob-2 {
-o-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.spinner .blob-3 {
-o-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.spinner .blob-4 {
-o-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.spinner .blob-5 {
-o-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.spinner .blob-6 {
-o-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.spinner .blob-7 {
-o-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.spinner .blob-8 {
-o-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.spinner .blob-9 {
-o-animation-delay: 0.9s;
-moz-animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.spinner .blob-10 {
-o-animation-delay: 1.0s;
-moz-animation-delay: 1.0s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
@-o-keyframes myFrames {
0%,
40%,
100% {
-webkit-transform: scaleY(1)
}
40% {
-webkit-transform: scaleY(2.62)
}
}
@-moz-keyframes myFrames {
0%,
40%,
100% {
-webkit-transform: scaleY(1)
}
40% {
-webkit-transform: scaleY(2.62)
}
}
@-webkit-keyframes myFrames {
0%,
40%,
100% {
-webkit-transform: scaleY(1)
}
40% {
-webkit-transform: scaleY(2.62)
}
}
@keyframes myFrames {
0%,
40%,
100% {
-webkit-transform: scaleY(1)
}
40% {
-webkit-transform: scaleY(2.62)
}
}
</style>
</head>
<body>
<div id="nb-global-spinner" class="spinner">
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
<div class="blob blob-4"></div>
<div class="blob blob-5"></div>
<div class="blob blob-6"></div>
<div class="blob blob-7"></div>
<div class="blob blob-8"></div>
<div class="blob blob-9"></div>
<div class="blob blob-10"></div>
</div>
</body>
<!-- Created by MaiXiaochai on 2019-10-30-->