CSS的常用套路

1、交錯動畫

有時候，我們需要給多個元素添加同一個動畫，播放後，不難發現它們會一起運動，一起結束，這樣就會顯得很平淡無奇。

那麼如何將動畫變得稍微有趣一點呢？很簡單，既然它們都是同一時刻開始運動的，那麼讓它們不在同一時刻運動不就可以了嗎。如何讓它們不在同一時刻運動呢？注意到CSS動畫有延遲（delay）這一屬性。

舉個栗子，比如有十個元素播放十個動畫，將第二個元素的動畫播放時間設定爲比第一個元素晚0.5秒（也就是將延遲設爲0.5秒），其他元素以此類推，這樣它們就會錯開來，形成一種獨特的視覺效果。

這就是所謂的交錯動畫：通過設置不同的延遲時間，達到動畫交錯播放的效果。

本demo地址：https://codepen.io/alphardex/pen/XWWWBmQ

2、用JS分割文本

還有一種經常用到的玩法：用JS將句子或單詞分割成字母，並給每個字母加上不同延時的動畫，同樣也很華麗。

本demo地址：https://codepen.io/alphardex/full/KKwvKGY

一般我們都是從第一個元素開始交錯的。但如果要從中間元素開始交錯的話，就要給當前元素的延時各加上一個值，這個值就是中間元素的下標到當前元素的下標的距離（也就是下標之差的絕對值）與步長的乘積，即：delay + Math.abs(i - middle) * step，其中中間元素的下標middle = letters.filter(e => e !== "").length / 2

本demo地址：https://codepen.io/alphardex/full/eYYMYXJ

所有有交錯特性的動畫都在這兒

3、隨機粒子動畫

說到隨機性，我們可以實現一種更瘋狂的效果：給幾百個粒子添加交錯動畫，並且交錯時間隨機，位置大小也都是隨機。如此一來我們就能用純CSS模擬出下雪的效果。

又到了白色相簿的季節呢~爲什麼你寫CSS這麼熟練啊？

本demo地址：https://codepen.io/alphardex/full/dyPorwJ

僞類和僞元素

4、僞類

HTML元素的狀態是可以動態變化的。舉個栗子，當你的鼠標懸浮到一個按鈕上時，按鈕就會變成“懸浮”狀態，這時我們就可以利用僞類:hover來選中這一狀態的按鈕，並對其樣式進行改變。

:hover是筆者最最常用的一個僞類。還有一個很常用的僞類是:nth-child，用於選中元素的某一個子元素。其他的類似:focus、:focus-within等也有一定的使用。

本demo地址：https://codepen.io/alphardex/pen/pooYKVa

5、絕對定位實現多重邊框

誰規定按鈕只能有一套邊框的？利用絕對定位和padding，我們可以給按鈕做出3套大小不一的邊框來，這樣效果更炫了。

本demo地址：https://codepen.io/alphardex/full/ZEYXomW

6、僞元素

簡而言之，僞元素就是在原先的元素基礎上插入額外的元素，而且這個元素不充當HTML的標籤，這樣就能保持HTML結構的整潔。

我們知道每個元素都有::before和::after這兩個僞元素，也就是說每個元素都提供了3個矩形（元素本身1個，僞元素2個）來供我們進行形狀的繪製。現在又有了clip-path這個屬性，幾乎任意的形狀都可以被繪製出來，全憑你的想象力

上面的動圖是條子劃過文本的動畫，條子就是每個文本所對應的僞元素，對每個文本和其僞元素應用動畫，就能達到上圖的效果了

本demo地址：https://codepen.io/alphardex/pen/jOEOEzZ

7、attr()生成文本內容

元素可以有自定義的屬性值，它的命名格式通常爲data-*

attr()用於獲取元素的這種自定義屬性值，並賦值給其僞元素的content作爲其生成的內容

利用這個函數，我們可以用僞元素在原先文本的基礎上“複製”出另一個文本，如下圖所示。

看上去有點亂糟糟的對吧？沒事，給它加上overflow: hidden，把多餘的文本遮住。通過JS分割文本並應用交錯動畫，就得到了如下的效果，這也是接下來本文要講的overflow障眼法。

本demo地址：https://codepen.io/alphardex/full/wvBeXjd