Home >Web Front-end >CSS Tutorial >Examples to explain the implementation of CSS in-progress dotting effect
Examples to explain the implementation of CSS in-progress dotting effect
- 小云云Original
- 2017-12-12 09:44:231829browse
This article mainly introduces the effect of CSS in progress. The code is attached to make it easier for everyone to understand the style settings. You can check the detailed explanation below for the specific operation steps. Interested friends can refer to it. I hope it can Help everyone.
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>
Related recommendations:
Explanation of using css3 to achieve dotting effects
Pure CSS3 effect resource collection
Summary of 20 advanced CSS techniques
The above is the detailed content of Examples to explain the implementation of CSS in-progress dotting effect. For more information, please follow other related articles on the PHP Chinese website!