search

Home  >  Article  >  Web Front-end  >  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:231811browse

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!

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
Previous article：What is css double flying wing layout and holy grail layoutNext article：What is css double flying wing layout and holy grail layout

Related articles

See more