“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”

introduce

Before that, I saw a pac-man game. So today we use CSS3 to make a dou Dou animation ah.

And the way to do that is very simple. The css3@keyFrames animation and the Rotate () attribute are used to control the rotation, and a box-shadow attribute is basically enough.

rendering

As you can see, the dot keeps moving from right to left, and the ball on the left opens and closes, so it looks like it’s going to go into the mouth.

Implementation steps

Just write a layout style
Up and down closure animation of the ball
Dot animation

The layout style

layout

All we need here is a ball and dots

<div class="demo">
    <div class="pacman"></div>
    <div class="dot"></div>
</div>
Copy the code

Ball style

Now, let’s do a little bit of styling, and we’ll do pseudo-elements here. Notice that we add absolute to it, because we have to animate it up and down, so we do it first.

body .pacman:before {
      content: ' ';
      position: absolute;
      background: #fb07ff;
      width: 100px;
      height: 50px;
      /* Keep the center position */
      left: 50%;
      top: 50%;
      /* Keep the center position */
      margin-left: -50px;
      margin-top: -50px;
      /* Upper semicircle effect */
      border-radius: 50px 50px 0 0;
}
Copy the code

And then it looks like this

And then add after

body .pacman:before,
body .pacman:after
{
      content: ' ';
      position: absolute;
      background: #fb07ff;
      width: 100px;
      height: 50px;
      /* Keep the center position */
      left: 50%;
      top: 50%;
      /* Keep the center position */
      margin-left: -50px;
      margin-top: -50px;
      /* Upper semicircle effect */
      border-radius: 50px 50px 0 0;
}
Copy the code

Again, you might say, why does it look like this? It all overlaps. The :before and :after are both set in the middle of the page. It’s surprising they don’t overlap. So don’t panic!

Dot style

Here like what color do what color is done, also want to add absolute positioning oh

body .dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -5px;
    margin-left: 30px;
    border-radius: 50%;
    background: #02ec2a;
}
Copy the code

Ball animation

One small point to note here is that we wrote the same pattern for both :before and :after for the sphere. For convenience, we use one of them first and add it when the final effect is finished. Here we operate on :before

So before we do that, let’s just do the up and down effect, so let’s use our @keyFrames animation and transform: Rotate () to do that.

What is @keyframes?

Keyframes: Specify the time to change as a percentage, or by the keywords “from” and “to”, equivalent to 0% and 100%. 0% is the start time of animation and 100% is the end time of animation.

Pay attention to

Internet Explorer 10, Firefox, and Opera support the @KeyFrames rule and animation property.
Chrome and Safari require the prefix -webkit-.
Internet Explorer 9, and earlier versions, do not support the @KeyFrame rule or the animation property.

Upper Hemisphere Animation (up)

So let’s do an adaptation here, and then rotate to get the rotation Angle right. It’s a downward bite effect. The code is as follows:

/* up */
@-webkit-keyframes up {

  0%.100% {
    transform: rotate(0);
  }

  50% {
    /* Angle of bite opening */
    transform: rotate(-30deg); }}@-moz-keyframes up {

  0%.100% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(-30deg); }}@-o-keyframes up {

  0%.100% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(-30deg); }}@keyframes up {

  0%.100% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(-30deg); }}Copy the code

Next I animate the top half of the sphere with an infinite loop

In this case, the animation is upper hemisphere, so just add it to :before

body .pacman:before{
  content: ' ';
  position: absolute;
  background: #fb07ff;
  width: 100px;
  height: 50px;
  /* Keep the center position */
  left: 50%;
  top: 50%;
  /* Keep the center position */
  margin-left: -50px;
  margin-top: -50px;
  /* Upper semicircle effect */
  border-radius: 50px 50px 0 0;
  
  /**** add animation ****/
  -webkit-animation: up 0.6 s infinite;
  /* 0.6s animation speed, the larger the speed, the slower infinite -- */
  -moz-animation: up 0.6 s infinite;
  -o-animation: up 0.6 s infinite;
  animation: up 0.6 s infinite;
}
Copy the code

Let’s see what happens

Lower Hemisphere Animation (Down)

/* down */
  @-webkit-keyframes down {

    0%.100% {
      transform: rotate(0);
    }

    50% {
      transform: rotate(30deg); }}@-moz-keyframes down {

    0%.100% {
      transform: rotate(0);
    }

    50% {
      transform: rotate(30deg); }}@-o-keyframes down {

    0%.100% {
      transform: rotate(0);
    }

    50% {
      transform: rotate(30deg); }}@keyframes down {

    0%.100% {
      transform: rotate(0);
    }

    50% {
      transform: rotate(30deg); }}Copy the code

