À 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.

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 ; .

order + fondL'effet obtenu

订单提交中<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个点 */
}

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!