全屏动态八卦图

CSS代码

JS代码

// 这个js建议放在body第一行
document.body.innerHTML += ('<div id="loader-wrapper"><center><p><img style="width: 80px!important;" src="/bgt/logo/logo.png"/></p><center><div id="loader"></div><div class="divClass"><div class="taijileft"></div><div class="taijiright"></div></div></div></div>');
window.onload = function () {
    if (document.body.className == '' || document.body.className.search("loaded") == -1)
        document.body.className += ' loaded'
}
setTimeout(function () {
    if (document.body.className == '' || document.body.className.search("loaded") == -1)
        document.body.className += ' loaded';
}, 600); // 超时时间

.chromeframe {
    margin: .2em 0;
    background: #ccc;
    color: #000;
    padding: .2em 0
}

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background: linear-gradient(90deg, rgb(255, 165, 150) 10%, rgb(0, 228, 255)) no-repeat;
}

#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    -webkit-animation: spin 2s linear infinite;
    -ms-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -o-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    z-index: 1001
}

.loaded #loader {
    opacity: 0;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.loaded #loader-wrapper {
    visibility: hidden;
}

.no-js #loader-wrapper {
    display: none
}

.no-js h1 {
    color: #222
}

#loader-wrapper #load_title {
    font-family: FZCuJinLFW;
    color: #000;
    font-size: 19px;
    width: 100%;
    text-align: center;
    z-index: 9999999999999;
    position: absolute;
    opacity: 1;
    line-height: 30px
}

#loader-wrapper #load_title span {
    font-weight: normal;
    font-style: italic;
    font-size: 13px;
    color: #FFF;
    opacity: .5
}

.divClass {
    border: 100px solid;
    border-color: white white black black;
    width: 0;
    height: 0;
    border-radius: 100%;
    top: 100px;
    margin: 200px auto;
    transform-origin: 50% 50%;
    animation: run 2.5s linear infinite;
    box-shadow: 0 0 50px #707070;
}

@keyframes run {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.divClass:before {
    content: "";
    position: absolute;
    top: -85px;
    left: -85px;
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 100%;
}

.divClass:after {
    content: "";
    position: absolute;
    top: -15px;
    left: -14px;
    width: 100px;
    height: 100px;
    background-color: white;
    border-radius: 100%;
}

.taijileft {
    background-color: white;
    width: 50px;
    height: 50px;
    position: relative;
    border-radius: 100%;
    top: -65px;
    left: -65px;
}

.taijiright {
    background-color: black;
    width: 50px;
    height: 50px;
    position: relative;
    border-radius: 100%;
    top: -40px;
    left: 15px;
    z-index: 1;
}

@-moz-keyframes swing {
    0% {
        -moz-transform: rotate(-10deg)
    }

    50% {
        -moz-transform: rotate(10deg)
    }

    100% {
        -moz-transform: rotate(-10deg)
    }
}

@-webkit-keyframes swing {
    0% {
        -webkit-transform: rotate(-10deg)
    }

    50% {
        -webkit-transform: rotate(10deg)
    }

    100% {
        -webkit-transform: rotate(-10deg)
    }
}