Heim > Artikel > Web-Frontend > Beispiele zur Erläuterung der Implementierung des CSS-In-Progress-Dotting-Effekts

Beispiele zur Erläuterung der Implementierung des CSS-In-Progress-Dotting-Effekts

小云云Original: 2017-12-12 09:44:231769Durchsuche

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was ist das CSS-Double-Flying-Wing-Layout und das Holy-Grail-Layout?Nächster Artikel：Was ist das CSS-Double-Flying-Wing-Layout und das Holy-Grail-Layout?

In Verbindung stehende Artikel

Mehr sehen