CSS-Inspiration

這里可以讓你尋找到使用或者是學習 CSS 的靈感，以分類的形式，展示不同 CSS 屬性或者不同的課題使用 CSS 來解決的各種方法。

目前已有上百種的CSS 實現示例，代碼可以拿 來即用

Layout

• CSS實現瀑布流布局(display: flex)
• CSS實現瀑布流布局(colum+count)
• CSS實現瀑布流布局(display: grid)
• 多方案實現跨行或跨列布局
• 多種方案實現單列等寬，其他多列自適應均勻布局
• 多種方案實現多列等高布局
• 圣杯布局
• 圣杯布局(flex實現)
• 雙飛翼布局
• 實現垂直居中最便捷的方法
• 使用 margin auto 實現 flex 下的 justify-content: space-between
• 使用 margin auto 實現 flex 下的 align-self: flex-end

陰影(box-shadow、drop-shadow)

• 單側投影
• 立體投影
• 文字立體投影
• 長陰影(線性漸變模擬)
• 線性漸變|陰影實現條紋立體陰影條紋字
• 使用 box-shadow 實現半透明遮罩
• box-shadow 實現背景動畫
• box-shadow 模擬實現類似線性漸變背景動畫
• box-shadow 模擬霓虹氙燈文字效果
• 單標簽借助 inset shdow 實現IE LOGO
• 借助 filter:drop-shadow ，單標簽實現抖音 LOGO
• Box-shadow 實現圓環進度條動畫
• 使用box-shadow/漸變實現內切圓角
• 使用box-shadow單標簽實現叉子圖形

偽類/偽元素

• 使用:not()偽類實現彈窗背景元素模糊
• 使用:not()偽類控制特殊邊框樣式
• 偽類:focus-within純 CSS 方式實現掘金登陸特效
• 偽類placeholder-shown實現表單交互
• 偽元素配合 border 實現氣泡對話框
• 偽類:checked實現純 CSS Tab 切換
• 偽類:target實現純 CSS Tab 切換
• 偽類:focus-within實現純 CSS Tab 切換
• 偽類:hover實現純 CSS 方式控制動畫的暫停與播放
• 偽類:checked實現純 CSS 方式控制動畫的暫停與播放
• 偽類:target實現純 CSS 方式控制動畫的暫停與播放
• 偽元素實現邊界智能判斷移動
• 偽元素實現打點 loading 效果
• 偽元素遮罩實現線條 loading 效果

濾鏡(fliter)

• 使用 filter:blur 生成彩色陰影
• 使用 filter:blur | filter:constrast 生成特殊融合效果
• 使用 filter:blur | filter:constrast 生成火焰效果
• 使用 filter:blur | filter:constrast 生成火焰效果2
• 濾鏡及混合模式混搭特效
• 使用 filter:blur | filter:constrast 單標簽實現滴水效果
• 使用 filter:blur | filter:constrast 小球穿梭效果
• 使用 hue-rotate 實現漸變背景動畫
• 使用 drop-shadow 配合 clip-path 生成規則陰影

邊框(border)

• 活用 border-radius, 實現波浪動畫
• 活用 border-radius, 實現波浪百分比圖
• border-radius 變換實現 loading 效果
• border-color 變換實現文字輸入效果
• 活用 border-radius, 單標簽線條動畫
• 使用 border-radius，模擬繩子下墜動畫
• 使用 outline 巧妙實現加號符號

背景/漸變(linear-gradient/radial-gradient/conic-gradient)

• 線性漸變實現條紋字
• 重復徑向漸變實現波浪邊框
• 漸變實現波浪效果/波浪進度框
• 漸變實現優惠券波浪造型
• 線性漸變實現內切直角
• 線性漸變實現箭頭符號
• 利用線性漸變實現下劃線
• 使用 background-attachment 實現毛玻璃效果
• 使用漸變實現舞臺燈光聚焦效果
• 圓錐漸變配合混合模式實現炫酷光影效果
• mask-image 實現圖片變幻
• 使用線性漸變實現滾動進度條
• 使用線性漸變實現類迷宮圖形
• 使用漸變實現波浪下劃線
• 使用線性漸變模擬進度條運動

混合模式(mix-blend-mode/background-blend-mode)

• mix-blend-mode 實現 loading 效果
• mix-blend-mode 實現顏色疊加旋轉動畫
• 使用 mix-blend-mode 實現抖音 LOGO
• 類抖音 LOGO 暈眩效果
• 使用 mix-blend-mode 實現圖片任意顏色賦值技術
• CSS MIX
• CSS MAGIC MIX
• CSS MAGIC MIX2
• CSS WAVE MOVE(驚艷的水波效果)

3D

• 使用 translateZ 實現滾動視差
• 借助 translate3dperspective 實現 3D 視差效果
• 借助 translate3dperspective 實現 3D 視差效果2
• 3d 球動畫
• 3D Spiral Number
• CSS 3D MAZE, 驚艷的 CSS 3D 線條特效

動畫/過渡(transition/animation)

• 借助transition-delay實現按鈕border動畫效果
• 簡單曲線運動
• 借助transition-delay簡單多重圓的位移
• 動畫正負旋轉相消
• 巧妙使用 css 控制動畫行進
• [巧妙使用 border 實現下落動畫]

文本類

• 使用text-decoration實現波浪效果

綜合

• retina屏下的1px線的實現
• CSS線條動畫
• PURE CSS 實現鼠標跟隨
• hover | transition 實現鼠標跟隨
• 鼠標跟隨動畫 PURE CSS MAGIC MIX
• CSS文字分裂特效
• CSS TEXT Animation
• 純CSS實現360°餅圖 -- PURE CSS PIE ROTATE
• 純CSS鼠標跟隨按鈕動畫效果
• 純CSS實現蠟燭火焰效果
• 使用CSS讓你的瀏覽器崩潰
• 使用CSS實現一套西文字體

SVG

• 使用 SVG 實現文字弧形排列

示例代碼

CSS 實現瀑布流布局(display: flex)

html:

// pug 模板引擎div.g-container -for(var i = 0; i<4; i++) div.g-queue -for(var j = 0; j<8; j++) div.g-item

SCSS：

$lineCount: 4;$count: 8;@function randomNum($max, $min: 0, $u: 1) { @return ($min + random($max)) * $u;}@function randomColor() { @return rgb(randomNum(255), randomNum(255), randomNum(255));}.g-container { display: flex; flex-direction: row; justify-content: space-between; overflow: hidden;}.g-queue { display: flex; flex-direction: column; flex-basis: 24%;}.g-item { position: relative; width: 100%; margin: 2.5% 0;}@for $i from 1 to $lineCount+1 { .g-queue:nth-child(#{$i}) { @for $j from 1 to $count+1 { .g-item:nth-child(#{$j}) { height: #{randomNum(300, 50)}px; background: randomColor(); &::after { content: "#{$j}"; position: absolute; color: #fff; font-size: 24px; top: 50%; left: 50%; transform: translate(-50%, -50%); } } } }}

運行后的樣子：

獲得

可能通過 github 上面查找

• 由于頭條審核網址比較嚴，防止他們誤會是推廣，所以大家可以自行搜索下載
• 也可以關注我后給我發私信，我把下載地址發送給你

您知道哪些好用的CSS 語法，歡迎評論分享，共同探討學習

如果覺得文章能夠對您有所幫助，可以關注我，你的支持會鼓勵我不斷分享更多更好的優質文章。

總結

以上是生活随笔為你收集整理的css 竖行进度图_前端学习--汇集了大量 CSS 的使用和学习的示例代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。