about how animate for CSS3 "..." Loading animation effect (ii)

Box-shadow implementation of the DOT effect

Brief introduction

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 in <span 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 dots *    /animation:dot 4s infinite step-start both;/* for ie10+, ... *    /*zoom:expression (this.i nnerhtml = ' ... '); /*  for IE7. If no compatible IE7 is required, this line deletes */}.dotting:before {content: ' ... ';}/* for IE8. If you do not need a compatible IE8, this line and the next line delete */.dotting::before {content: ';}/* for ie9+ overwrite IE8 */:root. dotting {margin-right:8px;}/* for I E9+,FF,CH,OP,SF occupy space */@keyframes dot {    25% {box-shadow:none;}                                  /* 0 Dots */    50% {box-shadow:2px 0 currentcolor;}                    /* one point */    75% {box-shadow:2px 0 currentcolor, 6px 0 currentcolor;  /* 2 Dots */}}

currentColorThis keyword is used here, IE9+ browser support, it can make CSS generated by the color of the image of the environment with the value of the property, that is, the same as the text color.

The effect of each browser implementation:

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 in <span 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 Dots */    50% {border-right-color:transparent; background-color:transparent;}    /* one point */    75% {border-right-color:transparent;}                                   /* 2 Dots */}

Description

1. The same 4-second animation, showing a point every second, the
2.IE7/IE8 implementation principle is consistent with the above Box-shadow method, is the content generation, if not compatible with IE7/IE8, You can delete some CSS according to the first example CSS code comment description, the
3.currentColor keyword can make the graphic character, necessary;
4. The greatest contributor is the CSS3 background-clip attribute, which allows ie9+ Under the browser left and right padding no background color, so formed a sub-effect.
5.box-sizing is to make modern browsers and IE7/IE8 occupy the same width of the hero: Ie7/ie8 The actual width is width+padding-right 12 pixels, other modern browser for width+ Margin-left is also 12 pixels;
6. Here the CSS code is mainly used to show the principle, it does not show the-webkit-animation and @-webkit-keyframes private prefixes, the actual current still need;