So erstellen Sie eine Pikachu-Animation mit CSS+JS (Code-Analyse)-js-Tutorial-php.cn

Dieser Artikel führt Sie in die Methode zum Erstellen von Pikachu-Animationen mit CSS+JavaScript ein. Außerdem erfahren Sie Schritt für Schritt, wie Sie Pikachu mit CSS zeichnen und wie Sie mit JS dynamische Effekte erzielen und Pikachu bewegen.

So erstellen Sie eine Pikachu-Animation mit CSS+JS (Code-Analyse)

Notieren Sie einfach Ihre Ideen, es gibt viele Bereiche, die optimiert werden können

Zeichnen Sie eine Nase (eine Fächerform)

Verwenden Sie transparent, um ein passendes Dreieck zu zeichnentransparent画出合适的三角形

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

Nach dem Login kopieren

再画出三角形上面的半圆共同组成扇形

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

Nach dem Login kopieren

画左右两个黑眼睛

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

画嘴唇

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

Nach dem Login kopieren

So erstellen Sie eine Pikachu-Animation mit CSS+JS (Code-Analyse)

然后用伪元素遮住鼻子下方的黑色竖线

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

So erstellen Sie eine Pikachu-Animation mit CSS+JS (Code-Analyse)

制作下嘴唇

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

Nach dem Login kopieren

So erstellen Sie eine Pikachu-Animation mit CSS+JS (Code-Analyse)

然后在 .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;
}

Nach dem Login kopieren

添加动画效果

给鼻子添加动画效果

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

Nach dem Login kopieren

动态展示

让一个数字自动一直加 1

新建一个 test.html 和 test.js

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

Nach dem Login kopieren

Lippen zeichnen

Linke Lippe machen

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

Nach dem Login kopieren

So erstellen Sie eine Pikachu-Animation mit CSS+JS (Code-Analyse)

Dann verwenden Sie Pseudoelemente, um die schwarze vertikale Linie unter der Nase abzudecken

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

Nach dem Login kopieren

Verwenden Sie das gleiche Prinzip, um die rechte Lippe zu machen

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

Nach dem Login kopieren

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

Nach dem Login kopieren

< img src="https://img.php.cn /upload/image/387/894/776/162669416158883So erstellen Sie eine Pikachu-Animation mit CSS+JS (Code-Analyse)" title="162669416158883So erstellen Sie eine Pikachu-Animation mit CSS+JS (Code-Analyse)" alt="So erstellen Sie eine Pikachu-Animation mit CSS+JS (Code-Analyse)"/>

Herstellung der Unterlippe So erstellen Sie eine Pikachu-Animation mit CSS+JS (Code-Analyse)

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

Nach dem Login kopieren

So erstellen Sie eine Pikachu-Animation mit CSS+JS (Code-Analyse)

Fügen Sie dann dasselbe wie den Körper im .Mund .oben .Lippenhintergrund hinzu Zeichnen Sie dann den inneren Teil und die roten Wangen

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

Nach dem Login kopieren

Animationseffekte hinzufügen

Animationseffekte zur Nase hinzufügen

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

Nach dem Login kopieren

Dynamic Show

Lassen Sie eine Zahl automatisch um 1 erhöhen

test.html

test.js

Schreiben Sie eine ID der Demo in Test. html div

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

Nach dem Login kopieren

Sie können unten einen Absatz schreiben, ein Wort erscheint nacheinander

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

Nach dem Login kopieren

Aber es gibt immer noch einen Fehler im obigen Code. Wenn Sie n eingeben, werden Sie feststellen, dass n immer noch angezeigt wird Wir müssen den Timer nur abbrechen, nachdem wir ein Wort geschrieben haben. Die Methode zum Abbrechen des Timers ist wie folgt:

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

Nach dem Login kopieren

Da wir nun das Prinzip kennen, ein Wort nach dem anderen anzuzeigen, zeigen wir als nächstes unser CSS an.

Bereiten Sie zwei Divs in test.html vor, eines dient zum Schreiben von CSS-Tags und das andere zum Anzeigen von CSS-Inhalten auf der Seite.

So erstellen Sie eine Pikachu-Animation mit CSS+JS (Code-Analyse) Allerdings gibt es danach immer noch ein Problem: Die angezeigte Animation wird durch den Text nach unten verschoben. Wie im Bild gezeigt

Fügen Sie den folgenden Code zu test.html hinzu

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

Nach dem Login kopieren

Wir haben das Problem der Animation gelöst, und es gibt ein Problem mit unsichtbarem Code Lassen Sie die Bildlaufleiste automatisch nach unten scrollen. Der Inhalt des HTML-Codes muss vom Benutzer nicht gesehen werden. Er kann direkt ausgeblendet werden. Aktualisieren Sie den Code in test.js, damit die Bildlaufleiste angezeigt wird automatisch nach unten scrollen

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

Nach dem Login kopieren

Nach dem Ausblenden der Bildlaufleiste kann der Benutzer weiterhin durch den Inhalt scrollen

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

Nach dem Login kopieren

Funktionen für langsame, mittlere und schnelle Wiedergabe implementieren

Schaltflächen für Wiedergabe, Pause, langsam, mittel und schnell hinzufügen

Nach dem Aktualisieren stellte ich fest, dass die Schaltfläche zuerst größer wurde und dann wiederhergestellt wurde. Dies liegt daran, dass das Zurücksetzen von CSS die Schaltfläche beeinflusst. Aktualisieren Sie den Code in Test und JS.

Teilen Sie den Stil in zwei Teile, die sich nicht gegenseitig beeinflussen

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

Nach dem Login kopieren

3. Idee

Pause: Timer (Wecker) löschen

Spielen: Timer ausführen

Langsam: Wecker zerschlagen, zurücksetzen, die Zeit wird langsamer

Codeoptimierung🎜🎜 rrreee🎜Die vollständige Optimierung ist wie folgt🎜rrreee🎜Die obigen Ergebnisse der Codeoptimierung lauten wie folgt↓↓↓🎜rrreee🎜🎜Wenn eine Funktion nichts tut, sondern nur eine andere Funktion aufruft, kann die externe Funktion direkt weggelassen werden🎜🎜🎜Zum Beispiel 🎜rrreee🎜🎜Blockieren Sie mehrere Funktionen zusammen und stehen Sie einem Objekt gegenüber🎜🎜rrreeerrreee🎜...🎜rrreee 🎜🎜Modular🎜🎜🎜Fügen Sie eine Menge Code in eine Datei ein, exportieren Sie sie und importieren Sie sie dann🎜🎜Für weitere Programmierkenntnisse , besuchen Sie bitte: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Pikachu-Animation mit CSS+JS (Code-Analyse). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!