請收下這72個炫酷的CSS技巧

前言

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

演示網址1：codepen

演示網址2：shiroi

原始碼地址：github

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

注意

相容性

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

框架

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

教程

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

常用屬性：猛戳這裡

常用模式：猛戳這裡

動畫

利用不同的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

文字

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

• Shining Text
• Menu Hover Fill 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

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

• Rotating Text

視覺

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

• Frosted Glass

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

• Frosted Glass Depth of Field

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

• Snow Scratch

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

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

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

• Video Mask Text

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

• Card Flip Reflection

頁面

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

• Parallax

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

• Sticky Sections

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

• Ken Burns Effect

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

• Animated Image Slider

元件

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

• Nav Tab

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

• Burger Menu

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

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

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

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

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

• Confirm Modal

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

• Button Hover Shining

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

• Snake Border Button

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

• Gradient Border

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

• Accordion Menu
• Accordion Panel

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

• Carousel

利用兄弟選擇器配合偽元素自定義單核取方塊

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

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

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

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

• Glowing Menu Buttons

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

• Progress Bar

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

• Gradient Range Slider

利用偽類校驗表單

• Transparent Material Login Form

利用動畫實現卡片展開

• Card Hover Expand Body

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

• Name Card Hover Expand

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

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

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

• 3D Dropdown Menu

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

• Pagination

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

• Tabs

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

• Star Rating

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

• Flip Card Clock

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

• Menu Hover Image

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

• Gauge (No SVG)