前言本文是筆者寫CSS時(shí)常用的套路。不論效果再怎么華麗,，萬變不離其宗,。之前發(fā)的CSS技巧大部分都是依照本文的套路來寫的小提示：本文會(huì)不定期更新哦！每打開一次可能會(huì)有新的驚喜一點(diǎn)思考為什么國(guó)內(nèi)的前端做不出高顏值的網(wǎng)站和酷炫的效果,？個(gè)人認(rèn)為有幾點(diǎn)原因：過分執(zhí)著于JS，認(rèn)為CSS無關(guān)緊要 面經(jīng)類文章太多,，有趣的技巧類文章太少 考慮到要兼容IE而不敢玩那些新特性 看的太少,，腦子里沒貨，自然也就缺乏想象力 996的壓迫
1,、交錯(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地址：https:///alphardex/pen/XWWWBmQ2,、用JS分割文本還有一種經(jīng)常用到的玩法：用JS將句子或單詞分割成字母,，并給每個(gè)字母加上不同延時(shí)的動(dòng)畫，同樣也很華麗,。本demo地址：https:///alphardex/full/KKwvKGY一般我們都是從第一個(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地址：https:///alphardex/full/eYYMYXJ所有有交錯(cuò)特性的動(dòng)畫都在這兒3,、隨機(jī)粒子動(dòng)畫說到隨機(jī)性,，我們可以實(shí)現(xiàn)一種更瘋狂的效果：給幾百個(gè)粒子添加交錯(cuò)動(dòng)畫,，并且交錯(cuò)時(shí)間隨機(jī)，位置大小也都是隨機(jī),。如此一來我們就能用純CSS模擬出下雪的效果,。又到了白色相簿的季節(jié)呢~為什么你寫CSS這么熟練啊,？本demo地址：https:///alphardex/full/dyPorwJ偽類和偽元素4,、偽類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地址：https:///alphardex/pen/pooYKVa5,、絕對(duì)定位實(shí)現(xiàn)多重邊框誰規(guī)定按鈕只能有一套邊框的？利用絕對(duì)定位和padding,，我們可以給按鈕做出3套大小不一的邊框來,，這樣效果更炫了。本demo地址：https:///alphardex/full/ZEYXomW6,、偽元素簡(jiǎn)而言之,，偽元素就是在原先的元素基礎(chǔ)上插入額外的元素，而且這個(gè)元素不充當(dāng)HTML的標(biāo)簽,，這樣就能保持HTML結(jié)構(gòu)的整潔,。我們知道每個(gè)元素都有::before和::after這兩個(gè)偽元素，也就是說每個(gè)元素都提供了3個(gè)矩形（元素本身1個(gè),，偽元素2個(gè)）來供我們進(jìn)行形狀的繪制?，F(xiàn)在又有了clip-path這個(gè)屬性，幾乎任意的形狀都可以被繪制出來,，全憑你的想象力上面的動(dòng)圖是條子劃過文本的動(dòng)畫,，條子就是每個(gè)文本所對(duì)應(yīng)的偽元素，對(duì)每個(gè)文本和其偽元素應(yīng)用動(dòng)畫,，就能達(dá)到上圖的效果了本demo地址：https:///alphardex/pen/jOEOEzZ7,、attr()生成文本內(nèi)容元素可以有自定義的屬性值，它的命名格式通常為data-*attr()用于獲取元素的這種自定義屬性值，并賦值給其偽元素的content作為其生成的內(nèi)容利用這個(gè)函數(shù),，我們可以用偽元素在原先文本的基礎(chǔ)上“復(fù)制”出另一個(gè)文本,，如下圖所示。看上去有點(diǎn)亂糟糟的對(duì)吧,？沒事,，給它加上overflow: hidden，把多余的文本遮住,。通過JS分割文本并應(yīng)用交錯(cuò)動(dòng)畫,，就得到了如下的效果，這也是接下來本文要講的overflow障眼法,。本demo地址：https:///alphardex/full/wvBeXjd
8,、overflow障眼法之前有做過閃光按鈕的效果：鼠標(biāo)懸浮按鈕上時(shí)一道光從左到右劃過去,。筆者就用漸變來模擬那道光,，通過transform: translateX()將其平移至右邊。但這樣明顯不對(duì)啊,，這光為啥能被看見呢,？不應(yīng)該把它給“擋”起來嗎？于是乎,，給按鈕加上overflow: hidden,，光在按鈕外的位置時(shí)就被隱藏起來了。本demo地址：https:///alphardex/pen/eYYzXBZ更多障眼法可以看看這個(gè)作品,，一次性看個(gè)夠XD9,、兄弟選擇符定制表單元素提示：這里最好將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地址：https:///alphardex/full/rNNPQwa
CSS特性10、animationCSS動(dòng)畫可以說是利用CSS設(shè)計(jì)炫酷特效的最強(qiáng)法器,，它幾乎貫穿了我的所有作品有人問我為什么我能想出這么多的動(dòng)畫,？筆者閱番百部，對(duì)常用的動(dòng)畫技巧了如指掌,，同樣那些酷炫的網(wǎng)站只要細(xì)心觀察,，也會(huì)給筆者帶來很多設(shè)計(jì)上的靈感。一言以蔽之：只有多欣賞動(dòng)畫，才能寫出好的動(dòng)畫,。11,、border-radius為盒子添加圓角，經(jīng)常用來美化按鈕等組件不規(guī)則的曲邊形狀調(diào)整多個(gè)頂點(diǎn)的border-radius可以做出不規(guī)則的曲邊形狀本demo地址：https:///alphardex/full/abbWOPR12,、box-shadow為盒子添加陰影，增加盒子的立體感,，可以多層疊加,，并且會(huì)使陰影更加絲滑本demo地址：https:///alphardex/full/QWwwwpp13、遮罩如果給box-shadow的擴(kuò)張半徑設(shè)定足夠大的值,，可以用它來遮住背景,，而無需額外的div元素本demo地址：https:///alphardex/full/BaaKvVZ14、內(nèi)發(fā)光注意到box-shadow還有個(gè)inset,，用于盒子內(nèi)部發(fā)光利用這個(gè)特性我們可以在盒子內(nèi)部的某個(gè)范圍內(nèi)設(shè)定顏色,，做出一個(gè)新月形再加點(diǎn)動(dòng)畫和濾鏡效果，“猩紅之月”閃亮登場(chǎng),！本demo地址：https:///alphardex/full/eYmGEGptext-shadow文本陰影,，本質(zhì)上和box-shadow相同，只不過是相對(duì)于文本而言,，常用于文本發(fā)光,，也可通過多層疊加來制作霓虹文本和偽3D文本等效果15、發(fā)光文本本demo地址：https:///alphardex/full/Exxodoq16,、霓虹文本本demo地址：https:///alphardex/full/rNNwmZz17,、偽3D文本本demo地址：https:///alphardex/full/QWWavvx18、background-clip:text能將背景裁剪成文字的前景色,，常用來和color: transparent配合生成漸變文本本demo地址：https:///alphardex/full/QWwveZGgradient漸變可以作為背景圖片的一種,，具有很強(qiáng)的色彩效果，甚至可以用來模擬光19,、linear-gradient這個(gè)作品用到了HTML的dialog標(biāo)簽,，漸變背景，動(dòng)畫以及overflow障眼法,，細(xì)心的你看出來了嗎:)本demo地址：https:///alphardex/full/eYYxzBm20,、radial-gradient徑向漸變常用于生成圓形背景，上面例子中Snow的背景就是一個(gè)橢圓形的徑向漸變此外,，由于背景可以疊加,，我們可以疊加多個(gè)不同位置大小的徑向漸變來生成圓點(diǎn)群，再加上動(dòng)畫就產(chǎn)生了一種微粒效果,，無需多余的div元素,。 本demo地址：https:///alphardex/full/OJPvMGx21,、conic-gradient用一個(gè)偽元素疊在餅圖上面，并將content設(shè)為某個(gè)值（這個(gè)值通過CSS變量計(jì)算出來）,，就能制作出度量計(jì)的效果,，障眼法又一次完成了它的使命。本demo地址：https:///alphardex/full/BaydVvQfilter22、backdrop-filter對(duì)背景應(yīng)用濾鏡,，產(chǎn)生毛玻璃的效果本demo地址：https:///alphardex/full/pooQMVp23,、mix-blend-mode以下利用濾色模式（screen）實(shí)現(xiàn)文本視頻蒙版效果本demo地址：https:///alphardex/full/wvvLYpV24,、clip-pathPS里的裁切,，可以制作各種不規(guī)則形狀。如果和動(dòng)畫結(jié)合也會(huì)相當(dāng)有意思,。本demo地址：https:///alphardex/full/ZEEBRrq
25,、-webkit-box-reflect投影效果，不怎么常用,，適合立體感強(qiáng)的作品,。本demo地址：https:///alphardex/full/ExaZgxp26,、web animations雖然這并不是一個(gè)CSS特性,，但是它經(jīng)常用于完成那些CSS所做不到的事情那么何時(shí)用它呢？當(dāng)CSS動(dòng)畫中有屬性無法從CSS中獲取時(shí),，自然就會(huì)使用到它了跟蹤鼠標(biāo)的位置目前CSS還尚未有獲取鼠標(biāo)位置的API,，因此考慮用JS來進(jìn)行通過查閱相關(guān)的DOM API，發(fā)現(xiàn)在監(jiān)聽鼠標(biāo)事件的API中,，可通過e.clientX和e.clientY來獲得鼠標(biāo)當(dāng)前的位置既然能夠獲取鼠標(biāo)的位置,，那么跟蹤鼠標(biāo)的位置也就不是什么難事了：通過監(jiān)聽mouseenter和mouseleave事件，來獲取鼠標(biāo)出入一個(gè)元素時(shí)的位置,，并用此坐標(biāo)來當(dāng)作鼠標(biāo)的位移距離,，監(jiān)聽mousemove事件，來獲取鼠標(biāo)在元素上移動(dòng)時(shí)的位置,，同樣地用此坐標(biāo)來當(dāng)作鼠標(biāo)的位移距離,，這樣一個(gè)跟蹤鼠標(biāo)的效果就實(shí)現(xiàn)了。本demo地址：https:///alphardex/full/OJPmQGzCSS HoudiniCSS Houdini是CSS的底層API,，它使我們能夠通過這套接口來擴(kuò)展CSS的功能讓漸變動(dòng)起來目前來說,，我們無法直接給漸變添加動(dòng)畫，因?yàn)闉g覽器不理解要改變的值是什么類型這時(shí),，我們就可以利用CSS.registerProperty()來注冊(cè)我們的自定義變量,，并聲明其語法類型（syntax）為顏色類型<color>,，這樣瀏覽器就能理解并對(duì)顏色應(yīng)用插值方法來進(jìn)行動(dòng)畫還記得上文提到的圓錐漸變conic-gradient()嗎？既然它可以用來制作餅圖,，那么我們能不能讓餅圖動(dòng)起來呢,？答案是肯定的，定義三個(gè)變量：--color1,、--color2和--pos,，其中--pos的語法類型為長(zhǎng)度百分比<length-percentage>，將其從0變?yōu)?/span>100%,，餅圖就會(huì)順時(shí)針旋轉(zhuǎn)出現(xiàn),。利用絕對(duì)定位和層疊上下文，我們可以疊加多個(gè)從小到大的餅圖,，再給它們?cè)O(shè)置不同的顏色,，應(yīng)用交錯(cuò)動(dòng)畫，就有了下面這個(gè)炫麗的效果,。本demo地址：https:///alphardex/full/RwNxpXQ27,、彩蛋將交錯(cuò)動(dòng)畫和偽類偽元素結(jié)合起來寫出來的慎重勇者風(fēng)格的菜單本demo地址：https:///alphardex/full/ExavZdV
|
