_sidebar.md

# CSS-Inspiration 

 + [引言](./init.md) 


## 布局（Layout） 

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

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

+ [Box-shadow实现圆环进度条动画](./shadow/circle-loading.md) 
+ [使用box-shadow/渐变实现内切角](./shadow/inscribed-angle.md) 
+ [Neon Effect 3D TEXT](./shadow/neon-effect-3d-text.md) 
+ [box-shadow实现霓虹氖灯文字效果](./shadow/neon-shadow-light.md) 
+ [使用 box-shadow 实现半透明遮罩](./shadow/opacity-wrap.md) 
+ [线性渐变模拟长阴影](./shadow/projection-long-shadow.md) 
+ [单侧投影](./shadow/projection-one-sided-shadow.md) 
+ [立体投影](./shadow/projection-solid-shadow.md) 
+ [线性渐变配合阴影实现条纹立体阴影条纹字](./shadow/projection-word-solid-shadow-ii.md) 
+ [立体文字阴影](./shadow/projection-word-solid-shadow.md) 
+ [浮雕风格按钮](./shadow/relief-style-btn.md) 
+ [box-shadow实现背景动画 2](./shadow/shadow-ani-ii.md) 
+ [box-shadow实现背景动画 ](./shadow/shadow-ani.md) 
+ [单标签实现抖音LOGO](./shadow/single-div-douyin-logo.md) 
+ [单标签实现叉子图形](./shadow/single-div-fork.md) 
+ [单标签借助 inset shadow 实现IE LOGO](./shadow/single-div-ie-logo.md) 

## 伪类/伪元素 

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

## 滤镜(fliter) 

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

## 边框 

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

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

+ [利用渐变及 CSS Property 实现 TV 噪音动画](./background/background-css-property-tv-noise.md) 
+ [使用 background-attachment 实现毛玻璃效果](./background/bg-attachment-frosted-glass.md) 
+ [使用 background-attachment 实现滚动阴影](./background/bg-attachment-scroll-shadow.md) 
+ [background-clip 实现流光文字效果](./background/bg-clip-text-shine.md) 
+ [角向渐变线条 border 效果](./background/bg-conic-border-effect.md) 
+ [角向渐变实现光影 border 效果](./background/bg-conic-border-light-effect.md) 
+ [角向渐变实现纯 CSS 圆环进度图](./background/bg-conic-circle-loading.md) 
+ [角向渐变配合混合模式实现炫酷光影效果](./background/bg-conic-gradient-animation.md) 
+ [一行代码重复角向渐变代码实现酷炫图案](./background/bg-conic-gradient-repeating-pattern.md) 
+ [线性渐变实现箭头符号](./background/bg-linear-arrow.md) 
+ [线性渐变线条 border 效果](./background/bg-linear-border-effect.md) 
+ [线性渐变实现类迷宫图形](./background/bg-linear-gradient-maze.md) 
+ [线性渐变实现内切角](./background/bg-linear-inscribed.md) 
+ [线性渐变模拟进度条运动](./background/bg-linear-progress-bar.md) 
+ [线性渐变实现滚动进度条](./background/bg-linear-scroll-indicator.md) 
+ [线性渐变背景实现条纹字](./background/bg-linear-stripe.md) 
+ [线性渐变实现下划线](./background/bg-linear-underline.md) 
+ [mask-image 实现图片变幻](./background/bg-mask-image.md) 
+ [mask-image 实现文字的渐现](./background/bg-mask-text-show.md) 
+ [mask-image 实现图片转场变换](./background/bg-mask-transition.md) 
+ [使用多重背景单标签实现气泡按钮点击效果](./background/bg-radial-btn-click-bubble.md) 
+ [径向渐变实现优惠券波浪造型](./background/bg-radial-coupon.md) 
+ [径向渐变实现舞台灯光聚焦效果](./background/bg-radial-focus.md) 
+ [渐变实现波浪边框](./background/bg-wave-border.md) 
+ [渐变实现波浪下划线](./background/bg-wave-underline.md) 
+ [渐变实现波浪效果/波浪进度框](./background/bg-wave.md) 
+ [利用 CSS @property 探寻渐变的极限效果](./background/css-property-variable-bg-change-animation.md) 
+ [多重径向渐变实现美妙的艺术背景](./background/repeating-radial-background-artistic-bg.md) 

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

+ [使用 mix-blend-mode 实现图片任意颜色赋值技术](./blendmode/blend-color-set.md) 
+ [使用 mix-blend-mode 实现抖音 LOGO](./blendmode/blend-douyin-logo.md) 
+ [mix-blend-mode 实现 loading 效果](./blendmode/blend-loading.md) 
+ [图片的类抖音 LOGO 晕眩效果](./blendmode/blend-mix-img.md) 
+ [mix-blend-mode MIX](./blendmode/blend-mix.md) 
+ [mix-blend-mode 实现颜色叠加旋转动画](./blendmode/blend-rotate.md) 
+ [类抖音 LOGO 文字故障效果](./blendmode/blend-text-glitch.md) 
+ [使用 mix-blend-mode 实现光影文字效果](./blendmode/blend-text-shine.md) 
+ [CSS WAVE MOVE(惊艳的水波效果)](./blendmode/blend-water-wave.md) 
+ [mix-blend-mode 叠加多重渐变背景](./blendmode/mix-multi-graidient-bg.md) 
+ [使用混合模式叠加实现文字波浪效果](./blendmode/mixblend-text-wave-effect.md) 

## 3D 

