造視覺魔法：探索 CSS 動(dòng)畫和轉(zhuǎn)換

CSS 動(dòng)畫和轉(zhuǎn)換是為網(wǎng)頁添加生動(dòng)和吸引人的效果的關(guān)鍵。本文將引導(dǎo)你學(xué)習(xí)如何使用 CSS 動(dòng)畫和轉(zhuǎn)換屬性，為你的網(wǎng)頁增添一份魔法。

過渡和動(dòng)畫

過渡和動(dòng)畫是為網(wǎng)頁元素添加平滑過渡效果和吸引人動(dòng)畫的強(qiáng)大方式。

1. 過渡屬性：使用transition

者：alphardex

鏈接：https://juejin.im/post/5e070cd9f265da33f8653f00

大きな星を摘んだなら、あなたは大きな富を手に入れる。

前言

本文是筆者寫 CSS 時(shí)常用的套路。不論效果再怎么華麗，萬變不離其宗。

之前發(fā)的CSS 技巧[1]大部分都是依照本文的套路來寫的

有人問我為什么我能想出這么多的動(dòng)畫？筆者閱番百部，對(duì)常用的動(dòng)畫技巧了如指掌，同樣那些酷炫的網(wǎng)站只要細(xì)心觀察，也會(huì)給筆者帶來很多設(shè)計(jì)上的靈感。

一言以蔽之：只有多欣賞動(dòng)畫，才能寫出好的動(dòng)畫。

交錯(cuò)動(dòng)畫

有時(shí)候，我們需要給多個(gè)元素添加同一個(gè)動(dòng)畫，播放后，不難發(fā)現(xiàn)它們會(huì)一起運(yùn)動(dòng)，一起結(jié)束，這樣就會(huì)顯得很平淡無奇。

那么如何將動(dòng)畫變得稍微有趣一點(diǎn)呢？很簡(jiǎn)單，既然它們都是同一時(shí)刻開始運(yùn)動(dòng)的，那么讓它們不在同一時(shí)刻運(yùn)動(dòng)不就可以了嗎。如何讓它們不在同一時(shí)刻運(yùn)動(dòng)呢？注意到 CSS 動(dòng)畫有延遲（delay）這一屬性。舉個(gè)栗子，比如有十個(gè)元素播放十個(gè)動(dòng)畫，將第二個(gè)元素的動(dòng)畫播放時(shí)間設(shè)定為比第一個(gè)元素晚 0.5 秒（也就是將延遲設(shè)為 0.5 秒），其他元素以此類推，這樣它們就會(huì)錯(cuò)開來，形成一種獨(dú)特的視覺效果。

這就是所謂的交錯(cuò)動(dòng)畫：通過設(shè)置不同的延遲時(shí)間，達(dá)到動(dòng)畫交錯(cuò)播放的效果。

本 DEMO 地址：Staggered Wave Loading[2]

用 JS 分割文本

還有一種經(jīng)常用到的玩法：用 JS 將句子或單詞分割成字母，并給每個(gè)字母加上不同延時(shí)的動(dòng)畫，同樣也很華麗。

本 DEMO 地址：Staggered LandIn Text[3]

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

本 DEMO 地址：Reveal Text[4]

所有有交錯(cuò)特性的動(dòng)畫都在這兒[5]

隨機(jī)粒子動(dòng)畫

說到隨機(jī)性，我們可以實(shí)現(xiàn)一種更瘋狂的效果：給幾百個(gè)粒子添加交錯(cuò)動(dòng)畫，并且交錯(cuò)時(shí)間隨機(jī)，位置大小也都是隨機(jī)。如此一來我們就能用純 CSS 模擬出下雪的效果。

又到了白色相簿的季節(jié)呢~為什么你寫 CSS 這么熟練啊？

本 DEMO 地址：Snow (Pure CSS)[6]

偽類和偽元素

偽類

