Informationen dazu, wie CSS3 animate den Ladeanimationseffekt „…' implementiert (2)-CSS-Tutorial-php.cn

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

黄舟

Freigeben： 2017-05-26 13:19:37

Original

1582 Leute haben es durchsucht

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>

Nach dem Login kopieren

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 = &#39;...&#39;); /*  for IE7. 若无需兼容IE7, 此行删除 */
}
.dotting:before { content: &#39;...&#39;; } /* for IE8. 若无需兼容IE8, 此行以及下一行删除*/
.dotting::before { content: &#39;&#39;; } /* 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个点 */ }
}

Nach dem Login kopieren

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:

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

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; .
Informationen dazu, wie CSS3 animate den Ladeanimationseffekt „…' implementiert (2)

order + HintergrundDer erzielte Effekt

Prinzip der Umsetzung

HTML-Code

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

Nach dem Login kopieren

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 = &#39;...&#39;); /* IE7 */
}
.dotting:before { content: &#39;...&#39;; } /* IE8 */
.dotting::before { content: &#39;&#39;; }
: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个点 */
}

Nach dem Login kopieren

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!