CSS3、SVG、Canvas、WebGL动画精选整理

一、CSS3动画

名称
用途
链接
阴影波纹特效

1.元素hover效果

2.突出表现效果

http://www.jq22.com/code80
横板导航菜单动画 导航菜单 http://www.jq22.com/code181
横板导航菜单动画2 导航菜单 http://www.jq22.com/code195
竖板导航菜单动画 导航菜单 http://www.jq22.com/code480
圆形导航菜单动画 导航菜单 http://www.jq22.com/code816
环形导航菜单动画 导航菜单 http://www.jq22.com/code681
三角形导航菜单动画 导航菜单 http://www.jq22.com/code621
图标按钮特效 收藏、喜欢、书签按钮 http://www.jq22.com/code278
“喜欢”按钮点击特效 喜欢、点赞按钮 http://www.jq22.com/code435
Twitter点赞动画 喜欢、点赞按钮 http://www.jq22.com/code221
下拉列表特效 下拉列表 http://www.jq22.com/code115
导航菜单下划线跟随鼠标 导航菜单 http://www.jq22.com/code805
导航菜单下划线跟随鼠标2 导航菜单 http://www.jq22.com/code809
导航菜单下划线跟随鼠标3 导航菜单 http://www.jq22.com/code604
彩虹预加载动画 Loading动画 http://www.jq22.com/code811
旋转加载动画 Loading动画 http://www.jq22.com/code696
旋转加载动画2 Loading动画 http://www.jq22.com/code591
小球旋转加载动画 Loading动画 http://www.jq22.com/code515
小球旋转加载动画2 Loading动画 http://www.jq22.com/code171
小球跳动加载动画 Loading动画 http://www.jq22.com/code538
Android 牛轧糖加载动画 Loading动画 http://www.jq22.com/code496
按钮遮罩动画 模仿Material Design按钮点击Ripple效果 http://www.jq22.com/code798
按钮遮罩动画2 按钮hover效果 http://www.jq22.com/code718
按钮遮罩动画3 模仿Material Design按钮点击Ripple效果 http://www.jq22.com/code676
按钮悬停动画 按钮、链接的悬停效果 http://www.jq22.com/code795
按钮悬停动画2 按钮的悬停效果 http://www.jq22.com/code678
按钮悬停动画3 按钮的悬停效果 http://www.jq22.com/code638
按钮悬停动画4 按钮的悬停效果 http://www.jq22.com/code482
文字遮罩动画 文字的悬停效果 http://www.jq22.com/code391
按钮背景滑动动画

1.默认按钮的展现

2.按钮hover效果

http://www.jq22.com/code782
div+css偷窥的小狗 Loading动画 http://www.jq22.com/code776
div+css颠倒的猫 Loading动画 http://www.jq22.com/code546
div+css气球动画 页面背景 http://www.jq22.com/code661
switch切换按钮 switch切换按钮 http://www.jq22.com/code770
翻转效果的switch切换按钮 switch切换按钮 http://www.jq22.com/code174
标题滚动动画 页面标题排比句 http://www.jq22.com/code764
定向感知hover悬停 展示栏hover效果 http://www.jq22.com/code758
页面滚动延迟 长页面各个section的切换 http://www.jq22.com/code734
卡片3D视差 页面banner http://www.jq22.com/code717
卡片3D视差2 带背景图片的卡片元素 http://www.jq22.com/code608
卡片和文件夹动画 可以收起的卡片元素 http://www.jq22.com/code414
文字模糊动画 文字展示 http://www.jq22.com/code695
文字填充动画 文字展示 http://www.jq22.com/code445
文字乱码动画 文字展示 http://www.jq22.com/code431
3D选项卡 选项卡 http://www.jq22.com/code650
3D翻转卡 卡片元素的翻转 http://www.jq22.com/code630
3D翻转卡2 卡片元素的翻转 http://www.jq22.com/code436
3D旋转卡 卡片元素的hover效果 http://www.jq22.com/code572
文本框获得焦点的动画 表单 http://www.jq22.com/code585
选项卡的竖直手风琴效果 页面banner http://www.jq22.com/code551
天气图标动画 天气预报 http://www.jq22.com/code542
喜怒无常的气球滑块 用户体验调查滑块等 http://www.jq22.com/code403
表情变化动画 用户体验调查 http://www.jq22.com/code255
谷歌滑块 滑块 http://www.jq22.com/code335
img的hover效果 图片展示栏的hover效果 http://www.jq22.com/code365
通知弹出效果 UI底边栏的通知弹出 http://www.jq22.com/code300
圆形卡片式工具栏 工具\操作栏 http://www.jq22.com/code298
可拖动排序的列表 可拖动排序的列表 http://www.jq22.com/code222
工具栏动画 剪切、复制、删除、分享按钮动画 http://www.jq22.com/code101
banner切换动画 页面banner下方小圆点 http://www.jq22.com/code145
弹性下拉刷新 页面下拉刷新 http://www.jq22.com/code79

 

