1、前言

CSS是一門很特殊的語言，不像一般的程式語言那樣需要抽象的思維和嚴密的邏輯，它真正需要的是想象力——將你腦中所想的意象用程式碼來表現出來。那麼意象又是如何產生的呢？最常用的方法就是探索和觀察。舉個例子，筆者平時熱愛看番，每看到有意思的場景畫面總會下意識地記錄下來，這對動畫創作會非常有幫助；同樣地，一旦筆者發現一個製作精良的網站，也會將網站上那些吸引人的元素仔細審查一遍，靈感也自然就有了。

演示網址1：codepen

演示網址2：shiroi

原始碼地址：github

本文的技巧將不會止步於72個。靈感不息，創作不止。

2、注意

2.1、相容性

本文的所有技巧都未考慮相容性，因為個人認為相容性是一種束縛，它會妨礙你寫出優秀的作品。如果硬是要考慮的話請自行解決，

2.2、框架

本文所用到的技巧皆是SCSS+TypeScript。如果想移植到React或Vue上的話請根據框架本身的特點自行適配。筆者不用這類框架的原因很簡單：框架很容易就會過時，原生CSS+JS才是王道。

2.3、教程

筆者實在是不擅長寫這類東西，不過倒是可以把常用的屬性和模式列出來，供大家參考參考。

常用屬性：猛戳這裡

常用模式：猛戳這裡

3、動畫

3.1、利用不同的delay實現交錯動畫

• Reveal Text
• Staggered Stair Loading
• Staggered Square Loading
• Staggered Wave Loading
• Gleaming Loading
• Particle Burst
• Gleaming Heading
• Staggered Shrinking Loading
• Snow
• Staggered Rise In Text
• Staggered LandIn Text

4、文字

4.1、利用background-clip:text配合color實現漸變文字效果

• Shining Text
• Menu Hover Fill Text

4.2、利用動態hsl顏色實現彩虹文字效果

• Rainbow Color Text

4.3、利用text-shadow實現發光文字效果

• Neon Text
• Staggered Glow In Text

4.4、利用text-shadow

實現偽3D文字效果

• Staggered Bouncing 3D Loading

4.5、利用web animation實現冒泡文字效果

• Bubbling Text

4.6、利用動態max-width實現文字展開效果

• Abbr Expansion

4.7、利用絕對定位、3D變換和JS實現翻轉文字

• Rotating Text

5、視覺

5.1、利用backdrop-filter實現毛玻璃背景效果

• Frosted Glass

5.2、利用背景、絕對定位和filter實現毛玻璃景深效果

• Frosted Glass Depth of Field

5.3、利用blur和contrast濾鏡實現融合效果

• Snow Scratch

5.4、利用元素疊加blur濾鏡實現日光效果

• Eclipse Loader
• Glowing List Hover
• Glowing Gradient Border
• Glowing Gradient Button
• Crimson Crescent Loading

5.5、利用mix-blend-mode:screen實現文字遮罩效果

• Video Mask Text

5.6、利用-webkit-box-reflect實現倒影效果

• Card Flip Reflection

6、頁面

6.1、利用3D變換實現視差效果

• Parallax

6.2、利用position:sticky實現粘性滾動效果

• Sticky Sections

6.3、利用絕對定位和交錯動畫實現鏡頭拉伸背景效果

• Ken Burns Effect

6.4、利用偽元素、絕對定位和動畫實現滑動幻燈片

• Animated Image Slider

7、元件

7.1、利用border-radius實現曲邊導航欄

• Nav Tab

7.2、利用動畫和絕對定位實現漢堡選單

• Burger Menu

7.3、利用偽元素和動畫實現動態劃線效果

• Menu Hover Underline
• Menu Hover Magnify
• Button Hover Border Stroke With Float Text
• Header With Slide Bar
• Button Hover Multiple Border Stroke

7.4、利用偽元素和overflow:hidden實現交錯分割文字選單

• Split Text Menu
• Staggered Float Text Menu
• Shinchou Menu（慎重勇者風格選單）

7.5、利用偽元素和overflow:hidden實現填充按鈕

• Confirm Modal

7.6、利用偽元素、漸變和overflow:hidden實現閃光按鈕

• Button Hover Shining

7.7、利用絕對定位、動畫、漸變和overflow:hidden實現蛇形邊框按鈕

• Snake Border Button

7.8、利用偽元素、漸變、背景運動實現動態漸變邊框

• Gradient Border

7.9、利用oveflow:hidden、max-height和:target實現手風琴選單

• Accordion Menu
• Accordion Panel

7.10、利用overflow:hidden和scroll相關屬性實現無縫輪播圖

• Carousel

7.11、利用兄弟選擇器配合偽元素自定義單複選框

• Todo List
• Radio Button
• Checkbox
• Toggle
• Elevator Switch

7.12、利用各種屬性實現各種按鈕特效

• Button Collection
• Share Button
• Login Button
• One-Field Login Form

7.13、利用多重box-shadow陰影實現發光按鈕選單

• Glowing Menu Buttons

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

• Progress Bar

7.15、利用-webkit-slider-thumb定製滑塊

• Gradient Range Slider

7.16、利用偽類校驗表單

• Transparent Material Login Form

7.17、利用動畫實現卡片展開

• Card Hover Expand Body

7.18、利用clip-path實現卡片多方向展開

• Name Card Hover Expand

7.19、利用沒有perspective的transform-style:preserve-3d實現等距3D效果

• 3D Cube
• Isometric Icon Hover
• Isometric Images Hover
• Isometric Icon Nav Bar

7.20、利用3D變換實現3D下拉選單

• 3D Dropdown Menu

7.21、利用動畫和JS實現簡單的分頁欄

• Pagination

7.22、利用偽元素、overflow:hidden、動畫、JS實現標籤頁

• Tabs

7.23、利用偽元素、:checked、~兄弟選擇器實現5星評分

• Star Rating

7.24、運用偽元素、層疊關係、3D變換、JS實現翻牌時鐘

• Flip Card Clock

7.25、利用滑鼠事件監聽和web animation實現圖片懸浮選單

• Menu Hover Image

7.26、利用conic-gradient，偽元素和CSS變數實現圓盤度量計

• Gauge (No SVG)、

原文：https://juejin.cn/post/6844904031513477128