前端特效整理

一、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
反馈表情
用户体验调查
http://www.jq22.com/code314

三、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
css日历
日历控件
http://www.jq22.com/code177
下拉列表式Menu
下拉列表式Menu
http://www.jq22.com/code146















评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值