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

Editor to share with you how to use CSS to achieve a Pac-Man Loading loading effect, I hope you will gain something after reading this article, let's discuss it together!

Realize the big mouth of Pac-Man.

Let's start with the big mouth on the left. I used two things of this shape, and then I gave the margin-top:-50px below, and the two overlapped, and then animated the top to rotate clockwise, and on the contrary, rotate 90 °to open and close the mouth.

Width: 0px; height: 0px; border-right: 25px solid transparent; border-top: 25px solid # 279fcf; border-left: 25px solid # 279fcf; border-bottom: 25px solid # 279fcf; border-radius: 25px

The rotation animations are:

@ keyframes rotate_pacman_up {0% {- webkit-transform: rotate (270deg); transform: rotate (270deg);} 50% {- webkit-transform: rotate (360deg); transform: rotate (360deg);} 100% {- webkit-transform: rotate (270deg); transform: rotate (270deg);}} @ keyframes rotate_pacman_down {0% {- webkit-transform: rotate (90deg) Transform: rotate (90deg);} 50% {- webkit-transform: rotate (0deg); transform: rotate (0deg);} 100% {- webkit-transform: rotate (90deg); transform: rotate (90deg);}}

Then add the animation to the css of the two elements we just generated (just use this attribute: animation), because I am div with div, so I use pseudo elements to choose: first-of-type and nth-child (2), respectively, chose the first and second div as Pac-Man's mouth.

It is important to note that the animation time of the two mouths should be synchronized, otherwise the mouth will run up and down:

Animation: rotate_pacman_up 0.75s 0s infinite

Now the effect is as follows:

Realize the beans of Pac-Man.

Similarly, we have built three more div at the same level of the two div just now. I really like div so much.

Everything can be divested!

The bean is very simple relative to the mouth. First of all, it is round, and secondly, its animation moves to the left. With these two conditions, it is OK. We directly use pseudo-elements to select 3, 4, and 5 div, plus this css.

Background-color: # 279fcf; width: 15px; height: 15px; border-radius: 100%; margin: 2px; width: 10px; height: 10px; position: absolute; transform: translate (0,-6.25px); top: 25px; left: 100px

Will anyone ask: why do you know that the location is-6.25px? The final explanation.

Next, add the animation of moving to the left:

@ keyframes pacman-balls {75% {opacity: 0.7;} 100% {- webkit-transform: translate (- 100px,-6.25px); transform: translate (- 100px,-6.25px);}}

Perhaps, wouldn't it be better to walk for a while and become more transparent? This needs to be considered.

Finally, use the selector to hang the animation on the 3rd, 4th and 5th div. At the same time, note that the starting time of the animation is not set to the same, otherwise they will be synchronized! The ones I set here are 0.33 impulse 0.66 / 0.99 seconds, respectively. Oh, like this:

Animation: pacman-balls 1s 0.33/0.66/0.99s infinite linear

Let's take a look at the final effect.

-about that.-6.25px.

Actually. I studied it for a long time, and I gave you the picture, and if you can figure it out, help me calculate it. I finally came out of the experiment, 6 to 7 are almost the same, but 6.25 is more pleasing to the eye of emmm, but when it comes to 7px, the center of the circle is obviously on the upper side, so emm is 6.25 (almost, I want to write 6.5, but always think 6.25 is better than emm).

After reading this article, I believe you have a certain understanding of "how to use CSS to achieve the Loading loading effect of a Pac-Man". If you want to know more about it, welcome to follow the industry information channel, thank you for reading!

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.