首页 > 代码库 > CSS3、SVG、Canvas、WebGL动画精选整理

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

2024-09-13 03:32:52   216人阅读

一、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
旋转加载动画2Loading动画http://www.jq22.com/code591
小球旋转加载动画Loading动画http://www.jq22.com/code515
小球旋转加载动画2Loading动画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视差页面bannerhttp://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
选项卡的竖直手风琴效果页面bannerhttp://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动画精选整理


联系
我们