Box-Shadow kann theoretisch jeden grafischen Effekt erzeugen und natürlich auch Punkt-für-Punkt-Effekte erzielen. Punktladen. Es hat funktioniert.
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.
Photoshop bringen, wenn es um großformatige Schatten geht, ist es jedoch nicht das, was wir wollen; . 
订单提交中<span class="dotting"></span>
.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!
