标签：osi ram spinner inner form htm frame scale bounce
HTML部分：
<div id="loading" class="loading position">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<p>loading...</p>
</div>
css部分：
.loading{text-align: center; left:50%; font-size: 30px; z-index: 1;}
#loading{width: 100%; top:45%; margin-left: -50%;}
.loading p{color: #ff9244; font-weight: bold; font-family: Arial; font-size: 24px; }
.spinner { margin: 0 auto; width: 150px; text-align: center; }
.spinner > div { width: 30px; height: 30px; background-color:#ff9244; 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; }
.spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }
.spinner .bounce2 { -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);}
}
标签：osi ram spinner inner form htm frame scale bounce
原文地址：https://www.cnblogs.com/Cloudloong/p/9562679.html
