Punkteffekt basierend auf Box-Shadow
Theoretisch kann Box-Shadow jeden grafischen Effekt erzielen. Natürlich können wir Box-Shadow verwenden, um unsere Punkteffekte zu erzeugen und die Punkte dann zu unterschiedlichen Zeiten zu steuern Die Zahl kann den Ladeeffekt erzielen~
Progressive Kompatibilität
Browser, die CSS3-Animationseffekte unterstützen, zeigen den Punktanimationseffekt an ... Obwohl der IE9-Browser ebenfalls von CSS3 generiert wird, ist er statisch und hat keinen Animationseffekt. Dies ist eine progressive Kompatibilität.
2. Implementierungsprinzip
Zunächst einmal ist HTML nur ein Tag und ein Klassenname (das Tag muss leer sein). Sie können fast alle Arten von Szenarien wie folgt bewältigen:
XML/HTML-Code kopieren Sie den Inhalt in die Zwischenablage
Auftragsübermittlung
Der Klassenname des obigen Codes ist die Spanne für Punktierung, in der alle unsere Geheimnisse liegen. Solange irgendwo auf der Seite eine kleine Menge HTML vorhanden ist, können Punktanimationen gut gemischt werden Der Text und die Farben werden automatisch angepasst. Die kleinen Animationsteile hinter „Titel 1“ und „Titel 2“ in diesem Artikel sind beispielsweise nur ein wenig hinzugefügter HTML-Code.
Das Folgende ist der mit Spannung erwartete CSS-Code:
<!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>
Das obige ist der detaillierte Inhalt vonBeispielerklärung für die Verwendung von CSS3 zur Erzielung eines Punkteffekts. 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)
