請收下這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

利用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

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

• Split Text Menu
• Staggered Float Text 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