國(guó)外 網(wǎng)站頁(yè)面跨境電商關(guān)鍵詞工具
?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è)英文寬度