Home  >  Article  >  Web Front-end  >  DJI official website video loading animation by css3 animation

DJI official website video loading animation by css3 animation

高洛峰
高洛峰Original
2017-02-24 09:59:541879browse

You must pay attention to compatibility when using it. Modern browsers such as chrome, ff, edge and mobile terminals are all available, but those below IE 9 are not.

The code is as follows:

css style

.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 structure

<div id="fancybox-loading" class="spinner">
    <div class="bounce1"></div>
    <div class="bounce2"></div>
    <div class="bounce3"></div>
</div>


For more DJI official website video loading animation by css3 animation related articles, please pay attention to the PHP Chinese website!


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:CSS Summary-Box ModelNext article:CSS Summary-Box Model