css 背景效果_軟體技術：我寫CSS的常用套路(附demo的效果實作與源碼）

前言

本文是筆者寫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、僞類

本demo位址： https://codepen.io/alphardex/pen/pooYKVa HTML元素的狀态是可以動态變化的。舉個栗子，當你的滑鼠懸浮到一個按鈕上時，按鈕就會變成“懸浮”狀态，這時我們就可以利用僞類

:hover

來選中這一狀态的按鈕，并對其樣式進行改變。

:hover

是筆者最最常用的一個僞類。還有一個很常用的僞類是

:nth-child

，用于選中元素的某一個子元素。其他的類似

:focus

、

:focus-within

等也有一定的使用。 5、絕對定位實作多重邊框 誰規定按鈕隻能有一套邊框的？利用絕對定位和

padding

，我們可以給按鈕做出3套大小不一的邊框來，這樣效果更炫了。

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

6、僞元素

本demo位址：https://codepen.io/alphardex/pen/jOEOEzZ 簡而言之，僞元素就是在原先的元素基礎上插入額外的元素，而且這個元素不充當HTML的标簽，這樣就能保持HTML結構的整潔。 我們知道每個元素都有

::before

和

::after

這兩個僞元素，也就是說每個元素都提供了3個矩形(元素本身1個，僞元素2個)來供我們進行形狀的繪制。現在又有了

clip-path

這個屬性，幾乎任意的形狀都可以被繪制出來，全憑你的想象力 上面的動圖是條子劃過文本的動畫，條子就是每個文本所對應的僞元素，對每個文本和其僞元素應用動畫，就能達到上圖的效果了

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

)為顔色類型

，這樣浏覽器就能了解并對顔色應用插值方法來進行動畫 還記得上文提到的圓錐漸變

conic-gradient()

嗎？既然它可以用來制作餅圖，那麼我們能不能讓餅圖動起來呢？答案是肯定的，定義三個變量：

--color1

、

--color2

和

--pos

，其中

--pos

的文法類型為長度百分比

，将其從

變為

100%

，餅圖就會順時針旋轉出現。

利用絕對定位和層疊上下文，我們可以疊加多個從小到大的餅圖，再給它們設定不同的顔色，應用交錯動畫，就有了下面這個炫麗的效果。

本demo位址：https://codepen.io/alphardex/full/RwNxpXQ

27、彩蛋

将交錯動畫和僞類僞元素結合起來寫出來的慎重勇者風格的菜單 本demo位址：https://codepen.io/alphardex/full/ExavZdV

關注“廣東建院建築資訊系”公衆号，及時接收最新消息