不思議のCSS技巧大全

全部技巧均可以在個人codepen上找到

動畫

利用不一樣的delay實現交錯動畫

• Reveal Text
• Staggered Stair Loading
• Staggered Square Loading
• Staggered Wave Loading
• Gleaming Loading
• Particle Burst
• Gleaming Heading
• Share Button

文本

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

• Shining Text

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

• Rainbow Color Text

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

• Neon Text
• Staggered Glow In Text

利用text-shadow實現僞3D文字效果

• Staggered Bouncing 3D Loading

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

• Bubbling Text

利用動態max-width實現文本展開效果

• Abbr Expansion

濾鏡

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

• Frosted Glass

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

• Frosted Glass Depth of Field

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

• Snow Scratch

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

• Eclipse Loader
• Glowing List Hover

組件

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

• Nav Tab

利用動畫和絕對定位實現漢堡菜單

• Burger Menu

利用僞元素和動畫實現動態劃線效果

• Menu Hover Underline
• Menu Hover Magnify
• Button Hover Border Stroke With Float Text

利用僞元素和overflow:hidden實現交錯分割文本菜單

• Split Text Menu

利用僞元素和overflow:hidden實現填充按鈕

• Confirm Modal

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

• Button Hover Shining

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

• Accordion Menu

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

• Carousel

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

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

利用box-shadow實現各類按鈕懸浮特效

• Button Collection

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

• Glowing Menu Buttons

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

• Progress Bar

利用僞類校驗表單

• Transparent Material Login Form

利用絕對定位實現特殊的表單和按鈕

• One-Field Login Form
• Login Button

利用動畫實現卡片展開

• Card Hover Expand Body

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

• Name Card Hover Expand