-
Notifications
You must be signed in to change notification settings - Fork 979
/
Copy pathREADME.md
executable file
·218 lines (186 loc) · 18.8 KB
/
README.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
这里可以让你寻找到使用或者是学习 CSS 的灵感，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。
## 在线预览
[Online Pages](https://csscoco.com/inspiration/#/./init)
> 偶尔证书过期，可暂时使用这个链接 -- [Github Page](https://chokcoco.github.io/CSS-Inspiration/#/)
## 布局（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)