How to create Pikachu animation with CSS+JS (code analysis)-JS Tutorial-php.cn

This article will introduce to you how to animate Pikachu using CSS JavaScript. It will also introduce you step by step how to draw Pikachu using css and how to use js to achieve dynamic effects and make Pikachu move.

How to create Pikachu animation with CSS+JS (code analysis)

Simply record your ideas, there are many areas that can be optimized

Draw a nose (a fan shape)

Use transparent to draw a suitable triangle

.nose {
  position: absolute;
  border: 10px solid black;
  border-color: black transparent transparent;
  border-bottom: none;
  left: 50%;
  top: 145px;
  margin-left: -10px;
}

Copy after login

Then draw the semicircles on the triangle to form a fan shape

.yuan {
  position: absolute;
  height: 8px;
  width: 20px;
  top: -18px;
  left: -10px;
  border-radius: 8px 8px 0 0;
  background-color: black;
}

Copy after login

Draw two black eyes on the left and right

.eye {
  position: absolute;
  border: 2px solid #000000;
  width: 64px;
  height: 64px;
  left: 50%;
  top: 100px;
  margin-left: -32px;
  border-radius: 50%;
  background-color: #2e2e2e;
}
.eye.left {
  transform: translateX(-118px);
}
.eye.right {
  transform: translateX(118px);
}

Copy after login

Draw the white eyes inside the black eyes

.eye::after {
  content: "";
  display: block;
  position: absolute;
  border: 2px solid black;
  background: #ffffff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  left: 10px;
}

Copy after login

Draw the lips

Make the left lip

.mouth .up .lip.left {
  border: 3px solid black;
  width: 86px;
  height: 24px;
  border-radius: 0 0 0 50px;
  border-top-color: transparent;
  border-right-color: transparent;
  position: relative;
  transform: rotate(-15deg);
  position: absolute;
  left: 50%;
  margin-left: -50%;
}

Copy after login

How to create Pikachu animation with CSS+JS (code analysis)

Then use pseudo elements to cover the black vertical line under the nose

.mouth .up .lip.left::before {
  content: "";
  display: block;
  width: 5px;
  height: 30px;
  position: absolute;
  right: -4px;
  bottom: 0px;
  background-color: #ffdb00;
}

Copy after login

Same principle to make the right lip

.mouth .up .lip.right {
  border: 3px solid black;
  width: 86px;
  height: 24px;
  border-radius: 0 0 50px 0;
  border-top-color: transparent;
  border-left-color: transparent;
  position: relative;
  transform: rotate(15deg);
  position: absolute;
  right: 50%;
  margin-right: -50%;
}

Copy after login

.mouth .up .lip.right::before {
  content: "";
  display: block;
  width: 5px;
  height: 30px;
  position: absolute;
  left: -4px;
  bottom: 0px;
  background-color: #ffdb00;
}

Copy after login

How to create Pikachu animation with CSS+JS (code analysis)

Make the lower lip

.mouth .down {
  border: 1px solid red;
  height: 166px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.mouth .down .yuan1 {
  border: 1px solid black;
  position: absolute;
  width: 124px;
  height: 1000px;
  left: 50%;
  margin-left: -62px;
  bottom: 0;
  border-radius: 85px/280px;
  background: #9b000a;
}

Copy after login

How to create Pikachu animation with CSS+JS (code analysis)

Then add the same background as body in .mouth .up .lip Then draw the inner part and the red cheeks

.mouth .down .yuan1 .yuan2 {
  border: 1px solid red;
  position: absolute;
  width: 150px;
  height: 300px;
  background: #fa595b;
  left: 50%;
  margin-left: -75px;
  bottom: -165px;
  border-radius: 100px;
}

.face {
  border: 3px solid black;
  position: absolute;
  width: 88px;
  height: 88px;
  left: 50%;
  margin-left: -44px;
  top: 210px;
}
.face.left {
  transform: translateX(-166px);
  border-radius: 50%;
  background: #ff0000;
}
.face.right {
  transform: translateX(166px);
  border-radius: 50%;
  background: #ff0000;
}

Copy after login

Add animation effects

Add animation effects to the nose

@keyframes wave {
  0% {
    transform: rotate(0);
  }
  33% {
    transform: rotate(6deg);
  }
  66% {
    transform: rotate(-6deg);
  }
  100% {
    transform: rotate(0);
  }
}
.nose:hover {
  transform-origin: center bottom;
  animation: wave 220ms infinite linear;
}

Copy after login

Dynamic display

Let a number automatically increase by 1

Create a new test.html and test.js
in In test.html, write a div with the ID of demo

let n = 1;
demo.innerHTML = n;
setInterval(() => {
  n += 1;
  demo.innerHTML = n;
}, 1000);

Copy after login

You can write a paragraph below, one word after another

const string = "大家好，我是你们的老朋友";
let n = 1;
demo.innerHTML = string.substr(0, n);
setInterval(() => {
  n += 1;
  demo.innerHTML = string.substr(0, n);
}, 300);

Copy after login

But there is still a bug in the above code, type n , you will find that after the words are displayed, n still keeps increasing. We only need to cancel the timer after the words are displayed. The method of canceling the timer is as follows

const string = "大家好，我是你们的老朋友";
let n = 1;
demo.innerHTML = string.substr(0, n);
let id = setInterval(() => {
  n += 1;
  if (n > string.length) {
    window.clearInterval(id);
    return;
  }
  demo.innerHTML = string.substr(0, n);
}, 300);

Copy after login

Now that we know the principle of displaying one word at a time, Next our CSS is shown. Prepare two divs in

test.html, one is used to write CSS tags, and the other is used to display CSS content on the page.

However, there is still a problem after doing this. The displayed animation is pushed down by the text. As shown in the picture

How to create Pikachu animation with CSS+JS (code analysis)

Add the following code to test.html

<style>
  #html {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50vh;
  }
