首页导航博客电子书算法众创代码随贴关于我们

纯css3加载动画，特效，加载时缓冲圈圈

代码正文双击正文可选择全部

1[代码][html]

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"/>  
    <title>纯css3加载动画，特效，加载时缓冲圈圈</title> 
	<style>
.css3-spinner {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    text-align: center;
    background-color: #FFF;
    -webkit-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}
.css3-spinner > div{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -9px;
    margin-left: 13px;
    width: 18px;
    height: 18px;
    background-color: #DDD;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
    animation: bouncedelay 1.4s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.css3-spinner .css3-spinner-bounce1 {
    margin-left: -31px;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}
.css3-spinner .css3-spinner-bounce2 {
    margin-left: -9px;
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-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);
  }
}
</style>
</head>
<body>
<div class="css3-spinner">
	<div class="css3-spinner-bounce1"></div>
	<div class="css3-spinner-bounce2"></div>
	<div class="css3-spinner-bounce3"></div>
</div>
</body>
</html>