2

Chrome での単純なアニメーションに問題があります。私は、時間の経過とともにサイズが大きくなる円で構成される非常に単純なプリローダーに取り組んでいます。これが私がこれを作成している方法です：

#circle{
position:absolute;
    display:block;
        width:40px;
    height:40px;
        background:#000;
    top:50%;
    left:50%;
    margin:-20px 0 0 -20px;

    -webkit-border-radius:50%;
     -khtml-border-radius:50%;
       -moz-border-radius:50%;
            border-radius:50%;

    -webkit-transform:scale(0.3);
       -moz-transform:scale(0.3);
        -ms-transform:scale(0.3);

    -webkit-animation:loading 1.5s ease-out forwards infinite;
       -moz-animation:loading 1.5s ease-out forwards infinite;
        -ms-animation:loading 1.5s ease-out forwards infinite;
}

そして、これはアニメーションです：

@-webkit-keyframes loading {
    0%{-webkit-transform:scale(0.3);}
    50%{-webkit-transform:scale(1);} 
    100%{-webkit-transform:scale(0.3);}    
}

そして、これが Chrome でのみエッジが切り取られた結果です。Webkit を使用する Safari もこれを完全にレンダリングしています。（上と左の切り口に注意）

ここに画像の説明を入力

そして、いくつかの最後の質問に関連しています。IE のグラフィック フォールバックをどのように計画しますか? つまり、modernizr に依頼して、これを削除し、JS でグラフィックを追加するフォールバックを作成できます。しかし、CSS のみを使用するより良い方法を知りたいです。

アニメーションは IE では機能しないため、黒い円を削除して、代わりにアニメーション化されたプリローダー gif を追加するというアイデアがあります。

それは私を夢中にさせているので、あなたがそれを手伝ってくれることを願っています!

どうもありがとう！

4

2 に答える 2

1

コンテナに隠れているようです。

これを試して：

 #circle {
   margin:-19px 0 0 -19px;
 }
于 2013-03-07T17:23:46.473 に答える