Use animate of css3 to achieve point-to-point loading animation effect (2), css3animate

Use animate of css3 to achieve point-to-point loading animation effect (2), css3animate
Introduction to the hitting Effect of box-shadow

In theory, box-shadow can generate any image effect. Of course, it can achieve point-and-point loading effect.

Implementation Principle

For html code, you must first write the following html code and class Name:

Submitting order <span class = "DoCoMo"> </span>

Css code

. Dotting {display: inline-block; min-width: 2px; min-height: 2px; box-shadow: 2px 0 currentColor, 6px 0 currentColor, 10px 0 currentColor; /* for IE9 + ,..., 3 dots */animation: dot 4S infinite step-start both;/* for IE10 + ,... */* zoom: expression (this. innerHTML = '... ');/* for IE7. if you do not need to be compatible with IE7, delete this line */}. dotting: before {content :'... ';}/* for IE8. if you do not need to be compatible with IE8, delete this line and the next line */. dotting: before {content: '';}/* for IE9 + overwrite IE8 */: root. dota2 {margin-right: 8px;}/* for IE9 +, FF, CH, OP, and SF occupy space */@ keyframes dot {25% {box-shadow: none ;} /* 0 points */50% {box-shadow: 2px 0 currentColor;}/* 1 point */75% {box-shadow: 2px 0 currentColor, 6px 0 currentColor; /* 2 points */}}

Here we useCurrentColorThis keyword,IE9 +Supported by the browser, the color of the image generated by CSS is the same as the color attribute value of the environment, that is, the color of the image is the same as that of the text.

Effects of Various browsers:

Supports CSS3animationThe animation browser displays the animation effect. For unsupported browsers, IE7/IE8 displays real characters....IE 9 is also generated by CSS3, but it is static and has no animation effect. This is progressive compatibility.

Weaknesses

Although almost all browsers have the same pattern, the effect is still flawed. The Edge of IE10 + and vertices in FireFox is somewhat false (see below ), although the CSS Code does not set box shadow blur. This feather phenomenon can bring IE and FireFox closer to the shadow effect of photoshop in the shadow of a large numeric box. However, it is not what we want in the small shadow.

Hitting effect implemented by border + background Implementation Principle

Html code

Submitting order <span class = "DoCoMo"> </span>

Css code

. Dotting {display: inline-block; width: 10px; min-height: 2px; padding-right: 2px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; background-color: currentColor; background-clip: content-box; box-sizing: border-box; animation: dot 4S infinite step-start both; * zoom: expression (this. innerHTML = '... ');/* IE7 */}. dotting: before {content :'... ';}/* IE8 */. dotting: before {content: '';}: root. dota2 {margin-left: 2px; padding-left: 2px;}/* IE9 + */@ keyframes dot {25% {border-color: transparent; background-color: transparent ;} /* 0 points */50% {border-right-color: transparent; background-color: transparent;}/* 1 point */75% {border-right-color: transparent;}/* 2 points */}

Note:

Reference address: CSS3 animation implements point-by-point loading animation.

Https://github.com/tawian/text-spinners