Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://chokcoco.github.io/CSS-Inspiration/

CSS Inspiration，在这里找到写 CSS 的灵感！
https://chokcoco.github.io/CSS-Inspiration/
Last synced: 20 days ago
JSON representation
CSS Inspiration，在这里找到写 CSS 的灵感！
Host: GitHub
URL: https://chokcoco.github.io/CSS-Inspiration/
Owner: chokcoco
Created: 2018-10-09T03:06:54.000Z (about 6 years ago)
Default Branch: master
Last Pushed: 2024-01-19T17:28:37.000Z (10 months ago)
Last Synced: 2024-10-29T04:34:45.882Z (23 days ago)
Language: CSS
Homepage: https://csscoco.com/inspiration/#/./init
Size: 1.01 MB
Stars: 10,306
Watchers: 167
Forks: 961
Open Issues: 372
Metadata Files:
- Readme: README.md
Awesome Lists containing this project

awesome - css灵感 css的各种解决方案很实用
README

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

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

## 在线预览

[Online Pages](https://csscoco.com/inspiration/#/./init)

## 布局（Layout） 

+ [实现水平垂直居中最便捷的方法](https://csscoco.com/inspiration/#/./layout/best-way-to-center-element.md) 

+ [双飞翼布局](https://csscoco.com/inspiration/#/./layout/double-wing-layout.md) 

+ [grid 布局配合 clip-path 实现 GTA5 封面](https://csscoco.com/inspiration/#/./layout/grid-clip-path-gta5-poster.md) 

+ [flex 实现圣杯布局](https://csscoco.com/inspiration/#/./layout/holy-grail-layout-flex.md) 

+ [圣杯布局](https://csscoco.com/inspiration/#/./layout/holy-grail-layout.md) 

+ [CSS实现瀑布流布局（column-count）](https://csscoco.com/inspiration/#/./layout/masonry-layout-colum.md) 

+ [CSS 实现瀑布流布局（display: flex）](https://csscoco.com/inspiration/#/./layout/masonry-layout-flex.md) 

+ [CSS实现瀑布流布局（display: grid）](https://csscoco.com/inspiration/#/./layout/masonry-layout-grid.md) 

+ [6种实现多列等高的方法](https://csscoco.com/inspiration/#/./layout/multi-column-contour.md) 

+ [多方案实现跨行或跨列布局](https://csscoco.com/inspiration/#/./layout/multi-row-or-column.md) 

+ [多种方案实现单列等宽，其他多列自适应均匀布局](https://csscoco.com/inspiration/#/./layout/single-column-isometric.md) 

+ [使用 margin auto 实现 flex 下的 align-self: flex-end](https://csscoco.com/inspiration/#/./layout/use-margin-auto-to-simulate-align-self.md) 

+ [使用 margin auto 实现 flex 下的 justify-content: space-between](https://csscoco.com/inspiration/#/./layout/use-margin-auto-to-simulate-space-between.md) 

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

+ [Box-shadow实现圆环进度条动画](https://csscoco.com/inspiration/#/./shadow/circle-loading.md) 

+ [使用box-shadow/渐变实现内切角](https://csscoco.com/inspiration/#/./shadow/inscribed-angle.md) 

+ [Neon Effect 3D TEXT](https://csscoco.com/inspiration/#/./shadow/neon-effect-3d-text.md) 

+ [box-shadow实现霓虹氖灯文字效果](https://csscoco.com/inspiration/#/./shadow/neon-shadow-light.md) 

+ [使用 box-shadow 实现半透明遮罩](https://csscoco.com/inspiration/#/./shadow/opacity-wrap.md) 

+ [线性渐变模拟长阴影](https://csscoco.com/inspiration/#/./shadow/projection-long-shadow.md) 

+ [单侧投影](https://csscoco.com/inspiration/#/./shadow/projection-one-sided-shadow.md) 

+ [立体投影](https://csscoco.com/inspiration/#/./shadow/projection-solid-shadow.md) 

+ [线性渐变配合阴影实现条纹立体阴影条纹字](https://csscoco.com/inspiration/#/./shadow/projection-word-solid-shadow-ii.md) 

+ [立体文字阴影](https://csscoco.com/inspiration/#/./shadow/projection-word-solid-shadow.md) 

+ [浮雕风格按钮](https://csscoco.com/inspiration/#/./shadow/relief-style-btn.md) 

+ [box-shadow实现背景动画 2](https://csscoco.com/inspiration/#/./shadow/shadow-ani-ii.md) 

+ [box-shadow实现背景动画 ](https://csscoco.com/inspiration/#/./shadow/shadow-ani.md) 

+ [单标签实现抖音LOGO](https://csscoco.com/inspiration/#/./shadow/single-div-douyin-logo.md) 

+ [单标签实现叉子图形](https://csscoco.com/inspiration/#/./shadow/single-div-fork.md) 

+ [单标签借助 inset shadow 实现IE LOGO](https://csscoco.com/inspiration/#/./shadow/single-div-ie-logo.md) 

## 伪类/伪元素 

+ [伪元素 hover 实现纯 CSS 方式控制动画的暂停与播放](https://csscoco.com/inspiration/#/./pesudo/pesudo-animation-control-hover.md) 

+ [伪元素 target 实现纯 CSS 方式控制动画的暂停与播放](https://csscoco.com/inspiration/#/./pesudo/pesudo-animation-control-target.md) 

+ [伪元素 checked 实现纯 CSS 方式控制动画的暂停与播放](https://csscoco.com/inspiration/#/./pesudo/pesudo-animation-control.md) 

+ [伪元素实现边界智能判断移动](https://csscoco.com/inspiration/#/./pesudo/pesudo-boundary-judge.md) 

+ [伪元素+border实现气泡对话框](https://csscoco.com/inspiration/#/./pesudo/pesudo-bubble.md) 

+ [使用 checked 伪类实现纯 CSS Tab 切换](https://csscoco.com/inspiration/#/./pesudo/pesudo-focus-checked.md) 

+ [使用 target 伪类实现纯 CSS Tab 切换](https://csscoco.com/inspiration/#/./pesudo/pesudo-focus-target.md) 

+ [placeholder-shown 配合 focus-within 实现 input 输入交互](https://csscoco.com/inspiration/#/./pesudo/pesudo-focus-within-placeholder-shown.md) 

+ [focus-within switch tab](https://csscoco.com/inspiration/#/./pesudo/pesudo-focus-within.md) 

+ [伪元素 focus-within 纯 CSS 方式实现掘金登陆特效](https://csscoco.com/inspiration/#/./pesudo/pesudo-juejin.md) 

+ [伪元素实现打点 loading 效果](https://csscoco.com/inspiration/#/./pesudo/pesudo-loading-content.md) 

+ [伪元素遮罩实现线条 loading 效果](https://csscoco.com/inspiration/#/./pesudo/pesudo-loading-line.md) 

+ [使用:not()伪类控制特殊边框样式](https://csscoco.com/inspiration/#/./pesudo/pesudo-not-2.md) 

+ [使用:not()伪类实现弹窗背景元素模糊](https://csscoco.com/inspiration/#/./pesudo/pesudo-not.md) 

## 滤镜(fliter) 

+ [小球穿梭放大loading动画](https://csscoco.com/inspiration/#/./filter/filter-ball-loading.md) 

+ [小球穿梭效果](https://csscoco.com/inspiration/#/./filter/filter-ball-through.md) 

+ [使用 filter:blur | filter:constrast 生成特殊融合效果](https://csscoco.com/inspiration/#/./filter/filter-blur-constrast.md) 

+ [使用 filter:blur | filter:constrast 生成火焰效果2](https://csscoco.com/inspiration/#/./filter/filter-fire-2.md) 

+ [使用 filter:blur | filter:constrast 生成火焰效果](https://csscoco.com/inspiration/#/./filter/filter-fire.md) 

+ [单标签纯CSS实现幽灵动画](https://csscoco.com/inspiration/#/./filter/filter-ghost.md) 

+ [使用 hue-rotate 实现渐变背景动画](https://csscoco.com/inspiration/#/./filter/filter-hue-rotate-color.md) 

+ [滤镜及混合模式混搭特效](https://csscoco.com/inspiration/#/./filter/filter-mix.md) 

+ [使用 drop-shadow 配合 clip-path 生成规则阴影](https://csscoco.com/inspiration/#/./filter/filter-polygon-shadow.md) 

+ [使用 filter:blur 生成彩色阴影](https://csscoco.com/inspiration/#/./filter/filter-shadow.md) 

+ [单标签实现滴水效果](https://csscoco.com/inspiration/#/./filter/filter-single-div-water-drop.md) 

+ [利用 filter:blur 增强文字的 3D 效果](https://csscoco.com/inspiration/#/./filter/use-filter-blur-enhance-text-3d-effect.md) 

## 边框 

+ [活用 border-radius, 实现充电动画](https://csscoco.com/inspiration/#/./border/border-chargin.md) 

+ [利用 border-image 实现动态边框](https://csscoco.com/inspiration/#/./border/border-image-animate.md) 

+ [活用 border-radius, 单标签线条动画](https://csscoco.com/inspiration/#/./border/border-line-animation.md) 

+ [使用 border-radius 的变化模拟绳子下坠](https://csscoco.com/inspiration/#/./border/border-line-drop-animation.md) 

+ [border-radius变换实现loading效果](https://csscoco.com/inspiration/#/./border/border-loading.md) 

+ [活用 outline 巧妙实现加号符号](https://csscoco.com/inspiration/#/./border/border-outline-symbol-add.md) 

+ [巧用 overflow 及实现边框线条动画](https://csscoco.com/inspiration/#/./border/border-overflow-btn.md) 

+ [border-color 变换实现文字输入效果](https://csscoco.com/inspiration/#/./border/border-typing.md) 

+ [活用 border-radius, 实现波浪百分比图](https://csscoco.com/inspiration/#/./border/border-wave-percent.md) 

+ [活用 border-radius, 实现波浪动画](https://csscoco.com/inspiration/#/./border/border-wave.md) 

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

+ [利用渐变及 CSS Property 实现 TV 噪音动画](https://csscoco.com/inspiration/#/./background/background-css-property-tv-noise.md) 

+ [使用 background-attachment 实现毛玻璃效果](https://csscoco.com/inspiration/#/./background/bg-attachment-frosted-glass.md) 

+ [使用 background-attachment 实现滚动阴影](https://csscoco.com/inspiration/#/./background/bg-attachment-scroll-shadow.md) 

+ [background-clip 实现流光文字效果](https://csscoco.com/inspiration/#/./background/bg-clip-text-shine.md) 

+ [角向渐变线条 border 效果](https://csscoco.com/inspiration/#/./background/bg-conic-border-effect.md) 

+ [角向渐变实现光影 border 效果](https://csscoco.com/inspiration/#/./background/bg-conic-border-light-effect.md) 

+ [角向渐变实现纯 CSS 圆环进度图](https://csscoco.com/inspiration/#/./background/bg-conic-circle-loading.md) 

+ [角向渐变配合混合模式实现炫酷光影效果](https://csscoco.com/inspiration/#/./background/bg-conic-gradient-animation.md) 

+ [一行代码重复角向渐变代码实现酷炫图案](https://csscoco.com/inspiration/#/./background/bg-conic-gradient-repeating-pattern.md) 

+ [线性渐变实现箭头符号](https://csscoco.com/inspiration/#/./background/bg-linear-arrow.md) 

+ [线性渐变线条 border 效果](https://csscoco.com/inspiration/#/./background/bg-linear-border-effect.md) 

+ [线性渐变实现类迷宫图形](https://csscoco.com/inspiration/#/./background/bg-linear-gradient-maze.md) 

+ [线性渐变实现内切角](https://csscoco.com/inspiration/#/./background/bg-linear-inscribed.md) 

+ [线性渐变模拟进度条运动](https://csscoco.com/inspiration/#/./background/bg-linear-progress-bar.md) 

+ [线性渐变实现滚动进度条](https://csscoco.com/inspiration/#/./background/bg-linear-scroll-indicator.md) 

+ [线性渐变背景实现条纹字](https://csscoco.com/inspiration/#/./background/bg-linear-stripe.md) 

+ [线性渐变实现下划线](https://csscoco.com/inspiration/#/./background/bg-linear-underline.md) 

+ [mask-image 实现图片变幻](https://csscoco.com/inspiration/#/./background/bg-mask-image.md) 

+ [mask-image 实现文字的渐现](https://csscoco.com/inspiration/#/./background/bg-mask-text-show.md) 

+ [mask-image 实现图片转场变换](https://csscoco.com/inspiration/#/./background/bg-mask-transition.md) 

+ [使用多重背景单标签实现气泡按钮点击效果](https://csscoco.com/inspiration/#/./background/bg-radial-btn-click-bubble.md) 

+ [径向渐变实现优惠券波浪造型](https://csscoco.com/inspiration/#/./background/bg-radial-coupon.md) 

+ [径向渐变实现舞台灯光聚焦效果](https://csscoco.com/inspiration/#/./background/bg-radial-focus.md) 

+ [渐变实现波浪边框](https://csscoco.com/inspiration/#/./background/bg-wave-border.md) 

+ [渐变实现波浪下划线](https://csscoco.com/inspiration/#/./background/bg-wave-underline.md) 

+ [渐变实现波浪效果/波浪进度框](https://csscoco.com/inspiration/#/./background/bg-wave.md) 

+ [利用 CSS @property 探寻渐变的极限效果](https://csscoco.com/inspiration/#/./background/css-property-variable-bg-change-animation.md) 

+ [多重径向渐变实现美妙的艺术背景](https://csscoco.com/inspiration/#/./background/repeating-radial-background-artistic-bg.md) 

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

+ [使用 mix-blend-mode 实现图片任意颜色赋值技术](https://csscoco.com/inspiration/#/./blendmode/blend-color-set.md) 

+ [使用 mix-blend-mode 实现抖音 LOGO](https://csscoco.com/inspiration/#/./blendmode/blend-douyin-logo.md) 

+ [mix-blend-mode 实现 loading 效果](https://csscoco.com/inspiration/#/./blendmode/blend-loading.md) 

+ [图片的类抖音 LOGO 晕眩效果](https://csscoco.com/inspiration/#/./blendmode/blend-mix-img.md) 

+ [mix-blend-mode MIX](https://csscoco.com/inspiration/#/./blendmode/blend-mix.md) 

+ [mix-blend-mode 实现颜色叠加旋转动画](https://csscoco.com/inspiration/#/./blendmode/blend-rotate.md) 

+ [类抖音 LOGO 文字故障效果](https://csscoco.com/inspiration/#/./blendmode/blend-text-glitch.md) 

+ [使用 mix-blend-mode 实现光影文字效果](https://csscoco.com/inspiration/#/./blendmode/blend-text-shine.md) 

+ [CSS WAVE MOVE(惊艳的水波效果)](https://csscoco.com/inspiration/#/./blendmode/blend-water-wave.md) 

+ [mix-blend-mode 叠加多重渐变背景](https://csscoco.com/inspiration/#/./blendmode/mix-multi-graidient-bg.md) 

+ [使用混合模式叠加实现文字波浪效果](https://csscoco.com/inspiration/#/./blendmode/mixblend-text-wave-effect.md) 

## 3D 

+ [3D 球动画](https://csscoco.com/inspiration/#/./3d/3d-ball.md) 

+ [3D 数字计数动画](https://csscoco.com/inspiration/#/./3d/3d-count-number.md) 

+ [3D 宇宙时空穿梭效果](https://csscoco.com/inspiration/#/./3d/3d-css-galaxy-shuttle.md) 

+ [3D 立方体进度条](https://csscoco.com/inspiration/#/./3d/3d-cuber-progress-bar.md) 

+ [3D 立方体滚动 404 效果](https://csscoco.com/inspiration/#/./3d/3d-cuber-roll-404.md) 

+ [3D 光影变换文字效果](https://csscoco.com/inspiration/#/./3d/3d-glowing-rotate-text.md) 

+ [3D 无限延伸视角动画](https://csscoco.com/inspiration/#/./3d/3d-infinite-maze.md) 

+ [3D 线条动画](https://csscoco.com/inspiration/#/./3d/3d-line.md) 

+ [3D 迷宫线条特效](https://csscoco.com/inspiration/#/./3d/3d-maze.md) 

+ [3D 绳动画](https://csscoco.com/inspiration/#/./3d/3d-rope-swing.md) 

+ [3D 螺旋数字动画](https://csscoco.com/inspiration/#/./3d/3d-spiral-number.md) 

+ [3D 文字出场动画](https://csscoco.com/inspiration/#/./3d/3d-text-debut.md) 

+ [借助 translate3d\perspective 实现 3D 视差效果](https://csscoco.com/inspiration/#/./3d/parallax-3d-1.md) 

+ [借助 translate3d\perspective 实现 3D 视差效果2](https://csscoco.com/inspiration/#/./3d/parallax-3d-2.md) 

+ [使用 translateZ 实现滚动视差](https://csscoco.com/inspiration/#/./3d/parallax-3d-translate.md) 

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

+ [借助transition-delay实现按钮border动画效果](https://csscoco.com/inspiration/#/./animation/animation-button-border.md) 

+ [CSS实现曲线运动](https://csscoco.com/inspiration/#/./animation/animation-curve.md) 

+ [利用 animation-delay 实现文字渐现效果](https://csscoco.com/inspiration/#/./animation/animation-delay-control-text-effect.md) 

+ [利用动画延迟实现波浪动画](https://csscoco.com/inspiration/#/./animation/animation-delay-wavy.md) 

+ [scale 配合 transfrom-origin 精准控制动画方向](https://csscoco.com/inspiration/#/./animation/animation-direction.md) 

+ [CSS 巧妙控制动画行进](https://csscoco.com/inspiration/#/./animation/animation-play-state.md) 

+ [正负旋转相消动画](https://csscoco.com/inspiration/#/./animation/animation-rotate.md) 

## clip-path 

+ [使用 clip-path 和 border-image 实现圆角渐变边框](https://csscoco.com/inspiration/#/./clippath/clippath-border-image.md) 

+ [clip-path 实现边框线条动画 2](https://csscoco.com/inspiration/#/./clippath/clippath-border-line-radius.md) 

+ [clip-path 实现边框线条动画](https://csscoco.com/inspiration/#/./clippath/clippath-border-line.md) 

+ [clip-path 实现图片的故障艺术风格动画](https://csscoco.com/inspiration/#/./clippath/clippath-img-glitch.md) 

+ [clip-path 实现文字断裂效果](https://csscoco.com/inspiration/#/./clippath/clippath-word-crack.md) 

## 文本类 

+ [使用text-decoration实现波浪效果](https://csscoco.com/inspiration/#/./text/text-underline-wave.md) 

## 综合 

+ [retina屏下的1px线的实现](https://csscoco.com/inspiration/#/./others/1px-line.md) 

+ [fieldset 与 legend 实现边框嵌套文字](https://csscoco.com/inspiration/#/./others/border-inset-text.md) 

+ [利用 resize 实现图片切换预览功能](https://csscoco.com/inspiration/#/./others/css-resize-switch-picture.md) 

+ [暗黑字符雨动画](https://csscoco.com/inspiration/#/./others/digital-char-rain-animation.md) 

+ [chrome Tab 分栏实现](https://csscoco.com/inspiration/#/./others/others-chrome-tab.md) 

+ [等角螺线](https://csscoco.com/inspiration/#/./others/others-equiangular-spiral.md) 

+ [华为充电动画](https://csscoco.com/inspiration/#/./others/others-huawei-charging.md) 

+ [夜晚居室图](https://csscoco.com/inspiration/#/./others/others-night.md) 

+ [纯CSS实现360°饼图](https://csscoco.com/inspiration/#/./others/others-pie.md) 

+ [PURE CSS 实现鼠标跟随2](https://csscoco.com/inspiration/#/./others/pointer-follow-2.md) 

+ [PURE CSS 实现鼠标跟随3](https://csscoco.com/inspiration/#/./others/pointer-follow-3.md) 

+ [PURE CSS 实现鼠标跟随](https://csscoco.com/inspiration/#/./others/pointer-follow.md) 

+ [利用 box-reflect 实现艺术图形](https://csscoco.com/inspiration/#/./others/reflect-artist.md) 

+ [利用 box-reflect 实现光影按钮](https://csscoco.com/inspiration/#/./others/reflect-btn-effect.md) 

+ [利用 box-reflect 实现 3D 照片墙倒影效果](https://csscoco.com/inspiration/#/./others/reflect-text-effect.md) 

+ [CSS文字分裂移动特效](https://csscoco.com/inspiration/#/./others/word-break-move.md) 

+ [CSS文字分裂特效](https://csscoco.com/inspiration/#/./others/word-break.md) 

+ [CSS文字故障效果](https://csscoco.com/inspiration/#/./others/word-glitch.md) 

## CSS-Doodle 

+ [CSS-Doodle clip-path & drop-shadow 实现图案艺术](https://csscoco.com/inspiration/#/./cssdoodle/bg-artist-clippath.md) 

+ [CSS-Doodle 利用不同图形线条实现图案艺术 2](https://csscoco.com/inspiration/#/./cssdoodle/bg-artist-pattern-2.md) 

+ [CSS-Doodle 利用不同图形线条实现图案艺术](https://csscoco.com/inspiration/#/./cssdoodle/bg-artist-pattern.md) 

+ [CSS-Doodle background + mask 实现万花筒效果](https://csscoco.com/inspiration/#/./cssdoodle/bg-mask-composite.md) 

+ [CSS-Doodle background + mask 实现条纹艺术背景](https://csscoco.com/inspiration/#/./cssdoodle/bg-mask-mix.md) 

+ [CSS-Doodle fish 🐟 & seaweed 🍀](https://csscoco.com/inspiration/#/./cssdoodle/fish-seaweed.md) 

+ [CSS-Doodle spotlight🎆](https://csscoco.com/inspiration/#/./cssdoodle/spotlight.md) 

+ [夏日城市夕阳图🌇](https://csscoco.com/inspiration/#/./cssdoodle/sunset.md) 

## svg 

+ [支付宝AR扫福动画](https://csscoco.com/inspiration/#/./svg/alipay-ar-scan.md) 

+ [SVG绘制弧形文字](https://csscoco.com/inspiration/#/./svg/svg-arc-word.md) 

+ [SVG 按钮 hover 线条动画](https://csscoco.com/inspiration/#/./svg/svg-btn-hover.md) 

+ [SVG 配合 drop-shadow 实现线条光影效果](https://csscoco.com/inspiration/#/./svg/svg-dropshadow-line-neon-effect.md) 

+ [利用 SVG feTurbulence 滤镜及 filter: blur 实现鸿蒙 LOGO](https://csscoco.com/inspiration/#/./svg/svg-feTurbulence-harmony-logo.md) 

+ [SVG feTurbulence 滤镜实现故障按钮点击效果](https://csscoco.com/inspiration/#/./svg/svg-feturbulence-btn-glitch.md) 

+ [SVG feTurbulence 滤镜实现云彩效果 ](https://csscoco.com/inspiration/#/./svg/svg-feturbulence-clouds.md) 

+ [SVG 文字 hover 线条动画 2](https://csscoco.com/inspiration/#/./svg/svg-line-text-2.md) 

+ [SVG 文字 hover 线条动画](https://csscoco.com/inspiration/#/./svg/svg-line-text.md)