代码如下：
css样式
.spinner {
margin: 0 auto;
width: 82px;
text-align: center;
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -9px;
margin-left: -41px;
opacity: .8;
cursor: pointer;
z-index: 8060;
}
.spinner>div {
margin: 0 2px;
width: 18px;
height: 18px;
background-color: #333;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-moz-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-ms-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-o-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
-webkit-animation-delay: -.32s;
-moz-animation-delay: -.32s;
-ms-animation-delay: -.32s;
-o-animation-delay: -.32s;
animation-delay: -.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -.16s;
-moz-animation-delay: -.16s;
-ms-animation-delay: -.16s;
-o-animation-delay: -.16s;
animation-delay: -.16s;
}
@keyframes sk-bouncedelay {
0%,80%,100% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0)
}
40% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
}html结构
<div id="fancybox-loading" class="spinner"> <div class="bounce1"></div> <div class="bounce2"></div> <div class="bounce3"></div> </div>
更多大疆官网的视频加载动画 by css3 animation相关文章请关注PHP中文网！