사용 시 호환성에 주의하셔야 합니다. 크롬, ff, 엣지, 모바일 단말기 등 최신 브라우저는 모두 사용 가능하지만, IE 9 이하의 브라우저는 사용할 수 없습니다.
코드는 다음과 같습니다.
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>
DJI 공식 홈페이지에서 CSS3 애니메이션으로 애니메이션을 로딩하는 더 많은 동영상을 보려면 PHP 중국어 홈페이지를 주목해주세요!