About how CSS3 animate implements the '...' loading animation effect (2)

The dot effect achieved by box-shadow

Introduction

box-shadow can theoretically generate any graphic effect, and of course it can also achieve dot-by-dot loading. It worked.

Implementation principle

html code, first you need to write the following html code and classclass name:

订单提交中<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个点 */
    animation: dot 4s infinite step-start both; /* for IE10+, ... */
    *zoom: expression(this.innerHTML = '...'); /*  for IE7. 若无需兼容IE7, 此行删除 */
}
.dotting:before { content: '...'; } /* for IE8. 若无需兼容IE8, 此行以及下一行删除*/
.dotting::before { content: ''; } /* for IE9+ 覆盖 IE8 */
:root .dotting { margin-right: 8px; } /* for IE9+,FF,CH,OP,SF 占据空间*/

@keyframes dot {
    25% { box-shadow: none; }                                  /* 0个点 */
    50% { box-shadow: 2px 0 currentColor; }                    /* 1个点 */
    75% { box-shadow: 2px 0 currentColor, 6px 0 currentColor;  /* 2个点 */ }
}

The currentColor keyword is used here, which is supported by the IE9+ browser. It allows the color of the graphics generated by CSS to be the same as the color attribute value of the environment. That is, the same color as the text.

The effects achieved by each browser are as shown in the figure:

Shortcomings

Although almost all browsers It has a good look, but in terms of effect, there are still flaws. The edges of the points under IE10+ and FireFox browsers are a bit blurry (see the screenshot below), although the CSS code does not set the box shadow blur. This feathering phenomenon can make the effect of IE and FireFox closer to the photoshop shadow effect when the box shadow is large. However, when the shadow is small, it is not what we want.

border + backgroundThe dotting effect achieved

Principle of implementation

html code

订单提交中<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个点 */
    50% { border-right-color: transparent; background-color: transparent; }    /* 1个点 */
    75% { border-right-color: transparent; }                                   /* 2个点 */
}

Instructions:

##1. The same is 4 seconds

Animation, displaying 1 point per second; 2. The implementation principle of IE7/IE8 is the same as the above box-shadow method, both are content generation. If you do not need to be compatible with IE7/IE8, you can follow the first one Example CSS code
CommentsInstructions to delete some CSS;3.The currentColor keyword can characterize graphics, which is essential;
4.The biggest contributor is the CSS3 background-clip attribute, which can make IE9+ Under the browser, the left and right padding has no background color, thus forming an equal dot effect.
5.box-sizing is responsible for making modern browsers occupy exactly the same width as IE7/IE8: the actual width of IE7/IE8 is width+padding-right of 12 pixels, and the width+margin-left of other modern browsers is also the same. 12 pixels;
6. The CSS code here is mainly used to show the principle, so the -webkit-animation and @-webkit-keyframes private prefixes are not displayed, but they are still needed currently;

The above is the detailed content of About how CSS3 animate implements the '...' loading animation effect (2). For more information, please follow other related articles on the PHP Chinese website!