Effet de points basé sur box-shadow
Théoriquement, box-shadow peut obtenir n'importe quel effet graphique. Naturellement, nous pouvons utiliser box-shadow pour générer nos effets de points, puis contrôler les points à différents moments. animation. Le nombre peut obtenir l'effet de chargement ~
1. Compatibilité progressive
Les navigateurs qui prennent en charge l'animation d'animation CSS3 afficheront l'effet d'animation de points pour les navigateurs qui ne le prennent pas en charge, IE7/IE8 affiche les caractères réels ; ... Bien que le navigateur IE9 soit également généré par CSS3, il est statique et n'a aucun effet d'animation ; il s'agit d'une compatibilité progressive ;
2. Principe de mise en œuvre
Tout d'abord, le HTML est très simple. Il s'agit simplement d'une balise et d'un nom de classe (la balise doit être vide). Vous pouvez gérer presque tous les types de scénarios, comme suit :
Code XML/HTML copier le contenu dans le presse-papiers
Soumission de la commande
Le nom de classe du code ci-dessus. L'étendue des points est l'endroit où se trouvent tous nos secrets. Tant qu'il y a une petite quantité de HTML n'importe où sur la page, une animation en points peut être bien mélangée avec le texte. et les couleurs correspondront automatiquement. Par exemple, la petite animation derrière "Titre 1" et "Titre 2" dans cet article n'est qu'un petit peu de HTML ajouté
Voici le code CSS très attendu :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
dot {
display:inline-block;
width:3ch;
text-indent:-1ch;
vertical-align:bottom;
overflow:hidden;
animation:dot 3s infinite step-start both;
}
@keyframes dot {
33% { text-indent: 0; }
66% { text-indent: -2ch; }
}
</style>
</head>
<body>
<a href="javascript:">提交进行中<dot>...</dot></a>
</body>
</html>
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
