這篇文章跟大家介紹CSS JavaScript製作皮卡丘動畫的方法,會一步步跟大家介紹使用css如何繪製皮卡丘,如何使用js實現動態效果,讓皮卡丘動起來。
簡單地記錄思路,有非常多可以優化的地方
利用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; }
.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; }
<pre class="brush:css;toolbar:false;">.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;
}</pre>
.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在test.html 中寫一個id 為demo 的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);但是上面程式碼還存在bug ,打出n ,會發現當字顯示完了之後,n 還是一直增加,我們只需要在顯示完字之後取消計時器即可,取消計時器方法如下
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);知道了一個字一個字顯示的原理,接下來顯示我們的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; } //#######模組化#########把一堆程式碼放到一個文件匯出,在導入######更多程式相關知識,請造訪:###程式設計影片###! ! ###
以上是CSS+JS如何製作皮卡丘動畫(程式碼分析)的詳細內容。更多資訊請關注PHP中文網其他相關文章!