+ [3D 球动画](./3d/3d-ball.md) 
+ [3D 数字计数动画](./3d/3d-count-number.md) 
+ [3D 宇宙时空穿梭效果](./3d/3d-css-galaxy-shuttle.md) 
+ [3D 立方体进度条](./3d/3d-cuber-progress-bar.md) 
+ [3D 立方体滚动 404 效果](./3d/3d-cuber-roll-404.md) 
+ [3D 光影变换文字效果](./3d/3d-glowing-rotate-text.md) 
+ [3D 无限延伸视角动画](./3d/3d-infinite-maze.md) 
+ [3D 线条动画](./3d/3d-line.md) 
+ [3D 迷宫线条特效](./3d/3d-maze.md) 
+ [3D 绳动画](./3d/3d-rope-swing.md) 
+ [3D 螺旋数字动画](./3d/3d-spiral-number.md) 
+ [3D 文字出场动画](./3d/3d-text-debut.md) 
+ [借助 translate3d\perspective 实现 3D 视差效果](./3d/parallax-3d-1.md) 
+ [借助 translate3d\perspective 实现 3D 视差效果2](./3d/parallax-3d-2.md) 
+ [使用 translateZ 实现滚动视差](./3d/parallax-3d-translate.md) 

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

+ [借助transition-delay实现按钮border动画效果](./animation/animation-button-border.md) 
+ [CSS实现曲线运动](./animation/animation-curve.md) 
+ [利用 animation-delay 实现文字渐现效果](./animation/animation-delay-control-text-effect.md) 
+ [利用动画延迟实现波浪动画](./animation/animation-delay-wavy.md) 
+ [scale 配合 transfrom-origin 精准控制动画方向](./animation/animation-direction.md) 
+ [CSS 巧妙控制动画行进](./animation/animation-play-state.md) 
+ [正负旋转相消动画](./animation/animation-rotate.md) 

## clip-path 

+ [使用 clip-path 和 border-image 实现圆角渐变边框](./clippath/clippath-border-image.md) 
+ [clip-path 实现边框线条动画 2](./clippath/clippath-border-line-radius.md) 
+ [clip-path 实现边框线条动画](./clippath/clippath-border-line.md) 
+ [clip-path 实现图片的故障艺术风格动画](./clippath/clippath-img-glitch.md) 
+ [clip-path 实现文字断裂效果](./clippath/clippath-word-crack.md) 

## 文本类 

+ [使用text-decoration实现波浪效果](./text/text-underline-wave.md) 

## 综合 

+ [retina屏下的1px线的实现](./others/1px-line.md) 
+ [fieldset 与 legend 实现边框嵌套文字](./others/border-inset-text.md) 
+ [利用 resize 实现图片切换预览功能](./others/css-resize-switch-picture.md) 
+ [暗黑字符雨动画](./others/digital-char-rain-animation.md) 
+ [chrome Tab 分栏实现](./others/others-chrome-tab.md) 
+ [等角螺线](./others/others-equiangular-spiral.md) 
+ [华为充电动画](./others/others-huawei-charging.md) 
+ [夜晚居室图](./others/others-night.md) 
+ [纯CSS实现360°饼图](./others/others-pie.md) 
+ [PURE CSS 实现鼠标跟随2](./others/pointer-follow-2.md) 
+ [PURE CSS 实现鼠标跟随3](./others/pointer-follow-3.md) 
+ [PURE CSS 实现鼠标跟随](./others/pointer-follow.md) 
+ [利用 box-reflect 实现艺术图形](./others/reflect-artist.md) 
+ [利用 box-reflect 实现光影按钮](./others/reflect-btn-effect.md) 
+ [利用 box-reflect 实现 3D 照片墙倒影效果](./others/reflect-text-effect.md) 
+ [CSS文字分裂移动特效](./others/word-break-move.md) 
+ [CSS文字分裂特效](./others/word-break.md) 
+ [CSS文字故障效果](./others/word-glitch.md) 

## CSS-Doodle 

+ [CSS-Doodle clip-path & drop-shadow 实现图案艺术](./cssdoodle/bg-artist-clippath.md) 
+ [CSS-Doodle 利用不同图形线条实现图案艺术 2](./cssdoodle/bg-artist-pattern-2.md) 
+ [CSS-Doodle 利用不同图形线条实现图案艺术](./cssdoodle/bg-artist-pattern.md) 
+ [CSS-Doodle background + mask 实现万花筒效果](./cssdoodle/bg-mask-composite.md) 
+ [CSS-Doodle background + mask 实现条纹艺术背景](./cssdoodle/bg-mask-mix.md) 
+ [CSS-Doodle fish 🐟 & seaweed 🍀](./cssdoodle/fish-seaweed.md) 
+ [CSS-Doodle spotlight🎆](./cssdoodle/spotlight.md) 
+ [夏日城市夕阳图🌇](./cssdoodle/sunset.md) 

## svg 

+ [支付宝AR扫福动画](./svg/alipay-ar-scan.md) 
+ [SVG绘制弧形文字](./svg/svg-arc-word.md) 
+ [SVG 按钮 hover 线条动画](./svg/svg-btn-hover.md) 
+ [SVG 配合 drop-shadow 实现线条光影效果](./svg/svg-dropshadow-line-neon-effect.md) 
+ [利用 SVG feTurbulence 滤镜及 filter: blur 实现鸿蒙 LOGO](./svg/svg-feTurbulence-harmony-logo.md) 
+ [SVG feTurbulence 滤镜实现故障按钮点击效果](./svg/svg-feturbulence-btn-glitch.md) 
+ [SVG feTurbulence 滤镜实现云彩效果 ](./svg/svg-feturbulence-clouds.md) 
+ [SVG 文字 hover 线条动画 2](./svg/svg-line-text-2.md) 
+ [SVG 文字 hover 线条动画](./svg/svg-line-text.md)