Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use content line wrapping technology to achieve character animation loading effect, the article is very detailed, has a certain reference value, interested friends must read it!

First, my character loading implementation

With regard to the animation implementation of character dotting, I have used box-shadow simulation and border+background simulation before, as well as the implementation using text-shadow, and the implementation using CSS3 ch units that I think is the best implementation this year. The effect is similar to the following (lazy, non-realistic screenshot, previous image):

Then, I found out today that there is really a mountain and a mountain high, there is a more ingenious character animation, the use of CSS content content generation technology and CSS3 animation to achieve, and almost without any shortcomings, here to show you how to achieve.

The CSS code is as follows:

Dot {display: inline-block; height: 1em; line-height: 1; text-align: left; vertical-align:-.25em; overflow: hidden;} dot::before {display: block; content:'.\ A..\ A.floor; white-space: pre-wrap; / * can also be white-space: pre * / animation: dot 3s infinite step-start both;} @ keyframes dot {33% {transform: translateY (- 2em) } 66% {transform: translateY (- 1em);}}

The HTML code is as follows:

The order is being submitted.

And then achievement is achieved! And IE6-IE9 is perfectly automatically backward compatible (static 3 points), IE10+ is animation.

You can click here: content character generation with CSS3 animation dots animation demo

Second, content line-breaking technology is known, the key is creativity and ideas.

If you split up the technologies used above, you will know all about it. There are two main points, one is the newline implementation of content character content generation, and the other is CSS3 animation animation.

1. About content newline technology in my previous article "using CSS (Unicode character) to wrap inline horizontal elements",'\ A 'actually refers to the LF character in the newline character, whose unicode code is 000A, which is written directly in the CSS content attribute; the newline character, in addition to the LF character and the CR character, its Unicode code is 000D, and the CSS content attribute is written directly as'\ D'. The CR character and LF character refer to carriage return (CR) and line feed (LF), respectively.

two。 There are more articles about the introduction of CSS3 animation.

The beauty of such a language as CSS is that to learn well requires not only technical accumulation and solid details, but also creativity and ideas, so I often say that CSS needs a bit of unspeakable talent to learn well. I think this talent is creative thinking and divergent thinking, which is different from the stereotyped logical language. After all, we serve brilliant effects and all kinds of layouts.

Back here, I need to reflect on the character management animation. I have been thinking about whether there is a better implementation from time to time over the years. Although I know the content content wrapping technology and am familiar with CSS3 animation attributes, I did not think of this kind of implementation, which shows that my thinking is still not open enough, and the connection has not been linked together. Alas, I have a trace of doubt about myself.

In this paper, we use content to achieve the loading effect of character dotting. I saw it in this github project: tawian/text-spinners.

Of course, I am also a little gratified that standing on the shoulders of giants, my details are better than the original implementation, but without using any hack techniques to achieve full compatibility of all browsers (do not support animation browser static three points), the original implementation directly ignored the IE9-IE6 browser, directly did not point.

The original implementation content is the element used, the CSS part uses:: after pseudo element, display is set to inline-table, the first line is a dot, the code is as follows:

.loading:: after {display: inline-table; content: "\ A.\ A..\ A..."; white-space: pre; animation: spin4 2s steps (4) infinite;}

While my implementation is to use custom elements, the CSS part uses: before pseudo element, display is set to block, the first line is 3 dots, the code is as follows:

.. dot::before {display: block; content:'.\ A..\ A. infinite step-start both;; white-space: pre-wrap; animation: dot 3s infinite step-start both;}

The advantage of using a custom element is that the IE7,IE8 browser does not recognize this element at all, and the relevant CSS will ignore it and directly display three points; using:: before pseudo-element, display is set to block because other modern browsers can push the original three points to the bottom invisible, showing the three points in the first line inserted by content. As a result, the whole browser displays well.

It can be seen that creativity is important, the foundation and details can not be ignored, in order to achieve a perfect effect-now this kind of implementation, the width of the outer label is the width of 3 points, do not worry about exceeding or clipping, character realization, and the previous text font, color consistent, perfect!

3. Content character generation cooperates with CSS3 animation character loading effect.

In fact, content character generation combined with CSS3 animation can achieve not only character animation effects such as dotting, but also more interesting loading effects by using other interesting characters, as shown below (screenshot from this demo page):

For example, our common loading animation implementation on the command line can be done as long as content is set to the following value:

Loading:: after {display: inline-table; content: "/\ A -\ A\\ A |; white-space: pre; animation: spin4 2s steps (4) infinite;} above is all the content of the article" how to use content line wrapping technology to achieve character animation loading effect ". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.