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

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.

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

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

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

画左右两个黑眼睛

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

添加动画效果

给鼻子添加动画效果

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

动态展示

让一个数字自动一直加 1

• 新建一个 test.html 和 test.js

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

Dann Zeichne das Dreieck. Die oberen Halbkreise bilden zusammen eine Fächerform
• 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);

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

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

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

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

Herstellung der Unterlippe

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

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

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

Dynamic Show

Lassen Sie eine Zahl automatisch um 1 erhöhen

Erstellen Sie eine neue test.html und 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);
};

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

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

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.

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;

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

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

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!