代码之家  ›  专栏  ›  技术社区  ›  SP1

旋转器在IE中不旋转

  •  0
  • SP1  · 技术社区  · 6 年前

    .animationload {
        background-color: #fff;
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 10000;
    }
    .osahanloading {
        animation: 1.5s linear 0s normal none infinite running osahanloading;
        background: #fed37f none repeat scroll 0 0;
        border-radius: 50px;
        height: 50px;
        left: 50%;
        margin-left: -25px;
        margin-top: -25px;
        position: absolute;
        top: 50%;
        width: 50px;
    }
    .osahanloading::after {
        animation: 1.5s linear 0s normal none infinite running osahanloading_after;
        border-color: #85d6de transparent;
        border-radius: 80px;
        border-style: solid;
        border-width: 10px;
        content: "";
        height: 80px;
        left: -15px;
        position: absolute;
        top: -15px;
        width: 80px;
    }
    @keyframes osahanloading {
    0% {
        transform: rotate(0deg);
    }
    50% {
        background: #85d6de none repeat scroll 0 0;
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
    }
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <!------ Include the above in your HEAD tag ---------->
    
    <div class="container">
        <div class="row">
            <div class="text-center">
                <h2>Creative Animated Loading icon in HTML5 CSS3</h2>
            </div>    
            <div class="animationload">
                <div class="osahanloading"></div>
            </div>
        </div>
    </div>

    我的旋转器是镀铬的,但在IE中没有旋转。我有旋转器,但它是静态的。有人能看一下代码吗?请告诉我这里缺少什么。

    以下是我从中获得微调器的代码,以供参考 Link 我有纺纱机工作得很好,但就是不正确的IE。

    谢谢

    使现代化 Plunker

    1 回复  |  直到 6 年前
        1
  •  3
  •   abney317    6 年前

    IE不喜欢你在动画CSS上的额外参数。删除一些不必要的参数是可行的。

    .animationload {
        background-color: #fff;
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 10000;
    }
    .osahanloading {
        animation: 1.5s linear infinite osahanloading;
        background: #fed37f none repeat scroll 0 0;
        border-radius: 50px;
        height: 50px;
        left: 50%;
        margin-left: -25px;
        margin-top: -25px;
        position: absolute;
        top: 50%;
        width: 50px;
    }
    .osahanloading::after {
        animation: 1.5s linear infinite osahanloading_after;
        border-color: #85d6de transparent;
        border-radius: 80px;
        border-style: solid;
        border-width: 10px;
        content: "";
        height: 80px;
        left: -15px;
        position: absolute;
        top: -15px;
        width: 80px;
    }
    @keyframes osahanloading {
    0% {
        transform: rotate(0deg);
    }
    50% {
        background: #85d6de none repeat scroll 0 0;
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
    }
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <!------ Include the above in your HEAD tag ---------->
    
    <div class="container">
        <div class="row">
            <div class="text-center">
                <h2>Creative Animated Loading icon in HTML5 CSS3</h2>
            </div>    
            <div class="animationload">
                <div class="osahanloading"></div>
            </div>
        </div>
    </div>