my-program

这里是我的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

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

定时器的进度条

定时器的进度条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,谢谢!