作者：alphardex
https://juejin.im/post/5e070cd9f265da33f8653f0
前言
本文是筆者寫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
8、overflow障眼法
之前有做過閃光按鈕的效果：鼠標懸浮按鈕上時一道光從左到右划過去。
筆者就用漸變來模擬那道光，通過transform: translateX()將其平移至右邊。
但這樣明顯不對啊，這光爲啥能被看見呢？不應該把它給“擋”起來嗎？
於是乎，給按鈕加上overflow: hidden，光在按鈕外的位置時就被隱藏起來了。
這就是障眼法的力量:)
本demo地址：https://codepen.io/alphardex/pen/eYYzXBZ
更多障眼法可以看看這個作品，一次性看個夠XD
9、兄弟選擇符定製表單元素
提示：這裏最好將input作爲label的子元素，這樣用戶點擊label時就能傳到input上
默認的input太醜怎麼辦？那就把它先抹掉，用appearance: none或opacity: 0都可以
然後，利用兄弟選擇符~來定製和input相鄰的所有元素（+號也行，只不過只能選中最近的元素），例如可以用僞元素生成一個新的方框代替原先的input，利用僞類:checked和動畫來表示它被勾選後的狀態，本質上還是障眼法哦~
本demo地址：https://codepen.io/alphardex/full/rNNPQwa
CSS特性
善用某些CSS特性，也可以爲你的作品增色不少哦
10、animation
此處包括transition和transform
CSS動畫可以說是利用CSS設計炫酷特效的最強法器，它幾乎貫穿了我的所有作品
有人問我爲什麼我能想出這麼多的動畫？筆者閱番百部，對常用的動畫技巧瞭如指掌，同樣那些酷炫的網站只要細心觀察，也會給筆者帶來很多設計上的靈感。
一言以蔽之：只有多欣賞動畫，才能寫出好的動畫。
11、border-radius
爲盒子添加圓角，經常用來美化按鈕等組件
如果設定爲50%則是圓形，也很常用
不規則的曲邊形狀
調整多個頂點的border-radius可以做出不規則的曲邊形狀
本demo地址：https://codepen.io/alphardex/full/abbWOPR
12、box-shadow
爲盒子添加陰影，增加盒子的立體感，可以多層疊加，並且會使陰影更加絲滑
本demo地址：https://codepen.io/alphardex/full/QWwwwpp
13、遮罩
如果給box-shadow的擴張半徑設定足夠大的值，可以用它來遮住背景，而無需額外的div元素
本demo地址：https://codepen.io/alphardex/full/BaaKvVZ
14、內發光
注意到box-shadow還有個inset，用於盒子內部發光
利用這個特性我們可以在盒子內部的某個範圍內設定顏色，做出一個新月形
再加點動畫和濾鏡效果，“猩紅之月”閃亮登場！
本demo地址：https://codepen.io/alphardex/full/eYmGEGp
text-shadow
文本陰影，本質上和box-shadow相同，只不過是相對於文本而言，常用於文本發光，也可通過多層疊加來製作霓虹文本和僞3D文本等效果
15、發光文本
本demo地址：https://codepen.io/alphardex/full/Exxodoq
16、霓虹文本
本demo地址：https://codepen.io/alphardex/full/rNNwmZz
17、僞3D文本
本demo地址：https://codepen.io/alphardex/full/QWWavvx
18、background-clip:text
能將背景裁剪成文字的前景色，常用來和color: transparent配合生成漸變文本
本demo地址：https://codepen.io/alphardex/full/QWwveZG
gradient
漸變可以作爲背景圖片的一種，具有很強的色彩效果，甚至可以用來模擬光
19、linear-gradient
線性漸變是筆者最常用的漸變
這個作品用到了HTML的dialog標籤，漸變背景，動畫以及overflow障眼法，細心的你看出來了嗎:)
本demo地址：https://codepen.io/alphardex/full/eYYxzBm
20、radial-gradient
徑向漸變常用於生成圓形背景，上面例子中Snow的背景就是一個橢圓形的徑向漸變
此外，由於背景可以疊加，我們可以疊加多個不同位置大小的徑向漸變來生成圓點羣，再加上動畫就產生了一種微粒效果，無需多餘的div元素。
本demo地址：https://codepen.io/alphardex/full/OJPvMGx
21、conic-gradient
圓錐漸變可以用於製作餅圖
用一個僞元素疊在餅圖上面，並將content設爲某個值（這個值通過CSS變量計算出來），就能製作出度量計的效果，障眼法又一次完成了它的使命。
本demo地址：https://codepen.io/alphardex/full/BaydVvQ
filter
PS裏的濾鏡，玩過的都懂，blur最常用
22、backdrop-filter
對背景應用濾鏡，產生毛玻璃的效果
本demo地址：https://codepen.io/alphardex/full/pooQMVp
23、mix-blend-mode
PS裏的混合模式，常用於文本在背景下的特殊效果
以下利用濾色模式（screen）實現文本視頻蒙版效果
本demo地址：https://codepen.io/alphardex/full/wvvLYpV
24、clip-path
PS裏的裁切，可以製作各種不規則形狀。如果和動畫結合也會相當有意思。
本demo地址：https://codepen.io/alphardex/full/ZEEBRrq
25、-webkit-box-reflect
投影效果，不怎麼常用，適合立體感強的作品。
本demo地址：https://codepen.io/alphardex/full/ExaZgxp
26、web animations
雖然這並不是一個CSS特性，但是它經常用於完成那些CSS所做不到的事情
那麼何時用它呢？當CSS動畫中有屬性無法從CSS中獲取時，自然就會使用到它了
跟蹤鼠標的位置
目前CSS還尚未有獲取鼠標位置的API，因此考慮用JS來進行
通過查閱相關的DOM API，發現在監聽鼠標事件的API中，可通過e.clientX和e.clientY來獲得鼠標當前的位置
既然能夠獲取鼠標的位置，那麼跟蹤鼠標的位置也就不是什麼難事了：通過監聽mouseenter和mouseleave事件，來獲取鼠標出入一個元素時的位置，並用此座標來當作鼠標的位移距離，監聽mousemove事件，來獲取鼠標在元素上移動時的位置，同樣地用此座標來當作鼠標的位移距離，這樣一個跟蹤鼠標的效果就實現了。
本demo地址：https://codepen.io/alphardex/full/OJPmQGz
CSS Houdini
CSS Houdini是CSS的底層API，它使我們能夠通過這套接口來擴展CSS的功能
讓漸變動起來
目前來說，我們無法直接給漸變添加動畫，因爲瀏覽器不理解要改變的值是什麼類型
這時，我們就可以利用CSS.registerProperty()來註冊我們的自定義變量，並聲明其語法類型（syntax）爲顏色類型<color>，這樣瀏覽器就能理解並對顏色應用插值方法來進行動畫
還記得上文提到的圓錐漸變conic-gradient()嗎？既然它可以用來製作餅圖，那麼我們能不能讓餅圖動起來呢？答案是肯定的，定義三個變量：--color1、--color2和--pos，其中--pos的語法類型爲長度百分比<length-percentage>，將其從0變爲100%，餅圖就會順時針旋轉出現。
利用絕對定位和層疊上下文，我們可以疊加多個從小到大的餅圖，再給它們設置不同的顏色，應用交錯動畫，就有了下面這個炫麗的效果。
本demo地址：https://codepen.io/alphardex/full/RwNxpXQ
27、彩蛋
將交錯動畫和僞類僞元素結合起來寫出來的慎重勇者風格的菜單
本demo地址：https://codepen.io/alphardex/full/ExavZdV
專注分享當下最實用的前端技術。關注前端達人，與達人一起學習進步！
長按關注"前端達人"
