Dieser Artikel stellt hauptsächlich die Wirkung von CSS vor. Der Code ist angehängt, um es allen zu erleichtern, die Stileinstellungen zu verstehen. Interessierte Freunde können sich darauf beziehen. Ich hoffe, es kann allen helfen.
Der Code lautet wie folgt:
<!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>Verwandte Empfehlungen:
Erklärung der Verwendung von CSS3 für Punkteffekt erzielen
Ressourcensammlung für CSS3-Effekte
Eine Zusammenfassung von 20 fortgeschrittenen CSS-Techniken
Das obige ist der detaillierte Inhalt vonBeispiele zur Erläuterung der Implementierung des CSS-In-Progress-Dotting-Effekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
