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
时间： 2024-10-21 02:28:00

CSS3、SVG、Canvas、WebGL动画精选整理的相关文章

7款超酷HTML5 3D动画精选应用及源码

对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE678之类的浏览器了.下面精选的几款HTML5 3D动画,希望你会喜欢. 1.HTML5 SVG 3D空间模型 可拖拽缩放 这是一个基于HTML5和SVG的3D空间模型,这个3D模型提供了x.y.z三个坐标轴以及一个平面网格.我们可以对这个HTML5 3D模型进行缩放.拖拽.翻转等操作,这些操作可以通过

纯CSS3实现打火机火焰动画

HTML5已经越来越流行起来了,尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍.今天给大家介绍10款效果惊艳的HTML5应用,方便大家学习,也将应用的源码整理了一下发给大家. 1.纯CSS3实现打火机火焰动画 这又是一款很酷的纯CSS3动画特效,它是一个可以点燃的打火机,当你用鼠标滑过这只打火机时,打火机就会打开,然后开始出现火焰燃烧的动画特效.另外要说明的是,整个动画都是利用纯CSS3实现的,没有一行JS代码,小伙伴们,这个CSS3动画是不

用svg制作loading动画

首先说明:由于各浏览器对svg动画事件支持不统一,此loading动画在Firefox,Opera,Chrome中均没有问题,IE和Safari中有问题,可能是不支持SIML写动画的语法, 但是用Canvas写的话,在颜色的渐变方面会有问题: 线性渐变需要传递四个参数 xstart:渐变开始点x坐标       ystart:渐变开始点y坐标       xEnd:渐变结束点x坐标       yEnd:渐变结束点y坐标 这样画出来的渐变只能用于矩形之类的图形,无法应用在诸如扇形内,此loadi

超级强大的SVG SMIL animation动画详解

本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordpress/?p=4333 //zxx: 本文的SVG在有缓存时候是无动画效果,此时您可以试着[右键-新标签页打开图片]. 一.SVG SMIL animation概览 1. SMIL是什么?SMIL不是指「水蜜梨」,而是Synchronized Multimedia Integration Language(同步多媒体集成语言)的首字母缩写简称,是有标准

16种基于 CSS3 & SVG 的创意的弹窗效果

在去年,我给大家分享了<基于 CSS3 的精美模态窗口效果>,而今天我要与大家分享一些新鲜的想法.风格和趋势变化,要求更加适合现代UI的不同的效果.这组新模态窗口效果包含了一些微妙的动画,还有一些应用了SVG变形技术. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白

[Canvas学习]动画

学习目的:通过JavaScript操控<canvas>对象,实现交互动画. 动画的基本步骤 1. 清空canvas,使用clearRect方法 2. 保存canvas状态 3. 绘制动画图形 4. 恢复canvas状态 操控动画Controlling an animation setInterval(function, delay) setTimeout(function, delay) requestAnimationFrame(callback) 太阳系运动的小例子 <canvas

CSS3/SVG clip-path路径剪裁遮罩属性简介

一.SVG属性和CSS3属性千丝万缕的关系 CSS3新增属性除了我们现在用的比较多的border-radius, box-shadow, gradient, ...之类,还有很重要的一个分支:SVG属性家族! 所谓「SVG属性家族」是指原本SVG的标签属性可以直接使用CSS设置. 比方说,之前介绍“SVG Sprites技术”时候提到的fill属性,以及之后专门写了篇文章“SVG图标颜色文字般继承与填充”讲CSS中使用SVG的fill属性实现一些效果.还有很经典的在CSS中使用 stroke-d

CSS3+Jquery制作的动画效果电子表

<!DOCTYPE HTML> <html> <head> <title>CSS3+Jquery制作的动画效果电子表丨石家庄网络公司-河北品牌策划公司</title> <style type="text/css"> body{ background:#202020; font:bold 12px Arial, Helvetica, sans-serif; margin:0; padding:0; min-width

CSS3 实现图片上浮动画（转载）

CSS3 实现图片上浮动画 .gist { width:220px; height:130px; background-image: url(2.jpg); background-repeat:no-repeat; border:5px solid green; background-position:50% 50%; transition:background-position 2s; -moz-transition:background-position 2s; /* Firefox 4 *