二、SVG动画

名称
用途
链接
Low poly背景生成 页面背景 http://www.jq22.com/code790
粘性悬停菜单 导航菜单 http://www.jq22.com/code470
天气图标动画 天气预报 http://www.jq22.com/code768
文本笔画动画 页面标题 http://www.jq22.com/code712
404动画 404页面背景 http://www.jq22.com/code642
汉堡按钮动画 导航栏汉堡按钮 http://www.jq22.com/code594
音量控制栏 音量控制栏 http://www.jq22.com/code461
提交按钮动画 表单提交按钮 http://www.jq22.com/code343
6个动画图标 动画图标 http://www.jq22.com/code168
svg图表 折线图 http://www.jq22.com/code124

 

三、Canvas动画

名称
用途
链接
两点之间相连接的动画

1.流程图

2.饼形图的标注

http://www.jq22.com/code801
图像模糊加载 图片 http://www.jq22.com/code574
多点二次曲线动画 1.折线图动画 http://www.jq22.com/code22

 

四、Canvas+WebGL动画

名称
用途
链接
土星动画

1.Loading动画

2.欢迎界面

http://www.jq22.com/code802
丝带旋转动画 Loading动画 http://www.jq22.com/code372
模拟云 页面背景 http://gnipbao.github.io/css3-test/src/WebGL-demo/clouds/index.html

 

五、其他css+js应用

名称
用途
链接
标头悬浮 长页面各个section的标头悬浮 http://www.jq22.com/code804
滚动视差 页面下滑时的伪3D效果 http://www.jq22.com/code799
文字输入动画 文字展示效果 http://www.jq22.com/code719
支持新增、删除的列表框 列表框 http://www.jq22.com/code702
d3.js环形进度条 进度条 http://www.jq22.com/code674
纯css3环形进度条 进度条 http://www.jq22.com/code618
纯css3环形进度条2 进度条 http://www.jq22.com/code590
基于光标位置的块阴影 元素阴影 http://www.jq22.com/code644
注册、登录、密码重设的界面组合 注册、登录、密码重设界面 http://www.jq22.com/code629
分步骤填写的表单 分步骤填写的表单 http://www.jq22.com/code540
React + Redux 待办事项应用

1.待办事项

2.列表框

http://www.jq22.com/code626
React + Redux 待办事项应用2

1.待办事项

2.列表框

http://www.jq22.com/code332
纸片对话框 对话框 http://www.jq22.com/code624
卡片角标 卡片元素的角标 http://www.jq22.com/code620
文件树 文件树 http://www.jq22.com/code619
面包屑导航 面包屑导航 http://www.jq22.com/code596
卡片切换动画 卡片元素的切换 http://www.jq22.com/code511
气泡三角形 气泡边缘的三角形 http://www.jq22.com/code425
css综合UI

1.导航栏

2.工具条

3.Swicth复选框

http://www.jq22.com/code360
css控件组

1.CheckBox

2.Radio

http://www.jq22.com/code330
均衡器

1.播放器的均衡器

2.曲线图表

http://www.jq22.com/code321
带有删除线动画的复选框 复选框 http://www.jq22.com/code316
反馈表情 用户体验调查 http://www.jq22.com/code314
css日历 日历控件 http://www.jq22.com/code177
带有功能的下拉列表 带有功能的下拉列表 http://www.jq22.com/code146
posted @ 2017-04-07 17:23  HowardZhang  阅读(2151)  评论(1编辑  收藏  举报