À propos de la façon dont CSS3 animate implémente l'effet d'animation de chargement "..." (2)

Effet de points obtenu par box-shadow

Introduction

Box-shadow peut théoriquement générer n'importe quel effet graphique, et bien sûr, il peut également réaliser un effet point par point. chargement de points. Cela a fonctionné.

Principe de mise en œuvre

code html, vous devez d'abord écrire le code html suivant et la classenom de la classe :

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

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

Le mot-clé currentColor est utilisé ici, qui est supporté par les IE9+ navigateurs. Il permet à la couleur des graphiques générés par CSS d'être la même que la valeur de l'attribut color<.> de l'environnement, c'est-à-dire la même que le texte.

Les effets obtenus par chaque navigateur sont tels qu'illustrés dans la figure :

Inconvénients

Bien que presque tous les navigateurs aient un bon look, mais en termes d'effet, il y a encore des défauts. Les bords des points sous les navigateurs IE10+ et FireFox sont un peu flous (voir la capture d'écran ci-dessous), bien que le code CSS ne règle pas le flou de l'ombre de la boîte. Ce phénomène d'adoucissement peut rapprocher l'effet d'IE et de FireFox de l'effet d'ombre de

photoshop lorsqu'il s'agit d'ombres de boîte de grande valeur. Toutefois, lorsqu'il s'agit d'ombres de petite taille, ce n'est pas ce que nous souhaitons ; .

b

order + fondL'effet obtenu

Principe de mise en œuvre

Code HTML

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

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

Instructions :

1. Il s'agit également d'une

animation de 4 secondes, affichant 1 point chaque seconde 2. Le principe de mise en œuvre d'IE7/IE8 est le même que la méthode box-shadow ci-dessus, les deux sont des générations de contenu ; il n'est pas nécessaire d'être compatible avec IE7/IE8, Vous pouvez supprimer du CSS selon le premier exemple de code CSS
commentaire instructions 3 Le mot-clé currentColor peut caractériser les graphiques, ce qui est essentiel ; 🎜>4. Le plus gros contributeur est l'attribut CSS3 background-clip, vous pouvez faire en sorte que les remplissages gauche et droit n'aient pas de couleur d'arrière-plan sous le navigateur IE9+, formant ainsi un effet de pointage égal.
5.box-sizing est responsable de faire en sorte que les navigateurs modernes occupent exactement la même largeur que IE7/IE8 : la largeur réelle de IE7/IE8 est largeur + rembourrage droit de 12 pixels, et la même chose est vraie pour les autres navigateurs modernes avec width+margin-left 12 pixels ;
6. Le code CSS ici est principalement utilisé pour démontrer le principe, donc les préfixes privés -webkit-animation et @-webkit-keyframes ne sont pas affichés, mais ils sont en fait toujours nécessaires. ;

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!