CSS-Inspiration

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

目前已有上百種的CSS 實(shí)現(xiàn)示例，代碼可以拿 來即用

Layout

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

陰影(box-shadow、drop-shadow)

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

偽類/偽元素

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

濾鏡(fliter)

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

邊框(border)

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

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

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

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

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

3D

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

動畫/過渡(transition/animation)

• 借助transition-delay實(shí)現(xiàn)按鈕border動畫效果
• 簡單曲線運(yùn)動
• 借助transition-delay簡單多重圓的位移
• 動畫正負(fù)旋轉(zhuǎn)相消
• 巧妙使用 css 控制動畫行進(jìn)
• [巧妙使用 border 實(shí)現(xiàn)下落動畫]

文本類

• 使用text-decoration實(shí)現(xiàn)波浪效果

綜合

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

SVG

• 使用 SVG 實(shí)現(xiàn)文字弧形排列

示例代碼

CSS 實(shí)現(xiàn)瀑布流布局(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%); } } } }}

運(yùn)行后的樣子：

獲得

可能通過 github 上面查找

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

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

如果覺得文章能夠?qū)δ兴鶐椭?#xff0c;可以關(guān)注我，你的支持會鼓勵我不斷分享更多更好的優(yōu)質(zhì)文章。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。