HTML 元素的狀態(tài)是可以動(dòng)態(tài)變化的。舉個(gè)栗子，當(dāng)你的鼠標(biāo)懸浮到一個(gè)按鈕上時(shí)，按鈕就會(huì)變成"懸浮"狀態(tài)，這時(shí)我們就可以利用偽類:hover來選中這一狀態(tài)的按鈕，并對(duì)其樣式進(jìn)行改變。

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

本 DEMO 地址：Button Hover Border Stroke With Float Text[7]

所有:hover的動(dòng)畫都在這兒[8]

偽元素

簡(jiǎn)而言之，偽元素就是在原先的元素基礎(chǔ)上插入一個(gè)額外的元素，而且這個(gè)元素不充當(dāng) HTML 的標(biāo)簽，這樣就能保持 HTML 結(jié)構(gòu)的整潔。

什么情況下用偽元素呢？比如實(shí)現(xiàn)一根條子劃過文本的動(dòng)畫，在這個(gè)動(dòng)畫中每個(gè)文本都有屬于自己的一根條子，那么我們就可以用偽元素為每個(gè)文本生成一個(gè)條子，而無需特地在 HTML 標(biāo)簽中加入條子的 div（當(dāng)然，如果條子數(shù)量超過了 2 個(gè)，還是用 div 吧）

本 DEMO 地址：Header With Slide Bar[9]

overflow 障眼法

之前有做過閃光按鈕的效果：鼠標(biāo)懸浮按鈕上時(shí)一道光從左到右劃過去。

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

但這樣明顯不對(duì)啊，這光為啥能被看見呢？不應(yīng)該把它給"擋"起來嗎？

于是乎，給按鈕加上overflow: hidden，光在按鈕外的位置時(shí)就被隱藏起來了。

這就是障眼法的力量:)

本 DEMO 地址：Button Hover Shining[10]

更多障眼法可以看看這個(gè)作品[11]，一次性看個(gè)夠。

兄弟選擇符定制表單元素

提示：這里最好將input作為label的子元素，這樣用戶點(diǎn)擊label時(shí)就能傳到input上。

默認(rèn)的input太丑怎么辦？那就把它先抹掉，用appearance: none或opacity: 0都可以。

然后，利用兄弟選擇符~來定制和input相鄰的所有元素（+號(hào)也行，只不過只能選中最近的元素），例如可以用偽元素生成一個(gè)新的方框代替原先的input，利用偽類:checked和動(dòng)畫來表示它被勾選后的狀態(tài)，本質(zhì)上還是障眼法哦~

本 DEMO 地址：Todo List[12]

CSS 特性

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

transform

PS 里的自由變換，各種 CSS 動(dòng)畫都離不開它，可以 3D

例子就不舉了，因?yàn)閹缀跷宜械膭?dòng)畫都用到了它

border-radius

為盒子添加圓角，如果設(shè)定為50%則是圓形，很常用

不規(guī)則的曲邊形狀

調(diào)整多個(gè)頂點(diǎn)的border-radius可以做出不規(guī)則的曲邊形狀

本 DEMO 地址：Nav Tab[13]

box-shadow

為盒子添加陰影，增加盒子的立體感，如果多層疊加的話會(huì)使陰影更加絲滑

本 DEMO 地址：Pagination[14]

遮罩

如果給box-shadow的擴(kuò)張半徑設(shè)定足夠大的值，可以用它來遮住背景，而無需額外的 div 元素

本 DEMO 地址：Burger Menu[15]

text-shadow

文本陰影，本質(zhì)上和box-shadow相同，只不過是相對(duì)于文本而言，常用于文本發(fā)光，也可通過多層疊加來制作霓虹文本和偽 3D 文本等效果

本 DEMO 地址：Staggered GlowIn Text[16]

background-clip:text

能將背景裁剪成文字的前景色，常用來和color: transparent配合生成漸變文本

本 DEMO 地址：Menu Hover Fill Text[17]

gradient

