寫CSS動效的常用套路(附demo的效果實現與源碼)

作者: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: noneopacity: 0都可以

然後,利用兄弟選擇符~來定製和input相鄰的所有元素(+號也行,只不過只能選中最近的元素),例如可以用僞元素生成一個新的方框代替原先的input,利用僞類:checked和動畫來表示它被勾選後的狀態,本質上還是障眼法哦~

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

CSS特性

善用某些CSS特性,也可以爲你的作品增色不少哦

10、animation

此處包括transitiontransform

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.clientXe.clientY來獲得鼠標當前的位置

既然能夠獲取鼠標的位置,那麼跟蹤鼠標的位置也就不是什麼難事了:通過監聽mouseentermouseleave事件,來獲取鼠標出入一個元素時的位置,並用此座標來當作鼠標的位移距離,監聽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

專注分享當下最實用的前端技術。關注前端達人,與達人一起學習進步!

長按關注"前端達人"

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章