Maison > Article > interface Web > Exemples pour expliquer l'implémentation de l'effet de pointage CSS en cours
Exemples pour expliquer l'implémentation de l'effet de pointage CSS en cours
- 小云云original
- 2017-12-12 09:44:231769parcourir
Cet article présente principalement l'effet du CSS en cours. Le code est joint pour permettre à tout le monde de comprendre plus facilement les paramètres de style. Vous pouvez consulter l'explication détaillée ci-dessous pour les étapes de fonctionnement spécifiques. J'espère que cela pourra aider tout le monde.
Le code est le suivant :
<!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>
Recommandations associées :
Explication de l'utilisation de CSS3 pour obtenir un effet de pointage
Collection de ressources d'effets CSS3 purs
Un résumé de 20 techniques CSS avancées
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!