前言

CSS是一門很特殊的語(yǔ)言，不像一般的編程語(yǔ)言那樣需要抽象的思維和嚴(yán)密的邏輯，它真正需要的是想象力——將你腦中所想的意象用代碼來(lái)表現(xiàn)出來(lái)。那么意象又是如何產(chǎn)生的呢？最常用的方法就是探索和觀察。舉個(gè)例子，筆者平時(shí)熱愛(ài)看番，每看到有意思的場(chǎng)景畫面總會(huì)下意識(shí)地記錄下來(lái)，這對(duì)動(dòng)畫創(chuàng)作會(huì)非常有幫助；同樣地，一旦筆者發(fā)現(xiàn)一個(gè)制作精良的網(wǎng)站，也會(huì)將網(wǎng)站上那些吸引人的元素仔細(xì)審查一遍，靈感也自然就有了。

演示網(wǎng)址1：codepen^[1]

演示網(wǎng)址2：shiroi^[2]

源碼地址：github^[3]

本文的技巧將不會(huì)止步于72個(gè)。靈感不息，創(chuàng)作不止。

注意

兼容性

本文的所有技巧都未考慮兼容性，因?yàn)閭€(gè)人認(rèn)為兼容性是一種束縛，它會(huì)妨礙你寫出優(yōu)秀的作品。如果硬是要考慮的話請(qǐng)自行解決，這個(gè)網(wǎng)站^[4]或許能幫到你。

框架

本文所用到的技巧皆是SCSS+TypeScript。如果想移植到React或Vue上的話請(qǐng)根據(jù)框架本身的特點(diǎn)自行適配。筆者不用這類框架的原因很簡(jiǎn)單：框架很容易就會(huì)過(guò)時(shí)，原生CSS+JS才是王道。

教程

筆者實(shí)在是不擅長(zhǎng)寫這類東西，不過(guò)倒是可以把常用的屬性和模式列出來(lái)，供大家參考參考。

常用屬性：猛戳這里^[5]

常用模式：猛戳這里^[6]

動(dòng)畫

利用不同的delay實(shí)現(xiàn)交錯(cuò)動(dòng)畫

• Reveal Text^[7]
• Staggered Stair Loading^[8]
• Staggered Square Loading^[9]
• Staggered Wave Loading^[10]
• Gleaming Loading^[11]
• Particle Burst^[12]
• Gleaming Heading^[13]
• Staggered Shrinking Loading^[14]
• Snow^[15]
• Staggered Rise In Text^[16]
• Staggered LandIn Text^[17]

文本

利用background-clip:text配合color實(shí)現(xiàn)漸變文字效果

• Shining Text^[18]
• Menu Hover Fill Text^[19]

利用動(dòng)態(tài)hsl顏色實(shí)現(xiàn)彩虹文字效果

• Rainbow Color Text^[20]

利用text-shadow實(shí)現(xiàn)發(fā)光文字效果

• Neon Text^[21]
• Staggered Glow In Text^[22]

利用text-shadow實(shí)現(xiàn)偽3D文字效果

• Staggered Bouncing 3D Loading^[23]

利用web animation實(shí)現(xiàn)冒泡文字效果

• Bubbling Text^[24]

利用動(dòng)態(tài)max-width實(shí)現(xiàn)文本展開(kāi)效果

• Abbr Expansion^[25]

利用絕對(duì)定位、3D變換和JS實(shí)現(xiàn)翻轉(zhuǎn)文字

• Rotating Text^[26]

視覺(jué)

利用backdrop-filter實(shí)現(xiàn)毛玻璃背景效果

• Frosted Glass^[27]

利用背景、絕對(duì)定位和filter實(shí)現(xiàn)毛玻璃景深效果

• Frosted Glass Depth of Field^[28]

利用blur和contrast濾鏡實(shí)現(xiàn)融合效果

• Snow Scratch^[29]

利用元素疊加blur濾鏡實(shí)現(xiàn)日光效果

• Eclipse Loader^[30]
• Glowing List Hover^[31]
• Glowing Gradient Border^[32]
• Glowing Gradient Button^[33]
• Crimson Crescent Loading^[34]

利用mix-blend-mode:screen實(shí)現(xiàn)文本遮罩效果

• Video Mask Text^[35]

利用-webkit-box-reflect實(shí)現(xiàn)倒影效果

• Card Flip Reflection^[36]

頁(yè)面

利用3D變換實(shí)現(xiàn)視差效果

• Parallax^[37]

