?1. css的動畫（animation)

css中實現動畫有兩種方式：transition過渡動畫、?animation自定義動畫。

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

• 使用@keyframes自定義關鍵幀動畫并未其命名
• 使用自定義動畫的時候，需要對animation屬性進行配

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

2 . 使用animation 動畫實現一個簡單的打字效果

? js/css 代碼如下

    const contentDiv = document.querySelector('#content')const data = '最簡單的打字機效果實現'.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,使用后臺推送的數據，來動態實現打字效果

選SSE,主要是是我們不需要向后臺推送數據，只需要實時接收就可以，SSE返回的是流式輸出的數據

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

因為我們使用的模塊的格式寫的接口，所以需要在app.js里引入（一定要設置允許跨域，不然會出現跨域的情況）

在需要的頁面中使用new EventSource來接入就可以了

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

可以看到控制臺是以流式來推數據的

把后臺返回的數據，進行拼接展示

   <script>const contentDiv = document.querySelector('#content')let currentContent = '' // 存儲當前顯示的內容function writing(text) {let index = 0function appendText() {if (index < text.length) {currentContent += text[index]contentDiv.innerHTML = currentContentindex++setTimeout(appendText, 100) // 調整這個時間來改變打字速度}}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. 擴展--ch單位

ch是一個相對于數字0的大小

例如1ch 相當于1/2 漢字，也就是2ch 相當于一個漢字的寬度

2ch時如圖：

1ch時如圖：

1ch 相當于1個英文寬度