CSS+JS怎么制作皮卡丘動(dòng)畫

這篇文章主要講解了“CSS+JS怎么制作皮卡丘動(dòng)畫”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS+JS怎么制作皮卡丘動(dòng)畫”吧！

畫鼻子（一個(gè)扇形）

利用 transparent畫出合適的三角形

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

再畫出三角形上面的半圓共同組成扇形

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

畫左右兩個(gè)黑眼睛

.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);
}

再畫出黑眼睛里面的白眼睛

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

畫嘴唇

制作左邊 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%;
}

然后用偽元素遮住鼻子下方的黑色豎線

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

同樣原理制作右 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%;
}

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

制作下嘴唇

.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;
}

然后在 .mouth .up .lip 中 加入和 body 一樣的背景 然后畫里面的部分和紅臉頰

.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;
}

添加動(dòng)畫效果

給鼻子添加動(dòng)畫效果

@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;
}

動(dòng)態(tài)展示

讓一個(gè)數(shù)字自動(dòng)一直加 1

• 新建一個(gè) test.html 和 test.js

• 在 test.html 中寫一個(gè) id 為 demo 的 div

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

下面就可以寫一段話，一個(gè)字一個(gè)字的出現(xiàn)

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

但是上面代碼還存在 bug ，打出 n ，會(huì)發(fā)現(xiàn)當(dāng)字顯示完了之后，n 還是一直增加，我們只需要在顯示完字之后取消計(jì)時(shí)器即可，取消計(jì)時(shí)器方法如下

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);

知道了一個(gè)字一個(gè)字顯示的原理，接下來顯示我們的 CSS。

test.html 中準(zhǔn)備兩個(gè) div ，一個(gè)用來寫 CSS 標(biāo)簽，一個(gè)用來將 CSS 內(nèi)容顯示在頁面上。

但是，這樣之后還是有一個(gè)有問題，顯示的動(dòng)畫被文字頂下去了。 如圖所示

在 test.html 中加入下面代碼

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

我們解決了如何讓動(dòng)畫的問題，又出現(xiàn)了代碼看不見的問題，接下來解決怎么讓滾動(dòng)條自動(dòng)往下滾，并且動(dòng)畫固定不動(dòng)

html 的內(nèi)容是不需要被用戶看見的，可以直接隱藏

<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>

在 test.js 更新代碼，讓滾動(dòng)條自動(dòng)往下滾

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);

隱藏滾動(dòng)條之后，用戶依然可以滾動(dòng)內(nèi)容

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

實(shí)現(xiàn)慢速、中速、快速播放功能

• 添加播放、暫停、慢速、中速、快速按鈕

• 刷新后，發(fā)現(xiàn)按鈕先變大再?gòu)?fù)原，這是因?yàn)?CSS reset 影響到按鈕，在 test,js 中更新代碼

將樣式分為兩塊，互不影響

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

3.思路

• 暫停：清除計(jì)時(shí)器（鬧鐘）

• 播放：運(yùn)行計(jì)時(shí)器

• 慢速：砸了鬧鐘，重新設(shè)一個(gè)，時(shí)間更慢

代碼優(yōu)化

btnSlow.onclick = () => {
  window.clearInterval(id);
  time = 300;
  id = setInterval(() => {
    run();
  }, time);
};
// 等價(jià)于
btnSlow.onclick = () => {
  window.clearInterval(id);
  time = 300;
  id = setInterval(run, time);
};

完整優(yōu)化如下

暫停;
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);
};

上面代碼優(yōu)化結(jié)果如下↓↓↓

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();
};

如果一個(gè)函數(shù)什么都沒干，只是調(diào)用另外一個(gè)函數(shù)，那么外面的函數(shù)可以直接省略

例如

btnSlow.onclick = () => {
  slow();
};
//等價(jià)
btnSlow.onclick = slow;

把幾個(gè)函數(shù)阻止在一起，面向一個(gè)對(duì)象

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

let id = play();

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

const slow = () => {
  pause();
  time = 300;
  id = play();
};

const normal = () => {
  pause();
  time = 50;
  id = play();
};
const fast = () => {
  pause();
  time = 0;
  id = play();
};

const player = {
  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;
  },
  play: () => {
    return setInterval(player.run, time);
  },
  pause: () => {
    window.clearInterval(id);
  },

  slow: () => {
    player.pause();
    time = 300;
    id = player.play();
  },
  normal: () => {
    player.pause();
    time = 50;
    id = player.play();
  },
  fast: () => {
    player.pause();
    time = 0;
    id = player.play();
  },
};

.....

  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;
  }
  //

模塊化

把一堆代碼放到一個(gè)文件里導(dǎo)出，在導(dǎo)入

感謝各位的閱讀，以上就是“CSS+JS怎么制作皮卡丘動(dòng)畫”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)CSS+JS怎么制作皮卡丘動(dòng)畫這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！