CSS3 animate による「...」の読み込みアニメーション効果の実装方法について (2)

box-shadow によって実現されるドット効果

はじめに

box-shadow は理論的にはあらゆるグラフィック効果を生成でき、もちろん、ドットごとのローディング効果も実現できます。

実装原理

htmlコードでは、まず次のhtmlコードとclassクラス名を記述する必要があります:

订单提交中<span class="dotting"></span>

cssコード

.dotting {
    display: inline-block; min-width: 2px; min-height: 2px;
    box-shadow: 2px 0 currentColor, 6px 0 currentColor, 10px 0 currentColor; /* for IE9+, ..., 3个点 */
    animation: dot 4s infinite step-start both; /* for IE10+, ... */
    *zoom: expression(this.innerHTML = '...'); /*  for IE7. 若无需兼容IE7, 此行删除 */
}
.dotting:before { content: '...'; } /* for IE8. 若无需兼容IE8, 此行以及下一行删除*/
.dotting::before { content: ''; } /* for IE9+ 覆盖 IE8 */
:root .dotting { margin-right: 8px; } /* for IE9+,FF,CH,OP,SF 占据空间*/

@keyframes dot {
    25% { box-shadow: none; }                                  /* 0个点 */
    50% { box-shadow: 2px 0 currentColor; }                    /* 1个点 */
    75% { box-shadow: 2px 0 currentColor, 6px 0 currentColor;  /* 2个点 */ }
}

ここでは、currentColor这个关键字，IE9+ブラウザサポートを使用します。これにより、生成されたグラフィックスの色と位置が許可されます。一致する CSS 環境の color 属性 は、テキストの色と同じ値を持ちます。

各ブラウザによって達成される効果は図に示すとおりです:

欠点

ほぼすべてのブラウザは同じ外観を持っていますが、効果の点ではまだ欠陥があり、IE10+とFireFoxのエッジCSS コードではボックスの影のぼかしを設定していませんが、ブラウザの下のポイントは多少ぼやけています (下のスクリーンショットを参照)。このフェザリング現象は、大きな値のボックスのシャドウを使用する場合、IE と FireFox の効果を photoshop のシャドウ効果に近づけることができますが、小さいサイズのシャドウに関しては、これは私たちが望むものではありません。

border + background達成されたドット効果

実装の原則

htmlコード

订单提交中<span class="dotting"></span>

cssコード

.dotting {
    display: inline-block; width: 10px; min-height: 2px;
    padding-right: 2px;
    border-left: 2px solid currentColor; border-right: 2px solid currentColor;   
    background-color: currentColor; background-clip: content-box;
    box-sizing: border-box;
    animation: dot 4s infinite step-start both;
    *zoom: expression(this.innerHTML = '...'); /* IE7 */
}
.dotting:before { content: '...'; } /* IE8 */
.dotting::before { content: ''; }
:root .dotting { margin-left: 2px; padding-left: 2px; } /* IE9+ */

@keyframes dot {
    25% { border-color: transparent; background-color: transparent; }          /* 0个点 */
    50% { border-right-color: transparent; background-color: transparent; }    /* 1个点 */
    75% { border-right-color: transparent; }                                   /* 2个点 */
}

説明:

1. 4 秒 アニメーション、1 秒あたり 1 ポイントを表示します。 2. IE7/IE8 の実装原理は上記の box-shadow メソッドと同じです。IE7/IE8 との互換性が必要ない場合は、両方ともコンテンツを生成します。最初の CSS コードの例に従うことができます
CSS を削除するための手順 3. currentColor キーワードは、グラフィックスを特徴づけることができます。これは、左と右を許可する CSS3 の背景クリップ属性です。 IE9 以降のブラウザでは背景色がなくなるようにパディングして、RBI 効果を形成します。 5.box-sizing は、最新のブラウザーが IE7/IE8 とまったく同じ幅を占めるようにする役割を果たします。IE7/IE8 の実際の幅は、12 ピクセルの幅 + パディング右、他の最新ブラウザーの幅 + マージン左です。 ;
6. ここの CSS コードは主に原理を示すために使用されているため、-webkit-animation と @-webkit-keyframes のプライベート プレフィックスは表示されていませんが、実際には依然として必要です。

以上がCSS3 animate による「...」の読み込みアニメーション効果の実装方法について (2)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。