利用position:sticky實(shí)現(xiàn)粘性滾動(dòng)效果

• Sticky Sections^[38]

利用絕對(duì)定位和交錯(cuò)動(dòng)畫實(shí)現(xiàn)鏡頭拉伸背景效果

• Ken Burns Effect^[39]

利用偽元素、絕對(duì)定位和動(dòng)畫實(shí)現(xiàn)滑動(dòng)幻燈片

• Animated Image Slider^[40]

組件

利用border-radius實(shí)現(xiàn)曲邊導(dǎo)航欄

• Nav Tab^[41]

利用動(dòng)畫和絕對(duì)定位實(shí)現(xiàn)漢堡菜單

• Burger Menu^[42]

利用偽元素和動(dòng)畫實(shí)現(xiàn)動(dòng)態(tài)劃線效果

• Menu Hover Underline^[43]
• Menu Hover Magnify^[44]
• Button Hover Border Stroke With Float Text^[45]
• Header With Slide Bar^[46]
• Button Hover Multiple Border Stroke^[47]

利用偽元素和overflow:hidden實(shí)現(xiàn)交錯(cuò)分割文本菜單

• Split Text Menu^[48]
• Staggered Float Text Menu^[49]
• Shinchou Menu^[50]（慎重勇者風(fēng)格菜單）

利用偽元素和overflow:hidden實(shí)現(xiàn)填充按鈕

• Confirm Modal^[51]

利用偽元素、漸變和overflow:hidden實(shí)現(xiàn)閃光按鈕

• Button Hover Shining^[52]

利用絕對(duì)定位、動(dòng)畫、漸變和overflow:hidden實(shí)現(xiàn)蛇形邊框按鈕

• Snake Border Button^[53]

利用偽元素、漸變、背景運(yùn)動(dòng)實(shí)現(xiàn)動(dòng)態(tài)漸變邊框

• Gradient Border^[54]

利用oveflow:hidden、max-height和:target實(shí)現(xiàn)手風(fēng)琴菜單

• Accordion Menu^[55]
• Accordion Panel^[56]

利用overflow:hidden和scroll相關(guān)屬性實(shí)現(xiàn)無(wú)縫輪播圖

• Carousel^[57]

利用兄弟選擇器配合偽元素自定義單復(fù)選框

• Todo List^[58]
• Radio Button^[59]
• Checkbox^[60]
• Toggle^[61]
• Elevator Switch^[62]

利用各種屬性實(shí)現(xiàn)各種按鈕特效

• Button Collection^[63]
• Share Button^[64]
• Login Button^[65]
• One-Field Login Form^[66]

利用多重box-shadow陰影實(shí)現(xiàn)發(fā)光按鈕菜單

• Glowing Menu Buttons^[67]

利用counter在偽元素的content中顯示var的值

• Progress Bar^[68]

利用-webkit-slider-thumb定制滑塊

• Gradient Range Slider^[69]

利用偽類校驗(yàn)表單

• Transparent Material Login Form^[70]

利用動(dòng)畫實(shí)現(xiàn)卡片展開(kāi)

• Card Hover Expand Body^[71]

利用clip-path實(shí)現(xiàn)卡片多方向展開(kāi)

• Name Card Hover Expand^[72]

利用沒(méi)有perspective的transform-style:preserve-3d實(shí)現(xiàn)等距3D效果

• 3D Cube^[73]
• Isometric Icon Hover^[74]
• Isometric Images Hover^[75]
• Isometric Icon Nav Bar^[76]

利用3D變換實(shí)現(xiàn)3D下拉菜單

• 3D Dropdown Menu^[77]

利用動(dòng)畫和JS實(shí)現(xiàn)簡(jiǎn)單的分頁(yè)欄

• Pagination^[78]

利用偽元素、overflow:hidden、動(dòng)畫、JS實(shí)現(xiàn)標(biāo)簽頁(yè)

• Tabs^[79]

利用偽元素、:checked、~兄弟選擇器實(shí)現(xiàn)5星評(píng)分

• Star Rating^[80]

運(yùn)用偽元素、層疊關(guān)系、3D變換、JS實(shí)現(xiàn)翻牌時(shí)鐘

• Flip Card Clock^[81]

利用鼠標(biāo)事件監(jiān)聽(tīng)和web animation實(shí)現(xiàn)圖片懸浮菜單

• Menu Hover Image^[82]

利用conic-gradient，偽元素和CSS變量實(shí)現(xiàn)圓盤度量計(jì)

• Gauge \(No SVG\)^[83]