非常漂亮的CSS3 loading动画

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>loading动画</title>
<h3>loading动画5</h3>
<style>
h3{ text-align:center;}
.loading-demo5 { margin: 60px auto; width: 70px; text-align: center; }
.loading-demo5 > div { width: 18px; height: 18px; background-color: #09c; border-radius: 100%; display: inline-block; -webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out; /* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both; animation-fill-mode: both; }
.loading-demo5 .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }
.loading-demo5 .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);
}
}
</style>
<div class="loading-demo5">
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » 非常漂亮的CSS3 loading动画

赞 (3)
分享到:更多 ()

发表评论 0