Using CSS3 's animation to realize point-point loading animation effect (II.)

Introduction to the effect of Box-shadow implementation

Box-shadow can theoretically generate arbitrary graphic effects, and of course, the loading effect of point points can be achieved.

Implementation principle

HTML code, you first need to write the following HTML code and class name:

Order Submission <class= "dotting"></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 points*/Animation:dot 4s infinite step-start both;/*for ie10+, ...*/*zoom:expression (this.innerhtml = ' ... ');/*for IE7. If no compatible IE7 is required, this row is deleted*/}. Dotting:before{content:' ... '; }/*for IE8. If no compatible IE8 is required, this line and the next line are removed*/. Dotting::before{content:"'; }/*For ie9+ Overlay IE8*/: root. Dotting{Margin-right:8px; }/*For IE9+,FF,CH,OP,SF occupy space*/@keyframes Dot{25% {Box-shadow:None; }/*0 Points*/50%{Box-shadow:2px 0 CurrentColor; }/*a point*/75%{Box-shadow:2px 0 CurrentColor, 6px 0 currentcolor;/*2 points*/}}

This keyword is used here, CurrentColor ,ie9+ browser support, which allows the CSS to generate the same color as the colors of the environment, that is, the same as the text color.

The effect of each browser implementation:

The animation browser that supports CSS3 animation displays the dot animation effect, and for unsupported browsers, IE7/IE8 displays real characters ... , IE9 browser is also CSS3 generated, but is static and has no animated effect; this is progressive compatibility.

The shortcomings

Although almost all browsers have model-like, but, in effect, still flawed, ie10+ and Firefox browser points under the edge of some virtual (see below), although the CSS code does not set the box shadow blur. This feather phenomenon allows IE and Firefox to get closer to Photoshop's shadow effect when the large value box is shaded, but not when it comes to small shadows.

Border + background implementation of the DOT effect Implementation Principle

HTML code

Order Submission <class= "dotting"></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. Dotting{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; }/*a point*/75%{Border-right-color:Transparent; }/*2 points*/}

Description

1. The same 4-second animation shows one point per second;
2. IE7/IE8 implementation principle box-shadow is consistent with the above method, are content generation, if not compatible with IE7/IE8, you can follow the first example of CSS code comments to delete some CSS;
3. currentColorKeywords can make the graphic character, essential;
4. The biggest hero is the CSS3 background-clip attribute, you can let ie9+ browser left or right padding without background color, so formed a sub-effect.
5. box-sizingis to make the modern browser and IE7/IE8 occupy the same width of the hero: Ie7/ie8 The actual width is width+padding-right for 12 pixels, other modern browsers are width+margin-left also 12 pixels;
6. Here the CSS code is mainly used to show the principle, so there is no display -webkit-animation and the @-webkit-keyframes private prefix, the actual current still need;

Reference address: Again CSS3 animation realization Point Point point Loading animation

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

Using CSS3 's animation to realize point-point loading animation effect (II.)