这里是我的demo库

搜集整理了各种类型的demo，并对之进行了分类，以便随时使用，如对您有帮助，请star下，再fork拿去改成你想要的效果，谢谢。

ps: 下面的每个demo都发布在线上了，可以正常访问，毕竟以展示为主

做了个简单首页可作为导航 - 也算个demo 我的主页

CSS - transition 过渡相关效果

这个目录下一来是对所写demo进行分类，这是组件，也就是由多个小模块构成，放到该目录下以后也方便样式与结构的重用。而上面的CSS3是单纯来展示的，这里相当于筛选了一道（我可能会复用到的）

CSS3 Transform常见效果一览

自制loading

iconHover效果

linear-gradient

text-hover

buttons-box-shadow

未来派3D悬停效果

里程图片

竖状hover_menu

悬停菜单

悬停卡片

自制表情

card-hover

card-hover-anime

card-op

css3-count-showtime

hover卡片2

自制简易tooltip

transform-perspective

CSS - animation 动画相关效果

对，这里所有的demo大多以展示为主，运用了CSS3，没有添加额外JS就完成，所以都添加到了该分类下。至于更多的细节分类，以后再来实现了

自动画一个乔巴

全屏特效纯css实现

ICON-toggle 为每个效果添加了对应className

css3-loading-love

自动焦点登录框

纯CSS3实现圆型菜单效果

css3-toggle-menu

简单时间线DEMO

全屏栅格背景动画

文字特效动画

loading-demo

通过加载状态事件制作进度条

• document.onreadystatechange 页面加载状态改变时的事件
• document.readyState 返回当前文档的状态

• uninitialized 还未开始载入
• loading 载入中
• interactive 已加载，文档与用户可以开始交互
• complete 载入完成

定时器的进度条

定时器的进度条2

定时器的进度条3

自己来制作简单的css3进度条

定位在头部的进度条

Layout - 布局

布局可谓每一个前端的基本功，这里只列出了几个常用的布局，仅供参考，以后会逐步完善的。

flex布局篇

一个超棒的demo让你了解关于flex的一切

推荐下阮一峰老师的博客学习

[语法篇学习demo]

[实例篇学习demo]

01_基本网格布局

01_flex语法篇

02_flex布局实战1 骰子布局

02_flex-demo布局实战

03_flex布局实战2 骰子布局

02_flex-demo布局实战2

其他布局范例

以下是我自己的练习DEMO

01_基本网格布局

02_百分比布局

03_圣杯布局

04_输入框的布局

05_悬挂式布局

06_固定的底栏

07fluid

Canvas 实现的动画效果

点击烟花效果 - 自动切换背景图

根据图片提取相似色背景

一个简单的 LOGO动画

Walking Dog

jQuery 实现相关特效

一些用jQuery完成的demo，思路和布局等代码可以在项目中直接借鉴

jquery实现手风琴效果

点击导航菜单同跳转到指定位置特效

判断鼠标划入图片方向显示遮罩层特效

jQuery+CSS3投票结果图表

名片自动生成

图片预加载

图片预加载——无序之QQ表情

图片预加载之有序加载

输入框回车/点击按钮添加标签特效

眼睛跟随鼠标转动动画特效

模拟购物车购物数量、结算功能

瀑布流 - 可自定宽高

css + js 其他简单效果

卡片布局 - 及卡片详情

移动端 - 白屏优化demo

components - radio-buttons

纯CSS3实现的滚动条

写在最后

如果里面的demo对您有参考或帮助，请Star + Fork，谢谢！