Hi, I’m Ned👀, a junior with less than two years of experience at 🌹

The road ahead is still long 🎉, work hard to refuel it ❤~

preface

Wish everyone a happy New Year ~

Recently because of the annual popularity creator list is really to write an article pigeon for a long time, feel every day send friend circle affirmation someone shielded me HHH, so this is not, this activity ended, I also come to continue code word, harm, life.

CSS is really attractive, recently for a period of time to pay attention to my article may know, I sent a great many articles about CSS, have a plenty of see online have this effect, make their own name, or use of a knowledge point, just see myself to use it to do some fun things, in short, the CSS really fun!

The performance I brought to you today originated from the friend link page of my Blog, Wangez-blog. If I can’t get a resource for someone else’s profile picture, I will fill it with pac-Man Loading, and this pac-Man is the performance I brought today ~

Make Pac-Man’s mouth big

After that, I made the margin-top:-50px for the bottom one, and the two of them overlapped. Then I used the animation effect to make the top rotate clockwise and the bottom rotate in the opposite way by 90° to make the mouth open and close.

    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;
Copy the code

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); }}Copy the code
@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); }}Copy the code

Then add the animation to the CSS of the two elements we just generated (using this property: animation). Since I am a div, I used a false element to select it: They are first-of-Type and nth-Child (2). The first div and the second div are selected as Pac-Man’s mouths.

Note that the animation time of the two mouths needs to be synchronized, otherwise the mouth will move up and down:

    animation: rotate_pacman_up 0.75 s 0s infinite
Copy the code

Now it looks like this:

Implement Pac-Man beans

Also, we created three divs at the same level as the first two. I love div

Everything can be div!!

Beans relative to the mouth is very simple, first of all, he is round, secondly, its animation is moving to the left, with these two conditions, it is ok. We’ll simply use pseudo-elements to select div 3, div 4, div 5 and add this CSS.

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

Will anyone ask: Why do you know the location is -6.25px? Final explanation Final explanation.

Then add the animation of moving to the left:

@keyframes pacman-balls {
  75% {
    opacity: 0.7; }

  100% {
    -webkit-transform: translate(-100px, -6.25 px.);
            transform: translate(-100px, -6.25 px.); }}Copy the code

Seems like, wouldn’t it be better to go a little bit more transparent? This is to be considered ~

Finally, attach the animation to div 3, div 4, div 5 with the selector, and be careful not to set the animation start time to the same, otherwise they will be synchronized!! I’ve set it to 0.33/0.66/0.99 seconds, like this:

    animation: pacman-balls 1s 0.33/0.66/0.99 s infinite linear
Copy the code

Take a look at the final result

About that -6.25px

In fact,… I study a good half-day, I give you the figure, if can calculate also help me calculate, I finally come out in the experiment, about 6 to 7, 6.25 more pleasing to the eye but some emmm, but experiment to 7 px, small circle in the center is a little obvious, so emm is 6.25 (almost ~, and I want to write a 6.5, But 6.25 sounds better emM).

The last

Recently there are students in the car, every day to spend half a day, I hope section three can go over it!

Recently, I just looked at the CSS, emMM, and I still hope I can calm down.

If you find the above interesting, please give me a thumbs up and follow me