Add: after

body .pacman:after {/* border-radius:0 0 50px 50px;
    -webkit-animation: down 0.6 s infinite;
    -moz-animation: down 0.6 s infinite;
    -o-animation: down 0.6 s infinite;
    animation: down 0.6 s infinite; 
}
Copy the code

The upper and lower animation are finished, let’s see the effect now first, the exciting time is coming, on talent!

Ee-i go! What the hell is this? It’s not what I thought it was. At this time is certainly swearing out group chat, engage in so long to engage in such ah! You can’t do that either

Then we just add a margin-top to “after”. This is the final moment.

Come! Give me the picture! The code!

body .pacman:after {/* * * * */ margin-top: -1px; 
}
Copy the code

Ah, now have no words (dozen can not hit can not…) It’s just fun

Next, do something serious, polka dot animation, not too easy!

Dot animation

Here is a left to right animation, we want to change the value of margin-left, change the current position. Now you should understand why we had absolute positioning, right

/* r-to-l */
  @-webkit-keyframes r-to-l {
    100% {
      margin-left: -1px; }}@-moz-keyframes r-to-l {
    100% {
      margin-left: -1px; }}@-o-keyframes r-to-l {
    100% {
      margin-left: -1px; }}@keyframes r-to-l {
    100% {
      margin-left: -1px; }}Copy the code

Add the dots, and there you have it

body .dot {
    -webkit-animation: r-to-l 0.6 s infinite;
    -moz-animation: r-to-l 0.6 s infinite;
    -o-animation: r-to-l 0.6 s infinite;
    animation: r-to-l 0.6 s infinite;
}
Copy the code

We can clearly see that the dot is a movement from right to left!

Oh, you don’t have as many dots as you did at the beginning, are you kidding me again?

Top talent! Just add a box shadow to it, and then add a z-index to put the dots under the sphere. When you look at the effect, it looks like an infinite number of dots.

