Home >Web Front-end >CSS Tutorial >css implementation of in-progress dot effect code sharing
This article mainly introduces the effect of CSS in progress. The code is attached to make it easier for everyone to understand the style setting. You can check the detailed explanation below for the specific operation steps. Interested friends can refer to it.
The code is as follows:
<!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>
The above is the detailed content of css implementation of in-progress dot effect code sharing. For more information, please follow other related articles on the PHP Chinese website!