-moz- ????/* 火狐等使用Mozilla浏览器引擎的浏览器 */-webkit- ?/* Safari, 谷歌浏览器等使用Webkit引擎的浏览器 */-o- ??????/* Opera浏览器(早期) */-ms- ?????/* Internet Explorer (不一定) */
<div class="wrap"> ???<div class="spinner"> ?????<div class="double-bounce1"></div> ?????<div class="double-bounce2"></div> ???</div> ???<p>正在拼命加载中.....</p> ?</div>
.wrap { ?width: 100vw; ?height: 100vh; ?background-color: rgba(255,255,255,.8); ?border-radius: 2vw; ?position: fixed; ?left: 0; ?top: 0; ?z-index: 99999;}p { ?text-align: center; ?font-size: 24px;}.spinner { ?width: 50px; ?height: 50px; ?position: relative; ?margin: 65% auto; ?margin-bottom: 40px;}.double-bounce1, .double-bounce2 { ?width: 100%; ?height: 100%; ?border-radius: 50%; ?background-color: #facd2d; ?opacity: 0.6; ?position: absolute; ?top: 0; ?left: 0; ?-webkit-animation: bounce 2.0s infinite ease-in-out; ?animation: bounce 2.0s infinite ease-in-out;}.double-bounce2 { ?-webkit-animation-delay: -1.0s; ?animation-delay: -1.0s;}@keyframes bounce { ?0%, 100% { ???transform: scale(0.0); ???-webkit-transform: scale(0.0); ?} 50% { ???transform: scale(1.0); ???-webkit-transform: scale(1.0); ?}}
css3 动画
原文地址：https://www.cnblogs.com/1032473245jing/p/8984626.html