body .dot {
    /* The more hierarchical, the higher */
    z-index: -1; 
      
    /* There is only one dot, using the box-shadow attribute. * /
    box-shadow: 30px 0 0 #02ec2a.60px 0 0 #02ec2a.90px 0 0 #02ec2a.120px 0 0 #02ec2a.150px 0 0 #02ec2a; 
}
Copy the code

Don’t worry, how to explain a wave!

box-shadow

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color ()

(1)

: These are the first two

values that are used to set the shadow offset.

sets the horizontal offset, and if negative, the shadow is to the left of the element.

sets the vertical offset, and if it is negative, the shadow is above the element. See

for available units. If both are 0, then the shadow is behind the element. If

or

is set, the blur effect will appear.

(2)

: This is the third

value. The larger the value, the greater the blur area, and the larger and lighter the shadow. It cannot be negative. The default is 0, and the shadow edges are sharp.

(3)

: This is the fourth

value. When you take a positive value, the shadow expands; When the value is negative, the shadow shrinks. The default is 0, where the shadow is the same size as the element. (Default is 0, so only the first 3 values are set here.)

(4)
:
If not specified, it is up to the browser to decide — usually the value of color, but currently Safari takes transparency.
Border-style: Outset type is set out rather than inset(define 3D outset border) The effect depends on the value of the border-color);

The effect

At this point, our code writing is complete!

The complete code

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Eat doug</title>
</head>

<style>
  /* up */
  @-webkit-keyframes up {

    0%.100% {
      transform: rotate(0);
    }

    50% {
      transform: rotate(-30deg); }}/* Angle of bite opening */


  @-moz-keyframes up {

    0%.100% {
      transform: rotate(0);
    }

    50% {
      transform: rotate(-30deg); }}@-o-keyframes up {

    0%.100% {
      transform: rotate(0);
    }

    50% {
      transform: rotate(-30deg); }}@keyframes up {

    0%.100% {
      transform: rotate(0);
    }

    50% {
      transform: rotate(-30deg); }}/* down */
  @-webkit-keyframes down {

    0%.100% {
      transform: rotate(0);
    }

    50% {
      transform: rotate(30deg); }}@-moz-keyframes down {

    0%.100% {
      transform: rotate(0);
    }

    50% {
      transform: rotate(30deg); }}@-o-keyframes down {

    0%.100% {
      transform: rotate(0);
    }

    50% {
      transform: rotate(30deg); }}@keyframes down {

    0%.100% {
      transform: rotate(0);
    }

    50% {
      transform: rotate(30deg); }}/* r-to-l */
  @-webkit-keyframes r-to-l {
    100% {
      margin-left: -1px; }}@-moz-keyframes r-to-l {
    100% {
      margin-left: -1px; }}@-o-keyframes r-to-l {
    100% {
      margin-left: -1px; }}@keyframes r-to-l {
    100% {
      margin-left: -1px; }}body {
    background: #d44747;
    overflow: hidden;
    margin: 0;
  }

  body .pacman:before,
  body .pacman:after {
    content: ' ';
    position: absolute;
    background: #fb07ff;
    width: 100px;
    height: 50px;
    /* Keep the center position */
    left: 50%;
    top: 50%;
    /* Keep the center position */
    margin-left: -50px;
    margin-top: -50px;
    /* Upper semicircle effect */
    border-radius: 50px 50px 0 0;
    / * * / animation
    -webkit-animation: up 0.6 s infinite;
    /* 0.6s animation speed, the larger the speed, the slower infinite -- */
    -moz-animation: up 0.6 s infinite;
    -o-animation: up 0.6 s infinite;
    animation: up 0.6 s infinite;
  }

  body .pacman:after {/* * * * */ margin-top: -1px;
    /* Lower semicircle effect */
    border-radius: 0 0 50px 50px;
    -webkit-animation: down 0.6 s infinite;
    -moz-animation: down 0.6 s infinite;
    -o-animation: down 0.6 s infinite;
    animation: down 0.6 s infinite;
  }

  body .dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -5px;
    margin-left: 30px;
    border-radius: 50%;
    background: #02ec2a;
    /* The more hierarchical, the higher */
    z-index: -1;
    /* There is only one dot, using the box-shadow attribute. * /
    box-shadow: 30px 0 0 #02ec2a.60px 0 0 #02ec2a.90px 0 0 #02ec2a.120px 0 0 #02ec2a.150px 0 0 #02ec2a;
    / * 1, shadow box - : offset - x | offset - y | radius, the blur - | spread - the radius | color (a) (1) < offset - > x < offset - > y: These are the first two 
       
         values to set the shadow offset. 
        
          sets the horizontal offset, and if negative, the shadow is to the left of the element. 
         
           sets the vertical offset, and if it is negative, the shadow is above the element. See 
          
            for available units. If both are 0, then the shadow is behind the element. If 
           
             or 
            
              is set, the blur effect will appear. (2) 
             
              : This is the third 
              
                value. The larger the value, the greater the blur area, and the larger and lighter the shadow. It cannot be negative. The default is 0, and the shadow edges are sharp. ※ (3) 
               
                 : this is the fourth 
                
                  value. When you take a positive value, the shadow expands; When the value is negative, the shadow shrinks. The default is 0, where the shadow is the same size as the element. (The default is 0, so only the first three values are set here.) If not specified, it is up to the browser to decide -- usually the value of color, but currently Safari takes transparency. When it comes to borders, it comes with a width of border-style: OUTSET type rather than inset(define a 3D outset border). The effect depends on the value of the border-color); * /
                
    -webkit-animation: r-to-l 0.6 s infinite;
    -moz-animation: r-to-l 0.6 s infinite;
    -o-animation: r-to-l 0.6 s infinite;
    animation: r-to-l 0.6 s infinite;
  }
</style>

<body>

  <div class="demo">
    <div class="pacman"></div>
    <div class="dot"></div>
  </div>

</body>

</html>
Copy the code

rendering

At the end

That’s all for today! See you next time! Code word is not easy, feel good can move little finger thumbs up yo ~

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

CSS implementation to eat beans animation

introduce

The layout style

layout

Ball style

Dot style

Ball animation

What is @keyframes?

Pay attention to

Upper Hemisphere Animation (up)

Lower Hemisphere Animation (Down)

Dot animation

box-shadow

The complete code

rendering

At the end

CSS implementation to eat beans animation

introduce

The layout style

layout

Ball style

Dot style

Ball animation

What is @keyframes?

Pay attention to

Upper Hemisphere Animation (up)

Lower Hemisphere Animation (Down)

Dot animation

box-shadow

The complete code

rendering

At the end

Related Posts

Js uses anti-shake to monitor screen width changes

3. Js mouse interactive -Raycaster picking up objects

White’s server deployment journey