</style>

Copy after login

We solved the problem of how to animate, but the code is invisible again. Problem, next we need to solve how to make the scroll bar automatically scroll down and keep the animation fixed. The content of html does not need to be seen by the user. It can be hidden directly

<style>
  #demo2 {
    display: none;
  }
  #demo{
    position: fixed;
    height: 50vh;
    top: 0;
    left: 0;
    width: 100%;
    overflow-y: auto;
  }
  #html {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50vh;
  }
</style>

Copy after login

in test.js Update the code so that the scroll bar automatically scrolls down

let id = setInterval(() => {
  n += 1;
  if (n > string.length) {
    window.clearInterval(id);
    return;
  }
  demo.innerText = string.substr(0, n);
  demo2.innerHTML = string.substr(0, n);
  demo.scrollTop = demo.scrollHeight; //更新了这里
}, 0);

Copy after login

After hiding the scroll bar, the user can still scroll the content

#demo::-webkit-scrollbar {
  display: none; 
}

Copy after login

Realize slow, medium and fast playback functions

.skin * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.skin *::before,
*::after {
  box-sizing: border-box;
}
.skin {
  background: #ffdb00;
  min-height: 50vh;
  position: relative;
}

Copy after login

How to create Pikachu animation with CSS+JS (code analysis) 3. Ideas

Pause: clear the timer (alarm clock)

Play: run the timer
Slow: smash the alarm clock, reset it, Time is slower

Code optimization

btnSlow.onclick = () => { window.clearInterval(id); time = 300; id = setInterval(() => { run(); }, time); }; // 等价于 btnSlow.onclick = () => { window.clearInterval(id); time = 300; id = setInterval(run, time); };
Copy after login
The complete optimization is as follows

暂停;
btnPause.onclick = () => {
  window.clearInterval(id);
};
播放;
btnPlay.onclick = () => {
  id = setInterval(() => {
    run();
  }, time);
};
慢速;
btnSlow.onclick = () => {
  window.clearInterval(id);
  time = 300;
  id = setInterval(() => {
    run();
  }, time);
};
中速;
btnNormal.onclick = () => {
  window.clearInterval(id);
  time = 50;
  id = setInterval(() => {
    run();
  }, time);
};
快速;
btnFast.onclick = () => {
  window.clearInterval(id);
  time = 0;
  id = setInterval(() => {
    run();
  }, time);
};

Copy after login

The above code optimization results are as follows↓↓↓

const run = () => {
  n += 1;
  if (n > string.length) {
    window.clearInterval(id);
    return;
  }
  demo.innerText = string.substr(0, n);
  demo2.innerHTML = string.substr(0, n);
  demo.scrollTop = demo.scrollHeight;
};

const play = () => {
  return setInterval(run, time);
};

let id = play();

const pause = () => {
  window.clearInterval(id);
};

//暂停
btnPause.onclick = () => {
  pause();
};
// 播放
btnPlay.onclick = () => {
  id = play();
};
//慢速
btnSlow.onclick = () => {
  pause();
  time = 300;
  id = play();
};
//中速
btnNormal.onclick = () => {
  pause();
  time = 50;
  id = play();
};
//快速
btnFast.onclick = () => {
  pause();
  time = 0;
  id = play();
};

Copy after login

If a function does nothing but calls another function, then the external function can be omitted directly

For example

btnSlow.onclick = () => {
  slow();
};
//等价
btnSlow.onclick = slow;

Copy after login

Put several functions Blocked together, oriented to an object

  bindEvents: () => {
    document.querySelector("#btnPause").onclick = player.pause;
    document.querySelector("#btnPlay").onclick = player.play;
    document.querySelector("#btnSlow").onclick = player.slow;
    document.querySelector("#btnNormal").onclick = player.normal;
    document.querySelector("#btnFast").onclick = player.fast;
  }
  //

Copy after login

Modular

Put a bunch of code into one Export in the file and import

For more programming-related knowledge, please visit:

Programming Video

! !

The above is the detailed content of How to create Pikachu animation with CSS+JS (code analysis). For more information, please follow other related articles on the PHP Chinese website!