Sie müssen bei der Verwendung auf die Kompatibilität achten. Moderne Browser wie Chrome, FF, Edge und mobile Endgeräte sind alle verfügbar, Browser unter IE 9 jedoch nicht.
Der Code lautet wie folgt:
CSS-Stil
.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-Struktur
<div id="fancybox-loading" class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
Weitere Videoladeanimationen per CSS3-Animation von der offiziellen DJI-Website finden Sie auf der chinesischen PHP-Website!
