首页 > 代码库 > CSS3、SVG、Canvas、WebGL动画精选整理
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 |
CSS3、SVG、Canvas、WebGL动画精选整理
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。