Home  >  Article  >  Web Front-end  >  css to create dot effect

css to create dot effect

php中世界最好的语言
php中世界最好的语言Original
2018-03-21 14:49:342455browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn