Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

00 #267

Open
wants to merge 68 commits into
base: master
Choose a base branch
from
+66 −4
Open

00 #267

Changes from all commits
Commits
Show all changes
68 commits
Select commit Hold shift + click to select a range
ed5ca7b
Update README.md
chokcoco Jan 22, 2019
af11a2f
使用 filter:blur | filter:constrast 小球穿梭效果
chokcoco Jan 23, 2019
b0979cc
hover | transition 实现鼠标跟随
chokcoco Jan 27, 2019
72b9d4a
纯CSS实现360°饼图 -- PURE CSS PIE ROTATE
chokcoco Feb 22, 2019
31f420a
Use :not() to Style Borders on Lists
chokcoco Feb 25, 2019
44e9900
活用 border-radius, 单标签线条动画
chokcoco Feb 26, 2019
98784e3
伪元素实现边界智能判断移动
chokcoco Mar 4, 2019
ffb29a5
纯CSS鼠标跟随按钮动画效果
chokcoco Mar 5, 2019
8f37a17
使用CSS让你的浏览器卡死
chokcoco Mar 11, 2019
eccb1d7
使用 filter:blur | filter:constrast 生成火焰效果2
chokcoco Mar 21, 2019
4f44e50
纯CSS实现蜡烛火焰效果
chokcoco Mar 25, 2019
3d74d50
巧妙使用 css 控制动画行进
chokcoco Mar 29, 2019
0465bbe
使用线性渐变实现类迷宫图形
chokcoco Apr 3, 2019
ed5c0e7
CSS 3D MAZE, 惊艳的 CSS 3D 线条特效
chokcoco Apr 3, 2019
ab3b9f6
使用CSS让你的浏览器崩溃
chokcoco Apr 4, 2019
78f13b9
使用 hue-rotate 实现渐变背景动画
chokcoco Apr 5, 2019
1bd65e1
伪元素实现打点loading效果
chokcoco Apr 6, 2019
49f6283
Update README.md
chokcoco Apr 6, 2019
422f1b8
CSS线条动画
chokcoco Apr 6, 2019
608c55a
Update README.md
chokcoco Apr 6, 2019
1475c1c
使用渐变实现波浪下划线
chokcoco Apr 8, 2019
39ed4b8
使用text-decoration实现下划线效果
chokcoco Apr 9, 2019
021776d
Update README.md
chokcoco Apr 9, 2019
9101db7
使用text-decoration实现波浪效果
chokcoco Apr 9, 2019
6c07410
使用CSS实现一套西文字体
chokcoco Apr 10, 2019
9104566
伪元素遮罩实现线条 loading 效果
chokcoco May 7, 2019
deb9d63
使用box-shadow单标签实现叉子图形
chokcoco May 8, 2019
87036ae
Update README.md
chokcoco May 14, 2019
949713e
Update README.md
chokcoco May 14, 2019
02dee22
Update README.md
chokcoco May 14, 2019
9f0a3a7
FFC下实现垂直居中最便捷的方法
chokcoco May 20, 2019
81f04c4
使用 margin auto 实现 flex 下的 space-between
chokcoco May 21, 2019
c95066a
使用 margin auto 实现 flex 下的 align-self: flex-end
chokcoco May 21, 2019
0f4ca32
使用线性渐变模拟进度条运动
chokcoco May 24, 2019
114e85e
使用 border-radius，模拟绳子下坠动画
chokcoco May 26, 2019
45c6f89
巧妙使用 border 实现下落动画
chokcoco Jun 1, 2019
7d1fb8d
使用 outline 巧妙实现加号符号
chokcoco Jul 16, 2019
2181085
使用 drop-shadow 配合 clip-path 生成规则阴影
chokcoco Jul 22, 2019
3e62b71
Update README.md
chokcoco Aug 1, 2019
6279ffa
retina屏下的1px线的实现（兼容2x屏、3x屏幕）
chokcoco Aug 6, 2019
9b35928
Update README.md
chokcoco Aug 6, 2019
1093251
CSS-doodle
chokcoco Aug 18, 2019
b863a40
Update README.md
chokcoco Aug 18, 2019
cc9e7e6
CSS Doodle Random Polygon
chokcoco Aug 19, 2019
fedc80e
Update README.md
chokcoco Aug 19, 2019
31a4c56
Update README.md
chokcoco Sep 3, 2019
5934a28
使用opacity优化box-shadow动画
chokcoco Sep 27, 2019
d178447
Update README.md
chokcoco Oct 2, 2019
ab96c55
CSS-doodle Rotate
chokcoco Oct 6, 2019
0676eb6
clip-path 实现文字断裂效果
chokcoco Oct 13, 2019
0f460a0
Update README.md
chokcoco Oct 13, 2019
1ed0556
3D 无限延伸视角动画
chokcoco Oct 18, 2019
21ee843
使用 filter:blur | filter:constrast 实现小球穿梭放大loading动画
chokcoco Oct 21, 2019
cfe091f
渐变实现聚光灯效果
chokcoco Oct 31, 2019
696cf69
使用多重背景单标签实现不可思议的气泡按钮点击效果
chokcoco Nov 7, 2019
77d0a0b
单标签纯CSS实现幽灵动画
chokcoco Nov 11, 2019
39b0794
巧用overflow及transform实现线条hover效果
chokcoco Nov 11, 2019
0caf4bb
SVG Hover Animations
chokcoco Nov 12, 2019
0a2a186
chrome Tab 分栏实现
chokcoco Nov 14, 2019
816f19e
夏日城市夕阳图🌇
chokcoco Nov 15, 2019
0f039d9
Update README.md
chokcoco Nov 15, 2019
a9fe462
CSS-Doodle fish 🐟 & seaweed 🍀
chokcoco Nov 18, 2019
d0c1ded
CSS-Doodle spotlight🎆
chokcoco Nov 20, 2019
afe77be
3D 数字计数动画
chokcoco Dec 6, 2019
ceb8437
华为充电动画 HuaWei Battery Charging Animation
chokcoco Dec 21, 2019
69adad6
活用 border-radius, 实现电池充电效果
chokcoco Dec 24, 2019
7d7b07c
我修改试试
Feb 8, 2020
5e227e4
二次
Feb 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 66 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@



我修改试试0000



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

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

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

> 下面很多例子不一定同步更新到我的在线网站（就是这里的 Online Pages），建议以下面的导航为准，很多 Demo 会直接链接到我的 CodePen。

## Layout

+ [CSS实现瀑布流布局（display: flex）](https://chokcoco.github.io/CSS-Inspiration/#/./layout/flex-waterfalls-flow.md)
Expand All @@ -17,6 +26,9 @@
+ [圣杯布局](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://codepen.io/Chokcoco/pen/GarPev)
+ [使用 margin auto 实现 flex 下的 justify-content: space-between](https://codepen.io/Chokcoco/pen/gJXawm)
+ [使用 margin auto 实现 flex 下的 align-self: flex-end](https://codepen.io/Chokcoco/pen/PvOZMr)

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

Expand All @@ -33,10 +45,12 @@
+ [借助 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://codepen.io/Chokcoco/pens/public/)

## 伪类/伪元素

+ [使用`:not()`伪类实现弹窗背景元素模糊](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-not.md)
+ [使用`:not()`伪类控制特殊边框样式](https://codepen.io/Chokcoco/pen/EMYGQZ)
+ [伪类`: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)
Expand All @@ -46,22 +60,34 @@
+ [伪类`: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://codepen.io/Chokcoco/pen/rRLJrR)
+ [伪元素实现打点 loading 效果](https://codepen.io/Chokcoco/pen/yrJpQG)
+ [伪元素遮罩实现线条 loading 效果](https://codepen.io/Chokcoco/pen/PvqYNJ)

## 滤镜(fliter)

+ [使用 filter:blur 生成彩色阴影](https://chokcoco.github.io/CSS-Inspiration/#/./filter/filter-shadow.md)
+ [使用 filter:blur | filter:constrast 生成特殊融合效果](https://chokcoco.github.io/CSS-Inspiration/#/./filter/filter-blur-constrast.md)
+ [使用 filter:blur | filter:constrast 生成火焰效果](https://chokcoco.github.io/CSS-Inspiration/#/./filter/filter-fire.md)
+ [使用 filter:blur | filter:constrast 生成火焰效果2](https://codepen.io/Chokcoco/pen/aMRPjR)
+ [滤镜及混合模式混搭特效](https://chokcoco.github.io/CSS-Inspiration/#/./filter/filter-mix.md)
+ [使用 filter:blur | filter:constrast 单标签实现滴水效果](https://codepen.io/Chokcoco/pen/gZVjJw)
+ [使用 filter:blur | filter:constrast 小球穿梭效果](https://codepen.io/Chokcoco/pen/ZwYyKO)
+ [使用 filter:blur | filter:constrast 实现小球穿梭放大loading动画](https://codepen.io/Chokcoco/pen/BaaQEab)
+ [使用 hue-rotate 实现渐变背景动画](https://codepen.io/Chokcoco/pen/MRegJW)
+ [使用 drop-shadow 配合 clip-path 生成规则阴影](https://codepen.io/Chokcoco/pen/oKjxpR)


## 边框(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://codepen.io/Chokcoco/pen/qBErGoO)
+ [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://codepen.io/Chokcoco/pen/xBxvdZ)
+ [使用 border-radius，模拟绳子下坠动画](https://codepen.io/Chokcoco/pen/yWjjjq)
+ [使用 outline 巧妙实现加号符号](https://codepen.io/Chokcoco/pen/PrrLaP)

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

Expand All @@ -74,9 +100,14 @@
+ [利用线性渐变实现下划线](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-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://codepen.io/Chokcoco/pen/yLLzqaJ)
+ [圆锥渐变配合混合模式实现炫酷光影效果](https://codepen.io/Chokcoco/pen/gRRdQq)
+ [mask-image 实现图片变幻](https://codepen.io/Chokcoco/pen/VqdQwB)
+ [使用线性渐变实现滚动进度条](https://codepen.io/Chokcoco/pen/KbBXQM)
+ [使用线性渐变实现类迷宫图形](https://codepen.io/Chokcoco/pen/zXYJaW)
+ [使用渐变实现波浪下划线](https://codepen.io/Chokcoco/pen/vMyBQe?editors=1100)
+ [使用线性渐变模拟进度条运动](https://codepen.io/Chokcoco/pen/EzZwXg)
+ [使用多重背景单标签实现不可思议的气泡按钮点击效果](https://codepen.io/Chokcoco/pen/bGGMLdd)

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

Expand All @@ -97,23 +128,54 @@
+ [借助 translate3d\perspective 实现 3D 视差效果2](https://chokcoco.github.io/CSS-Inspiration/#/./3d/3d-parallax2.md)
+ [3d 球动画](https://codepen.io/Chokcoco/pen/JwdvmJ)
+ [3D Spiral Number](https://codepen.io/Chokcoco/pen/LeWbaB)
+ [CSS 3D MAZE, 惊艳的 CSS 3D 线条特效](https://codepen.io/Chokcoco/pen/dLYpxK)
+ [3D 无限延伸视角动画](https://codepen.io/Chokcoco/pen/eYYJaMZ)
+ [3D 数字计数动画](https://codepen.io/Chokcoco/pen/qXVxyw)

## 动画/过渡(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)
+ [借助transition-delay简单多重圆的位移](https://codepen.io/Chokcoco/pen/QzzwVO)
+ [动画正负旋转相消](https://codepen.io/Chokcoco/pen/XaBJPy)
+ [巧妙使用 css 控制动画行进](https://codepen.io/Chokcoco/pen/ZPgxwy)
+ [巧妙使用 border 实现绳索下落动画](https://codepen.io/Chokcoco/pen/yWjjjq)
+ [巧用overflow及transform实现线条hover效果](https://codepen.io/Chokcoco/pen/PooBpQe)

## SVG
## clip-path

+ [clip-path 实现文字断裂效果](https://codepen.io/Chokcoco/pen/NWWxryd)

+ [使用 SVG 实现文字弧形排列](https://chokcoco.github.io/CSS-Inspiration/#/./svg/svg-arc-word.md)
## 文本类

+ [使用text-decoration实现波浪效果](https://codepen.io/Chokcoco/pen/YMWavM)

## 综合

+ [retina屏下的1px线的实现](https://chokcoco.github.io/CSS-Inspiration/#/./others/1px-line.md)
+ [MAGIC CSS MIX](https://codepen.io/Chokcoco/pen/XogwvV)
+ [retina屏下的1px线的实现（兼容2x屏、3x屏幕）](https://codepen.io/Chokcoco/pen/XyNjqK)
+ [CSS线条动画](https://codepen.io/Chokcoco/pen/XogwvV)
+ [PURE CSS 实现鼠标跟随](https://codepen.io/Chokcoco/pen/MZqMVO)
+ [hover | transition 实现鼠标跟随](https://codepen.io/Chokcoco/pen/XgvjQM)
+ [鼠标跟随动画 PURE CSS MAGIC MIX](https://codepen.io/Chokcoco/pen/zyyYqN)
+ [CSS文字分裂特效](https://codepen.io/Chokcoco/pen/wRZKNY)
+ [CSS TEXT Animation](https://codepen.io/Chokcoco/pen/dwxPWO)
+ [纯CSS实现360°饼图 -- PURE CSS PIE ROTATE](https://codepen.io/Chokcoco/pen/BMgZvM?editors=1100)
+ [纯CSS鼠标跟随按钮动画效果](https://codepen.io/Chokcoco/pen/OqXqVz)
+ [纯CSS实现蜡烛火焰效果](https://codepen.io/Chokcoco/pen/jJJbmz)
+ [使用CSS让你的浏览器崩溃](https://codepen.io/Chokcoco/pen/moMzxB)
+ [使用opacity优化box-shadow动画](https://codepen.io/Chokcoco/pen/zYObVRJ)
+ [单标签纯CSS实现幽灵动画](https://codepen.io/Chokcoco/pen/vYYrNOO)
+ [chrome Tab 分栏实现](https://codepen.io/Chokcoco/pen/WNNgyMV)
+ [华为充电动画 HuaWei Battery Charging Animation](https://codepen.io/Chokcoco/pen/vYExwvm?editors=1100)


## CSS-Doodle

+ [夏日城市夕阳图🌇](https://codepen.io/Chokcoco/pen/BaaqYZO)
+ [CSS-Doodle fish 🐟 & seaweed 🍀](https://codepen.io/Chokcoco/pen/WNNLOXV)
+ [CSS-Doodle spotlight🎆](https://codepen.io/Chokcoco/pen/xxxMoqV)

## SVG

+ [使用 SVG 实现文字弧形排]
+ [SVG Hover Animations](https://codepen.io/Chokcoco/pen/gOOKYmV)