Example explanation of using css3 to achieve dotting effect-H5 Tutorial-php.cn

Example explanation of using css3 to achieve dotting effect

巴扎黑

Release： 2017-07-19 11:16:24

Original

2055 people have browsed it

Dot effect based on box-shadow

Theoretically, box-shadow can achieve any graphic effect. Naturally, we can use box-shadow to generate our dot effects, and then control the dots at different times through animation. The number can achieve a dotted... loading effect~

1. Progressive compatibility
Browsers that support CSS3 animation animation will display the dotted animation effect; for browsers that do not support it, IE7/ IE8 displays real characters... Although the IE9 browser is also generated by CSS3, it is static and has no animation effect; this is progressive compatibility.

2. Implementation Principle
First of all, HTML is very simple. It is just a tag and a class name (the tag must be empty). You don’t need to care about anything else. You can handle almost all kinds of scenarios, as follows:

XML/HTML Code Copy the content to the clipboard

Order submission

The class name of the above code The span for dotting is where all our secrets lie. As long as there is a small amount of HTML anywhere on the page, there can be dotted animations, which are well mixed with the text, and the colors automatically match. For example, the little animation behind "Title 1" and "Title 2" in this article is just a little bit of HTML added.

The following is the much-anticipated CSS code:

<!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>

Copy after login

The above is the detailed content of Example explanation of using css3 to achieve dotting effect. For more information, please follow other related articles on the PHP Chinese website!