在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ 怎么修改這段動(dòng)畫(huà)代碼使之兼容ie瀏覽器?

怎么修改這段動(dòng)畫(huà)代碼使之兼容ie瀏覽器?

模仿了一個(gè)動(dòng)畫(huà)案例,但是在ie里,圈圈都沒(méi)辦法轉(zhuǎn)動(dòng),想知道要怎么修改才能讓他有動(dòng)畫(huà)效果,兼容ie10以上就行,

/* css */
    #loading {
        background-color: rgba( 230, 230, 250, 0.2);
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 1;
        margin-top: 0px;
        top: 0px;
    }
    #loading-center {
        width: 100%;
        height: 100%;
        position: relative;
    }
    #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 60px;
        width: 60px;
        margin-top: -30px;
        margin-left: -30px;
        -webkit-animation: loading-center-absolute 1s infinite;
        animation: loading-center-absolute 1s infinite;
    }
    .object {
        width: 20px;
        height: 20px;
        background-color: #7BCECC;
        float: left;
        -moz-border-radius: 50% 50% 50% 50%;
        -webkit-border-radius: 50% 50% 50% 50%;
        border-radius: 50% 50% 50% 50%;
        margin-right: 20px;
        margin-bottom: 20px;
    }
    .object:nth-child(2n+0) {
        margin-right: 0px;
    }
    #object_one {
        -webkit-animation: object_one 1s infinite;
        animation: object_one 1s infinite;
    }
    #object_two {
        -webkit-animation: object_two 1s infinite;
        animation: object_two 1s infinite;
    }
    #object_three {
        -webkit-animation: object_three 1s infinite;
        animation: object_three 1s infinite;
    }
    #object_four {
        -webkit-animation: object_four 1s infinite;
        animation: object_four 1s infinite;
    }
    @-webkit-keyframes loading-center-absolute {
        100% {
            -ms-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @keyframes loading-center-absolute {
        100% {
            -ms-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @-webkit-keyframes object_one {
        50% {
            -ms-transform: translate(20px, 20px);
            -webkit-transform: translate(20px, 20px);
            transform: translate(20px, 20px);
        }
    }
    @keyframes object_one {
        50% {
            -ms-transform: translate(20px, 20px);
            -webkit-transform: translate(20px, 20px);
            transform: translate(20px, 20px);
        }
    }
    @-webkit-keyframes object_two {
        50% {
            -ms-transform: translate(-20px, 20px);
            -webkit-transform: translate(-20px, 20px);
            transform: translate(-20px, 20px);
        }
    }
    @keyframes object_two {
        50% {
            -ms-transform: translate(-20px, 20px);
            -webkit-transform: translate(-20px, 20px);
            transform: translate(-20px, 20px);
        }
    }
    @-webkit-keyframes object_three {
        50% {
            -ms-transform: translate(20px, -20px);
            -webkit-transform: translate(20px, -20px);
            transform: translate(20px, -20px);
        }
    }
    @keyframes object_three {
        50% {
            -ms-transform: translate(20px, -20px);
            -webkit-transform: translate(20px, -20px);
            transform: translate(20px, -20px);
        }
    }
    @-webkit-keyframes object_four {
        50% {
            -ms-transform: translate(-20px, -20px);
            -webkit-transform: translate(-20px, -20px);
            transform: translate(-20px, -20px);
        }
    }
    @keyframes object_four {
        50% {
            -ms-transform: translate(-20px, -20px);
            -webkit-transform: translate(-20px, -20px);
            transform: translate(-20px, -20px);
        }
    }
  /* html */  
 <div id="loading">
        <div id="loading-center">
            <div id="loading-center-absolute">
                <div class="object" id="object_one"></div>
                <div class="object" id="object_two"></div>
                <div class="object" id="object_three"></div>
                <div class="object" id="object_four"></div>
            </div>
        </div>
    </div>
回答
編輯回答
傲寒

1.在head里添加meta前綴
2.給keyframe添加ms前綴
https://github.com/Khan/aphro...

2017年12月27日 01:08