ホームページ > 記事 > ウェブフロントエンド > CSS+JSでピカチュウアニメーションを作る方法(コード解析)
この記事では、CSS JavaScript を使用してピカチュウをアニメーション化する方法を紹介し、CSS を使用してピカチュウを描画する方法と、js を使用してダイナミックな効果を実現し、ピカチュウを動かす方法も段階的に紹介します。
# アイデアを記録するだけで、最適化できる部分がたくさんあります。 # 鼻 (扇形) を描きますを使用して適切な三角形を描きます<pre class="brush:css;toolbar:false;">.nose {
position: absolute;
border: 10px solid black;
border-color: black transparent transparent;
border-bottom: none;
left: 50%;
top: 145px;
margin-left: -10px;
}</pre>
次に、その三角形上に半円を描いて扇形を形成します
.yuan { position: absolute; height: 8px; width: 20px; top: -18px; left: -10px; border-radius: 8px 8px 0 0; background-color: black; }黒い目を 2 つ描きます左右に
.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; }唇を描きます
.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; }
同じ原理で右の唇を作成します
.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 に追加します。 次に、内側と赤い頬を描画します
.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; }
ダイナミック表示
新しい
test.html
# を作成します## in test.html で、demo の ID を持つ div を記述します
let n = 1; demo.innerHTML = n; setInterval(() => { n += 1; demo.innerHTML = n; }, 1000);
const string = "大家好,我是你们的老朋友"; let n = 1; demo.innerHTML = string.substr(0, n); setInterval(() => { n += 1; demo.innerHTML = string.substr(0, n); }, 300);
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);
一度に 1 つの単語を表示する原理がわかったので、次に CSS を表示します。
test.html 内に 2 つの div を用意します。1 つは CSS タグを記述するために使用され、もう 1 つはページに CSS コンテンツを表示するために使用されます。
しかし、これを実行してもまだ問題があり、表示されたアニメーションがテキストによって押し下げられます。 図に示すように、
次のコードを test.html<style> #html { position: absolute; bottom: 0; left: 0; width: 100%; height: 50vh; } </style>に追加します。アニメーション化する方法の問題は解決しましたが、コードが再び表示されなくなります。問題です。次に、スクロール バーを自動的に下にスクロールさせ、アニメーションを固定する方法を解決する必要があります。HTML のコンテンツはユーザーに表示される必要はありません。
<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 スクロール バーが自動的に下にスクロールするようにコードを更新します
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);
スクロール バーを非表示にしても、ユーザーは引き続きコンテンツをスクロールできます
#demo::-webkit-scrollbar { display: none; }低速、中速、高速を実現します再生機能
.skin * { margin: 0; padding: 0; box-sizing: border-box; } .skin *::before, *::after { box-sizing: border-box; } .skin { background: #ffdb00; min-height: 50vh; position: relative; }
一時停止: タイマー (目覚まし時計) を消す
再生: タイマーを実行ゆっくり: 目覚まし時計を壊して、リセットしてください。時間が遅くなります。btnSlow.onclick = () => { window.clearInterval(id); time = 300; id = setInterval(() => { run(); }, time); }; // 等价于 btnSlow.onclick = () => { window.clearInterval(id); time = 300; id = setInterval(run, time); };
暂停; 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); };
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(); };
関数が別の関数を呼び出すだけで何もしない場合、外部関数は直接省略できます。
例:btnSlow.onclick = () => { slow(); }; //等价 btnSlow.onclick = slow;複数の関数をまとめてブロックし、オブジェクトを指向させる
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; } //モジュール式
多数のコードを 1 つにまとめます。ファイルにエクスポートしてインポートします。
以上がCSS+JSでピカチュウアニメーションを作る方法(コード解析)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。