個純CSS實現的Loading特效是一個非常簡單而實用的選擇，它由三個圓圈橫向排列，并不斷閃爍。這種動畫效果很適合用于頁面加載過程中，為用戶提供一個愉悅的等待體驗。

在這個特效的設計中，使用了CSS的animation屬性來實現圓圈的閃爍效果。這個特效的實現并沒有用到任何JavaScript，這意味著它可以幫助提升網站的性能，同時也減少了代碼的復雜性。

這個特效的視覺效果非常出色，它為用戶提供了一個簡單而美觀的等待界面。如果您正在尋找一個簡單而實用的加載動畫，那么這個純CSS實現的3個圓圈橫向排列不斷閃爍的Loading特效一定會是一個不錯的選擇。

希望這個特效能夠為您的網站增添一些活力和趣味性！

文將介紹如何使用純CSS實現一個有趣的Loading特效。這個特效將展示9個圓圈在不斷閃爍，看起來非常有趣。

HTML結構

首先，我們需要在HTML中創建9個圓圈的結構。這可以通過使用div元素并給它們不同的類名來實現。以下是HTML代碼：

<div class="loading">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div

CSS樣式

接下來，我們需要使用CSS樣式來使這些圓圈閃爍。我們將使用關鍵幀動畫來實現這個效果。以下是CSS代碼：

.loading,
.loading > div {
  position: relative;
  box-sizing: border-box;
}

.loading {
  display: block;
  font-size: 0;
  color: #000;
}

.loading.la-dark {
  color: #333;
}

.loading > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.loading {
  width: 36px;
  height: 36px;
}

.loading > div {
  width: 8px;
  height: 8px;
  margin: 2px;
  border-radius: 100%;
  animation-name: ball-grid-beat;
  animation-iteration-count: infinite;
}

.loading > div:nth-child(1) {
  animation-duration: 0.65s;
  animation-delay: 0.03s;
}

.loading > div:nth-child(2) {
  animation-duration: 1.02s;
  animation-delay: 0.09s;
}

.loading > div:nth-child(3) {
  animation-duration: 1.06s;
  animation-delay: -0.69s;
}

.loading > div:nth-child(4) {
  animation-duration: 1.5s;
  animation-delay: -0.41s;
}

.loading > div:nth-child(5) {
  animation-duration: 1.6s;
  animation-delay: 0.04s;
}

.loading > div:nth-child(6) {
  animation-duration: 0.84s;
  animation-delay: 0.07s;
}

.loading > div:nth-child(7) {
  animation-duration: 0.68s;
  animation-delay: -0.66s;
}

.loading > div:nth-child(8) {
  animation-duration: 0.93s;
  animation-delay: -0.76s;
}

.loading > div:nth-child(9) {
  animation-duration: 1.24s;
  animation-delay: -0.76s;
}

@keyframes ball-grid-beat {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }

  100% {
    opacity: 1;
  }
}

我們首先設置了一個圓圈容器 .loading，使其垂直居中。然后，我們創建了一堆div樣式，這將是所有圓圈的基本樣式。接下來，我們為每個圓圈設置了不同的背景顏色，并為它們添加了一個名為ball-grid-beat的關鍵幀動畫。這個動畫將使圓圈在1秒內從不透明到半透明來回變化。

最后，我們定義了這個動畫的關鍵幀。我們將圓圈的不透明度從1降到0.35，然后在動畫返回時恢復到1。

結論

通過使用HTML和CSS，我們已經成功地創建了一個有趣的Loading特效，其中9個圓圈不斷閃爍。您可以在自己的網站或項目中使用這個特效，以增加用戶體驗和視覺吸引力。

言

有次看電影， 看到屏幕上一個個的文字蹦出來， 感覺像是有人在打字一樣， 覺得挺有意思， 于是這里也用js實現了一個。

效果預覽

最簡單的打字效果

只要五行代碼， 這里直接貼出來：

const dom = document.querySelector('.content')
const data = '最簡單的打字效果代碼'.split('')
    let index = 0
    function writing(index) {
        if (index < data.length) {
            dom.innerHTML += data[index]
            setTimeout(writing.bind(this), 200, ++index)
        }
    }

是不是超級簡單， 現在只要執行這個函數， 你就能看到這樣的效果了：

實現原理：

通過setTimeout設置一個時間的間隔， 每隔一定時間向dom中插入對應的數據， 并將index加1， 然后重新調用這個寫函數。

在字的后面加上模擬的閃爍光標

思路：

通過一個偽類after將光標定在dom的最后面， 并給一個顯示隱藏的循環動畫模擬光標的閃爍

::after{
    content: '|';
    animation: blink 1s infinite
}
@keyframes blink{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

通過css3的animation我們就實現了一個閃爍的光標效果。

實現：

我們可以把上面的代碼放在一個class中， 然后我們執行writing時將這個class加到對應的dom中即可。

實現輸入漢字加拼音

這里依賴一個插件pinyin， 大家可以通過npm安裝

npm install pinyin

使用也很簡單，我們只要把文本傳入這個插件的方法中， 返回的就是每個漢字的拼音的數組。

import Pinyin from 'pinyin'
let data = '漢字'
let pinyinData = Pinyin(data)       //['han', 'zi']

然后我們通過模板字符串注入到對應的文字后面即可：

this.content.innerHTML += `${arr[index]}<sup>(${pinyinData[index]})</sup>`

這樣就實現了加拼音的簡單效果了。

加動畫

加動畫的代碼也很簡單， 關鍵是思路。

我開始的想法是將每個文字用span標簽包裹起來， 給每個span加動畫即可。后來發現這樣行不通， 因為每次dom中的innerHTML其實是重新渲染的， 那樣的話， 之前的span也會一直有動畫， 這不是我們想要的效果。

解決方案：

給每個span加個class實現動畫， 但在下個span渲染時清除之前span的class， 這樣就實現了只有當前的span有動畫了.

我這里直接選擇了正則匹配粗暴的將class去掉。大家也可以尋找一種更好的方式解決。

代碼如下：

this.content.innerHTML = this.content.innerHTML.replace(/span-animation/g, '') + `<span class="span-animation">${arr[index]}</span>`

實現效果：

后話

這并非最佳實踐， 只是偶然所想， 給各位道友提供個思路，拋磚引玉， O(∩_∩)O哈哈~

源自：https://juejin.im/post/5ddf55835188257313541581