漸變可以作為背景圖片的一種，具有很強(qiáng)的色彩效果，甚至可以用來模擬光

這個(gè)作品用到了 HTML 的dialog標(biāo)簽，漸變背景，動(dòng)畫以及overflow障眼法，細(xì)心的你看出來了嗎:)

本 DEMO 地址：Confirm Modal[18]

filter

PS 里的濾鏡，玩過的都懂，blur最常用

backdrop-filter

對(duì)背景應(yīng)用濾鏡，產(chǎn)生毛玻璃的效果

本 DEMO 地址：Frosted Glass[19]

mix-blend-mode

PS 里的混合模式，常用于文本在背景下的特殊效果

本 DEMO 地址：Menu Hover Image[20]

clip-path

PS 里的裁切，可以制作各種不規(guī)則形狀。如果和動(dòng)畫結(jié)合也會(huì)相當(dāng)有意思

本 DEMO 地址：Name Card Hover Expand[21]

-webkit-box-reflect

投影效果，不怎么常用，適合立體感強(qiáng)的作品

本 DEMO 地址：Card Flip Reflection[22]

彩蛋

將交錯(cuò)動(dòng)畫和偽類偽元素結(jié)合起來寫出來的慎重勇者風(fēng)格的菜單

本 DEMO 地址：Shinchou Menu[23]

關(guān)注我

大家好，這里是 FEHub，每天早上 9 點(diǎn)更新，為你分享優(yōu)質(zhì)精選文章，與你一起進(jìn)步。

如果喜歡這篇文章，希望大家點(diǎn)贊，評(píng)論，轉(zhuǎn)發(fā)。你的支持，是我最大的動(dòng)力，咱們明天見 :)

關(guān)注 「FEHub」，每天進(jìn)步一點(diǎn)點(diǎn)

參考資料

[1]

CSS技巧: https://juejin.im/post/5e033c946fb9a0164b4ef360

[2]

Staggered Wave Loading: https://codepen.io/alphardex/pen/XWWWBmQ

[3]

Staggered LandIn Text: https://codepen.io/alphardex/full/KKwvKGY

[4]

Reveal Text: https://codepen.io/alphardex/full/eYYMYXJ

[5]

這兒: https://codepen.io/alphardex/pens/tags/?selected_tag=staggered

[6]

Snow (Pure CSS 'Snow (Pure CSS)''): https://codepen.io/alphardex/full/dyPorwJ

[7]

Button Hover Border Stroke With Float Text: https://codepen.io/alphardex/pen/pooYKVa

[8]

這兒: https://codepen.io/alphardex/pens/tags/?selected_tag=hover

[9]

Header With Slide Bar: https://codepen.io/alphardex/pen/jOEOEzZ

[10]

Button Hover Shining: https://codepen.io/alphardex/pen/eYYzXBZ

[11]

作品: https://codepen.io/alphardex/pen/VwwVLdM

[12]

Todo List: https://codepen.io/alphardex/full/rNNPQwa

[13]

Nav Tab: https://codepen.io/alphardex/full/abbWOPR

[14]

Pagination: https://codepen.io/alphardex/full/QWwwwpp

[15]

Burger Menu: https://codepen.io/alphardex/full/BaaKvVZ

[16]

Staggered GlowIn Text: https://codepen.io/alphardex/full/Exxodoq

[17]

Menu Hover Fill Text: https://codepen.io/alphardex/full/QWwveZG

[18]

Confirm Modal: https://codepen.io/alphardex/full/eYYxzBm

[19]

Frosted Glass: https://codepen.io/alphardex/full/pooQMVp

[20]

Menu Hover Image: https://codepen.io/alphardex/full/OJPmQGz

[21]

Name Card Hover Expand: https://codepen.io/alphardex/full/ZEEBRrq

[22]

Card Flip Reflection: https://codepen.io/alphardex/full/ExaZgxp

[23]

Shinchou Menu: https://codepen.io/alphardex/full/ExavZdV