我寫CSS的經常使用套路

全ては計算通り。

前言

本文是筆者寫CSS時經常使用的套路。不論效果再怎麼華麗，萬變不離其宗。

以前發的CSS技巧大部分都是依照本文的套路來寫的

經常使用套路

交錯動畫

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

那麼如何將動畫變得稍微有趣一點呢？很簡單，既然它們都是同一時刻開始運動的，那麼讓它們不在同一時刻運動不就能夠了嗎。如何讓它們不在同一時刻運動呢？注意到CSS動畫有延遲（delay）這一屬性。舉個栗子，好比有十個元素播放十個動畫，將第二個元素的動畫播放時間設定爲比第一個元素晚0.5秒（也就是將延遲設爲0.5秒），其餘元素以此類推，這樣它們就會錯開來，造成一種獨特的視覺效果。

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

本demo地址：Staggered Wave Loading

用JS分割文本

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

本demo地址：Staggered LandIn Text

通常咱們都是從第一個元素開始交錯的。但若是要從中間元素開始交錯的話，就要用到絕對值（本質就是數軸上兩點的距離，這樣會好理解一點），時間的計算方法：delay + Math.abs(i - middle) * 0.1

本demo地址：Reveal Text

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

隨機粒子動畫

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

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

本demo地址：Snow (Pure CSS)

僞類和僞元素

僞類

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

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

本demo地址：Button Hover Border Stroke With Float Text

全部:hover的動畫都在這兒

僞元素

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

什麼狀況下用僞元素呢？好比實現一根條子劃過文本的動畫，在這個動畫中每一個文本都有屬於本身的一根條子，那麼咱們就能夠用僞元素爲每一個文本生成一個條子，而無需特意在HTML標籤中加入條子的div（固然，若是條子數量超過了2個，仍是用div吧）

本demo地址：Header With Slide Bar

overflow障眼法

以前有作過閃光按鈕的效果：鼠標懸浮按鈕上時一道光從左到右划過去。

筆者就用漸變來模擬那道光，經過transform: translateX()將其平移至右邊

但這樣明顯不對啊，這光爲啥能被看見呢？不該該把它給「擋」起來嗎？

因而乎，給按鈕加上overflow: hidden，光在按鈕外的位置時就被隱藏起來了

這就是障眼法的力量:)

本demo地址：Button Hover Shining

更多障眼法能夠看看這個做品，一次性看個夠XD

CSS特性

善用某些CSS特性，也能夠爲你的做品增色很多哦

border-radius

爲盒子添加圓角，甚至你還能夠用它作圓形和橢圓等形狀

box-shadow

爲盒子添加陰影，增長盒子的立體感。注意還有內發光（inset）的效果

text-shadow

本質上和box-shadow相同，只不過是相對於文本而言

background-clip:text

用來和color: transparent配合生成漸變文本

gradient

漸變能夠做爲可替換內容（相似圖片）的一種

transform

PS裏的自由變換，各類CSS動畫都離不開它，能夠3D

filter

PS裏的濾鏡，玩過的都懂，blur最經常使用

mix-blend-mode

PS裏的混合模式

clip-path

PS裏的裁切

-webkit-box-reflect

投影效果，不怎麼經常使用，適合立體感強的做品

彩蛋

將交錯動畫和僞類僞元素結合起來寫出來的慎重勇者風格的菜單

本demo地址：Shinchou Menu