?1. css的動(dòng)畫（animation)

css中實(shí)現(xiàn)動(dòng)畫有兩種方式：transition過(guò)渡動(dòng)畫、?animation自定義動(dòng)畫。

具體的可以看MDN鏈接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation

• 使用@keyframes自定義關(guān)鍵幀動(dòng)畫并未其命名
• 使用自定義動(dòng)畫的時(shí)候，需要對(duì)animation屬性進(jìn)行配

屬性	含義
animation-name	指定一個(gè)或多個(gè)@keyframes自定義的動(dòng)畫名字，當(dāng)多個(gè)的時(shí)候用，隔開。 例如：anination-name:test1,test2
animation-duration	指完成一個(gè)動(dòng)畫的所需要的時(shí)間
animation-timing-function	指動(dòng)畫效果在每個(gè)周期內(nèi)是如何進(jìn)行的 例如：linear：勻速運(yùn)動(dòng) ? ? ? ? ? ?ease-in: 由慢到快?? ?ease-out:?由快到慢??ease-in-out：由慢到快在到慢 ? ? ? ? ? ?steps(n, <jumpterm>)： 將動(dòng)畫分為n分，然后按照n個(gè)定格顯示動(dòng)畫效果 ? ? ? ? ?
animation-delay	?設(shè)置動(dòng)畫延遲時(shí)間（s/ms)，默認(rèn)為0，當(dāng)為負(fù)數(shù)的時(shí)候，代表立即執(zhí)行 ?*****適合當(dāng)多個(gè)動(dòng)畫的時(shí)候，可依次定義每個(gè)動(dòng)畫的延遲執(zhí)行時(shí)間， 區(qū)分開每個(gè)動(dòng)畫。
animation-iteration-count	動(dòng)畫執(zhí)行次數(shù)，默認(rèn)執(zhí)行一次，infinite無(wú)限執(zhí)行 可以指定多個(gè)動(dòng)畫效果，用，隔開
animation-direction	動(dòng)畫的運(yùn)動(dòng)方向 例如：reverse：反方向播放 ? ? ? ? ??alternate：正反交替播放（循環(huán)）
animation-fill-mode	設(shè)置動(dòng)畫在執(zhí)行前后的樣式 例如：forwards ： 目標(biāo)元素保持最后一幀動(dòng)畫 ? ? ? ? ? ?backwards：?目標(biāo)元素保持起始幀動(dòng)畫
animation-play-state	設(shè)置動(dòng)畫是暫停還是開始

2 . 使用animation 動(dòng)畫實(shí)現(xiàn)一個(gè)簡(jiǎn)單的打字效果

? js/css 代碼如下

    const contentDiv = document.querySelector('#content')const data = '最簡(jiǎn)單的打字機(jī)效果實(shí)現(xiàn)'.split('')let index = 0function writing() {if (index < data.length) {contentDiv.innerHTML += data[index++]setTimeout(writing, 100)// requestAnimationFrame(writing)}}writing()

      #content {height: 400px;padding: 10px;font-size: 28px;background-color: #eee;border-radius: 20px;}#content::after {color: #f00;animation: blink 1s infinite;content: '|';}@keyframes blink {from {opacity: 0;}to {opacity: 1;}}

效果如圖：

3. 接入SSE,使用后臺(tái)推送的數(shù)據(jù)，來(lái)動(dòng)態(tài)實(shí)現(xiàn)打字效果

選SSE,主要是是我們不需要向后臺(tái)推送數(shù)據(jù)，只需要實(shí)時(shí)接收就可以，SSE返回的是流式輸出的數(shù)據(jù)

我們可以使用node 自己寫一個(gè)sse 接口，如：

因?yàn)槲覀兪褂玫哪K的格式寫的接口，所以需要在app.js里引入（一定要設(shè)置允許跨域，不然會(huì)出現(xiàn)跨域的情況）

在需要的頁(yè)面中使用new EventSource來(lái)接入就可以了

具體關(guān)于SSE的可以看MDN的鏈接：https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource

可以看到控制臺(tái)是以流式來(lái)推數(shù)據(jù)的

把后臺(tái)返回的數(shù)據(jù)，進(jìn)行拼接展示

   <script>const contentDiv = document.querySelector('#content')let currentContent = '' // 存儲(chǔ)當(dāng)前顯示的內(nèi)容function writing(text) {let index = 0function appendText() {if (index < text.length) {currentContent += text[index]contentDiv.innerHTML = currentContentindex++setTimeout(appendText, 100) // 調(diào)整這個(gè)時(shí)間來(lái)改變打字速度}}appendText()}const sse = new EventSource('http://localhost:3000/user/sse')sse.addEventListener('message', (event) => {const data = JSON.parse(event.data)writing(data.msg)})</script>

效果截圖如下：

4. 擴(kuò)展--ch單位

ch是一個(gè)相對(duì)于數(shù)字0的大小

例如1ch 相當(dāng)于1/2 漢字，也就是2ch 相當(dāng)于一個(gè)漢字的寬度

2ch時(shí)如圖：

1ch時(shí)如圖：

1ch 相當(dāng)于1個(gè)英文寬度