Informationen dazu, wie CSS3 animate den Ladeanimationseffekt „…“ implementiert (2)

Durch Box-Shadow erzielter Punkteffekt

Einführung

Box-Shadow kann theoretisch jeden grafischen Effekt erzeugen und natürlich auch Punkt-für-Punkt-Effekte erzielen. Punktladen. Es hat funktioniert.

Implementierungsprinzip

HTML-Code, zuerst müssen Sie den folgenden HTML-Code und KlasseKlassennamen schreiben:

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

CSS-Code

.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个点 */ }
}

Hier wird das Schlüsselwort currentColor verwendet, das von IE9+ Browsern unterstützt wird. Es ermöglicht, dass die Farbe der von CSS generierten Grafiken mit dem Wert des Attributs color übereinstimmt 🎜> der Umgebung, also die gleiche wie der Text.

Die von jedem Browser erzielten Effekte sind wie in der Abbildung dargestellt:

Mängel

Obwohl fast alle Browser Es haben Ein gutes Aussehen, aber in Bezug auf die Wirkung gibt es immer noch Mängel. Die Kanten der Punkte sind unter den Browsern IE10+ und FireFox etwas unscharf (siehe Screenshot unten), obwohl der CSS-Code die Box-Schattenunschärfe nicht festlegt. Dieses Feathering-Phänomen kann den Effekt von IE und FireFox näher an den Schatteneffekt von

Photoshop bringen, wenn es um großformatige Schatten geht, ist es jedoch nicht das, was wir wollen; .

b

order + HintergrundDer erzielte Effekt

Prinzip der Umsetzung

HTML-Code

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

CSS-Code

.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个点 */
}

Anleitung:

1. Es ist auch eine 4-sekündige

-Animation , die 1 Punkt pro Sekunde anzeigt 2. Das Implementierungsprinzip von IE7/IE8 ist das gleiche wie bei der oben genannten Box-Shadow-Methode, beide sind Inhaltsgenerierung Es besteht keine Notwendigkeit, mit IE7/IE8 kompatibel zu sein. Sie können einige CSS-Anweisungen gemäß dem ersten Beispiel-CSS-Code
löschen. Das Schlüsselwort currentColor kann Grafiken charakterisieren 🎜>4. Den größten Beitrag leistet das CSS3-Attribut „background-clip“. Sie können dafür sorgen, dass die linke und rechte Auffüllung im IE9+-Browser keine Hintergrundfarbe haben und so einen gleichmäßigen Punkteffekt erzeugen. 5.box-sizing ist dafür verantwortlich, dass moderne Browser genau die gleiche Breite wie IE7/IE8 einnehmen: Die tatsächliche Breite von IE7/IE8 beträgt Breite + Innenabstand rechts von 12 Pixeln, und das Gleiche gilt für andere moderne Browser mit width+margin-left 12 pixels; 6. Der CSS-Code dient hier hauptsächlich zur Demonstration des Prinzips, daher werden die privaten Präfixe -webkit-animation und @-webkit-keyframes nicht angezeigt, werden aber tatsächlich trotzdem benötigt ;

Das obige ist der detaillierte Inhalt vonInformationen dazu, wie CSS3 animate den Ladeanimationseffekt „…“ implementiert (2). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!