Home > Article > Web Front-end > css to create dot effect
This time I will bring you css to create dot effects. What are the precautions for creating dot effects with css? . The following is a practical case, let’s take a look.
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>
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Css3's Transition smooth transition menu bar implementation
How to use the shadow effect of box-shadow
4 Commonly Used CSS Methods to Implement Vertical Centering
The above is the detailed content of css to create dot effect. For more information, please follow other related articles on the PHP Chinese website!