# CSS-Inspiration

**Repository Path**: qinglingzhiyu/CSS-Inspiration

## Basic Information

- **Project Name**: CSS-Inspiration
- **Description**: CSS Inspiration，在这里找到写 CSS 的灵感！
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2020-11-28
- **Last Updated**: 2024-06-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

![logo2.png](./images/logo2.png)

这里可以让你寻找到使用或者是学习 CSS 的灵感，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。

## 在线预览

[Online Pages](https://chokcoco.github.io/CSS-Inspiration/#/)

## 布局(Layout)

+ [CSS实现瀑布流布局（display: flex）](https://chokcoco.github.io/CSS-Inspiration/#/./layout/flex-waterfalls-flow.md) 
+ [CSS实现瀑布流布局（colum+count）](https://chokcoco.github.io/CSS-Inspiration/#/./layout/colum-waterfalls-flow.md)
+ [CSS实现瀑布流布局（display: grid）](https://chokcoco.github.io/CSS-Inspiration/#/./layout/grid-waterfalls-flow.md)
+ [多方案实现跨行或跨列布局](https://chokcoco.github.io/CSS-Inspiration/#/./layout/multi-row-or-column.md)
+ [多种方案实现单列等宽，其他多列自适应均匀布局](https://chokcoco.github.io/CSS-Inspiration/#/./layout/single-column-isometric.md)
+ [多种方案实现多列等高布局](https://chokcoco.github.io/CSS-Inspiration/#/./layout/multi-column-contour.md)
+ [圣杯布局](https://chokcoco.github.io/CSS-Inspiration/#/./layout/holy-grail-layout.md)
+ [圣杯布局（flex实现）](https://chokcoco.github.io/CSS-Inspiration/#/./layout/flex-holy-grail-layout.md)
+ [双飞翼布局](https://chokcoco.github.io/CSS-Inspiration/#/./layout/double-wing-layout.md)
+ [实现水平垂直居中最便捷的方法](https://chokcoco.github.io/CSS-Inspiration/#/./layout/best-way-to-center-element.md)
+ [使用 margin auto 实现 flex 下的 justify-content: space-between](https://chokcoco.github.io/CSS-Inspiration/#/./layout/use-margin-auto-to-simulate-space-between.md)
+ [使用 margin auto 实现 flex 下的 align-self: flex-end](https://chokcoco.github.io/CSS-Inspiration/#/./layout/use-margin-auto-to-simulate-align-self.md)

## 阴影(box-shadow、drop-shadow)

+ [单侧投影](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/one-sided-shadow.md) 
+ [立体投影](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/solid-shadow.md) 
+ [文字立体投影](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/word-solid-shadow.md)  
+ [长阴影(线性渐变模拟)](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/long-shadow.md) 
+ [线性渐变|阴影实现条纹立体阴影条纹字](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/word-solid-shadow-ii.md)  
+ [使用 box-shadow 实现半透明遮罩](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/opacity-wrap.md) 
+ [box-shadow 实现背景动画](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/shadow-ani.md) 
+ [box-shadow 模拟实现类似线性渐变背景动画](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/shadow-ani-ii.md) 
+ [box-shadow 模拟霓虹氙灯文字效果](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/neon-shadow-light.md) 
+ [单标签借助 inset shdow 实现IE LOGO](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/ie-logo.md) 
+ [借助 filter:drop-shadow ，单标签实现抖音 LOGO](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/douyin-logo.md) 
+ [Box-shadow 实现圆环进度条动画](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/circle-loading.md) 
+ [使用box-shadow/渐变实现内切圆角](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/inscribed-angle.md)
+ [使用box-shadow单标签实现叉子图形](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/single-div-fork.md) 

## 伪类/伪元素

+ [使用`:not()`伪类实现弹窗背景元素模糊](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-not.md)
+ [使用`:not()`伪类控制特殊边框样式](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-not-2.md)
+ [伪类`:focus-within`纯 CSS 方式实现掘金登陆特效](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-juejin.md)
+ [伪类`placeholder-shown`实现表单交互](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-focus-within-placeholder-shown.md) 
+ [伪元素配合 border 实现气泡对话框](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-bubble.md)
+ [伪类`:checked`实现纯 CSS Tab 切换](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-focus-checked.md)
+ [伪类`:target`实现纯 CSS Tab 切换](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-focus-target.md)
+ [伪类`:focus-within`实现纯 CSS Tab 切换](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-focus-within.md)
+ [伪类`:hover`实现纯 CSS 方式控制动画的暂停与播放](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-animation-control-hover.md)
+ [伪类`:checked`实现纯 CSS 方式控制动画的暂停与播放](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-animation-control.md)
+ [伪类`:target`实现纯 CSS 方式控制动画的暂停与播放](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-animation-control-target.md)
+ [借助伪元素实现边界智能判断移动](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-boundary-judge.md)
+ [伪元素实现打点 loading 效果](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-loading-content.md)
+ [伪元素遮罩实现线条 loading 效果](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-loading-line.md)


## 滤镜(fliter)

+ [使用 blur 生成彩色阴影](https://chokcoco.github.io/CSS-Inspiration/#/./filter/filter-shadow.md) 
+ [使用 blur | constrast 生成特殊融合效果](https://chokcoco.github.io/CSS-Inspiration/#/./filter/filter-blur-constrast.md) 
+ [使用 blur | constrast 生成火焰效果](https://chokcoco.github.io/CSS-Inspiration/#/./filter/filter-fire.md) 
+ [使用 blur | constrast 生成火焰效果2](https://chokcoco.github.io/CSS-Inspiration/#/./filter/filter-fire-2.md) 
+ [滤镜及混合模式混搭特效](https://chokcoco.github.io/CSS-Inspiration/#/./filter/filter-mix.md)
+ [使用 blur | constrast 单标签实现滴水效果](https://chokcoco.github.io/CSS-Inspiration/#/./filter/filter-single-div-water-drop.md)
+ [使用 blur | constrast 小球穿梭效果](https://chokcoco.github.io/CSS-Inspiration/#/./filter/filter-ball-through.md)
+ [使用 blur | constrast 小球穿梭放大loading动画](https://chokcoco.github.io/CSS-Inspiration/#/./filter/filter-ball-loading.md)
+ [使用 hue-rotate 实现渐变背景动画](https://chokcoco.github.io/CSS-Inspiration/#/./filter/filter-hue-rotate-color.md)
+ [使用 drop-shadow 配合 clip-path 生成规则阴影](https://chokcoco.github.io/CSS-Inspiration/#/./filter/filter-polygon-shadow.md)
+ [单标签纯CSS实现幽灵动画](https://chokcoco.github.io/CSS-Inspiration/#/./filter/filter-ghost.md)


## 边框(border)

+ [活用 border-radius, 实现波浪动画](https://chokcoco.github.io/CSS-Inspiration/#/./border/border-wave.md)
+ [活用 border-radius, 实现波浪百分比图](https://chokcoco.github.io/CSS-Inspiration/#/./border/border-wave-percent.md)
+ [活用 border-radius, 实现电池充电效果](https://chokcoco.github.io/CSS-Inspiration/#/./border/border-chargin.md)
+ [border-radius 变换实现 loading 效果](https://chokcoco.github.io/CSS-Inspiration/#/./border/border-loading.md)
+ [border-color 变换实现文字输入效果](https://chokcoco.github.io/CSS-Inspiration/#/./border/border-typing.md)
+ [活用 border-radius, 单标签线条动画](https://chokcoco.github.io/CSS-Inspiration/#/./border/border-line-animation.md)
+ [使用 border-radius，模拟绳子下坠动画](https://chokcoco.github.io/CSS-Inspiration/#/./border/border-line-drop-animation.md)
+ [使用 outline 巧妙实现加号符号](https://chokcoco.github.io/CSS-Inspiration/#/./border/border-outline-symbol-add.md)
+ [巧用 overflow 及实现边框线条动画](https://chokcoco.github.io/CSS-Inspiration/#/./border/border-overflow-btn.md)

## 背景/渐变(linear-gradient/radial-gradient/conic-gradient)

+ [线性渐变实现条纹字](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-stripe.md) 
+ [重复径向渐变实现波浪边框](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-wave-border.md) 
+ [渐变实现波浪效果/波浪进度框](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-wave.md) 
+ [渐变实现优惠券波浪造型](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-coupon.md) 
+ [线性渐变实现内切直角](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-inscribed.md) 
+ [线性渐变实现箭头符号](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-arrow.md) 
+ [利用线性渐变实现下划线](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-underline.md) 
+ [利用渐变实现波浪下划线](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-wave-underline.md)
+ [使用 background-attachment 实现毛玻璃效果](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-frosted-glass.md) 
+ [使用渐变实现舞台灯光聚焦效果](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-focus.md) 
+ [圆锥渐变配合混合模式实现炫酷光影效果](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-conic-gradient-animation.md)
+ [mask-image 实现图片变幻](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-mask-image.md)
+ [使用线性渐变实现滚动进度条](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-scroll-indicator.md)
+ [使用线性渐变实现类迷宫图形](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-linear-gradient-maze.md)
+ [使用线性渐变模拟进度条运动](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-linear-progress-bar.md)
+ [使用多重背景单标签实现气泡按钮点击效果](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-btn-click-bubble.md)

## 混合模式（mix-blend-mode/background-blend-mode)

+ [mix-blend-mode 实现 loading 效果](https://chokcoco.github.io/CSS-Inspiration/#/./blendmode/blend-loading.md)
+ [mix-blend-mode 实现颜色叠加旋转动画](https://chokcoco.github.io/CSS-Inspiration/#/./blendmode/blend-rotate.md)
+ [使用 mix-blend-mode 实现抖音 LOGO](https://chokcoco.github.io/CSS-Inspiration/#/./blendmode/blend-douyin-logo.md)
+ [图片的类抖音 LOGO 晕眩效果](https://chokcoco.github.io/CSS-Inspiration/#/./blendmode/blend-mix-img.md)
+ [类抖音 LOGO 文字故障效果](https://chokcoco.github.io/CSS-Inspiration/#/./blendmode/blend-text-glitch.md)
+ [使用 mix-blend-mode 实现图片任意颜色赋值技术](https://chokcoco.github.io/CSS-Inspiration/#/./blendmode/blend-color-set.md)
+ [CSS MIX](https://chokcoco.github.io/CSS-Inspiration/#/./blendmode/blend-mix.md)
+ [CSS WAVE MOVE(惊艳的水波效果)](https://chokcoco.github.io/CSS-Inspiration/#/./blendmode/blend-water-wave.md)

## 3D

+ [使用 translateZ 实现滚动视差](https://chokcoco.github.io/CSS-Inspiration/#/./3d/3d-translate-parallax.md) 
+ [借助 translate3d\perspective 实现 3D 视差效果](https://chokcoco.github.io/CSS-Inspiration/#/./3d/3d-parallax.md) 
+ [借助 translate3d\perspective 实现 3D 视差效果2](https://chokcoco.github.io/CSS-Inspiration/#/./3d/3d-parallax2.md) 
+ [3D 球动画](https://chokcoco.github.io/CSS-Inspiration/#/./3d/3d-ball.md) 
+ [3D 螺旋数字动画](https://chokcoco.github.io/CSS-Inspiration/#/./3d/3d-spiral-number.md)
+ [3D 迷宫线条特效](https://chokcoco.github.io/CSS-Inspiration/#/./3d/3d-maze.md)
+ [3D 无限延伸视角动画](https://chokcoco.github.io/CSS-Inspiration/#/./3d/3d-infinite-maze.md)
+ [3D 数字计数动画](https://chokcoco.github.io/CSS-Inspiration/#/./3d/3d-count-number.md)

## 动画/过渡(transition/animation)

+ [transition-delay 实现按钮border动画效果](https://chokcoco.github.io/CSS-Inspiration/#/./animation/animation-button-border.md)
+ [简单曲线运动](https://chokcoco.github.io/CSS-Inspiration/#/./animation/animation-curve.md)
+ [正负旋转相消动画](https://chokcoco.github.io/CSS-Inspiration/#/./animation/animation-rotate.md)
+ [CSS 巧妙控制动画行进](https://chokcoco.github.io/CSS-Inspiration/#/./animation/animation-play-state.md)
+ [scale 配合 transfrom-origin 精准控制动画方向](https://chokcoco.github.io/CSS-Inspiration/#/./animation/animation-direction.md)

## clip-path

+ [clip-path 实现文字断裂效果](https://chokcoco.github.io/CSS-Inspiration/#/./clippath/clippath-word-crack.md)
+ [clip-path 实现边框线条动画](https://chokcoco.github.io/CSS-Inspiration/#/./clippath/clippath-border-line.md)
+ [clip-path 和 border-image 实现圆角渐变边框](https://chokcoco.github.io/CSS-Inspiration/#/./clippath/clippath-border-image)
+ [clip-path 实现图片的故障艺术风格动画](https://chokcoco.github.io/CSS-Inspiration/#/./clippath/clippath-img-glitch)

## 文本类

+ [使用text-decoration实现波浪效果](https://chokcoco.github.io/CSS-Inspiration/#/./clippath/clippath-word-crack.md)

## 综合

+ [Retina屏下的1px线的实现（兼容2x屏、3x屏幕）](https://chokcoco.github.io/CSS-Inspiration/#/./others/1px-line.md)
+ [纯CSS实现鼠标跟随](https://chokcoco.github.io/CSS-Inspiration/#/./others/pointer-follow.md)
+ [纯CSS实现鼠标跟随2](https://chokcoco.github.io/CSS-Inspiration/#/./others/pointer-follow-2.md)
+ [纯CSS实现鼠标跟随3](https://chokcoco.github.io/CSS-Inspiration/#/./others/pointer-follow-3.md)
+ [CSS文字分裂特效](https://chokcoco.github.io/CSS-Inspiration/#/./others/word-break.md)
+ [CSS文字分裂移动特效](https://chokcoco.github.io/CSS-Inspiration/#/./others/word-break-move.md)
+ [CSS文字故障效果](https://chokcoco.github.io/CSS-Inspiration/#/./others/word-glitch.md)
+ [纯CSS实现360°饼图](https://chokcoco.github.io/CSS-Inspiration/#/./others/others-pie.md)
+ [chrome Tab 分栏实现](https://chokcoco.github.io/CSS-Inspiration/#/./others/others-chrome-tab.md)
+ [华为充电动画](https://chokcoco.github.io/CSS-Inspiration/#/./others/others-huawei-charging.md)
+ [夜晚居室图](https://chokcoco.github.io/CSS-Inspiration/#/./others/others-night.md)
+ [等角螺线](https://chokcoco.github.io/CSS-Inspiration/#/./others/others-equiangular-spiral.md)


## CSS-Doodle

+ [夏日城市夕阳图🌇](https://chokcoco.github.io/CSS-Inspiration/#/./cssdoodle/sunset.md)
+ [CSS-Doodle fish 🐟 & seaweed 🍀](https://chokcoco.github.io/CSS-Inspiration/#/./cssdoodle/fish-seaweed.md)
+ [CSS-Doodle spotlight🎆](https://chokcoco.github.io/CSS-Inspiration/#/./cssdoodle/spotlight.md)
+ [CSS-Doodle 3D Random Circle](https://codepen.io/Chokcoco/pen/MWyJZQY)

## SVG

+ [使用 SVG 实现文字弧形排列](https://chokcoco.github.io/CSS-Inspiration/#/./svg/svg-arc-word.md)
+ [支付宝AR扫福动画](https://chokcoco.github.io/CSS-Inspiration/#/./svg/alipay-ar-scan.md)
+ [SVG Btn Hover Animations](https://chokcoco.github.io/CSS-Inspiration/#/./svg/svg-btn-hover.md)