11个超震撼的HTML5和纯CSS3动画源码
1.jQuery多功能手风琴个人信息菜单面板
这是一款基于jQuery的手风琴个人信息菜单面板，每一个菜单项展开后可以自定义布局，因此可以为每一个菜单项实现多功能。类似这样的多功能菜单还有jQuery/CSS3大屏下拉菜单，非常实用。由于这款手风琴菜单是基于jQuery框架的，因此兼容性和实用性很强。
2.纯CSS3水平手风琴分享按钮菜单
对于手风琴动画，我们以前分享过很多，有基于jQuery的手风琴菜单，比如jQuery多层级垂直手风琴菜单；也有基于jQuery的手风琴焦点图，比如jQuery实现横向手风琴图片轮播焦点图效果。今天要分享的是一款利用纯CSS3实现的水平手风琴分享按钮菜单，每一个分享按钮展开时会有该平台的简单介绍，非常绚丽实用。
3.HTML5 WebGL粒子爆炸动画
之前我们分享过几款非常炫酷的HTML5粒子动画，比如这款HTML5像素粉碎图片动画和HTML5 Canvas彩色像素进度条动画，都是利用了HTML5的粒子渲染特性实现。今天我们要分享另外一款基于HTML5和WebGL的粒子爆炸动画特效，效果非常令人震撼。
4.超酷逼真的CSS3 3D书本翻页动画
之前我们分享过好几款风格各异的jQuery书本翻页插件和HTML5书本翻页动画，有几个还是不错的，比如jQuery书本翻页3D动画特效和HTML5 3D书本翻页特效。今天要分享的也是一款基于CSS3的3D书本翻页动画，目前这个动画不支持鼠标交互，只可以自动将页面打开和收拢。
5.超实用的jQuery淡入淡出焦点图插件 带3D相框
这是一款基于jQuery和CSS3的焦点图插件，这款焦点图的设计非常简单，仅仅是自动播放一系列相片，相片在切换的时候带有淡入淡出的动画特效，使用起来也十分方便。另外一个特点是，这款jQuery焦点图插件的相片外框呈现3D的效果，配合黑色的背景显得非常立体大气。
6.HTML5 Canvas人物四肢模拟及身体碰撞动画
前几天我们刚刚为大家分享过一款基于HTML5的人物四肢关节伸展模拟动画，它可以模拟人物的头部、四肢伸展情况，相当逼真。今天要介绍的这款HTML5 Canvas动画在原来四肢模拟的基础上，添加了身体碰撞模拟的动画特效，我们用鼠标模拟一个大铁球，移动鼠标后将大铁球撞击人物的身体，人物身体受到作用力后就会按一定方向进行翻转活动，因此四肢也随着伸展和摆动。当然这种动画也应用了HTML5的重力感应特性。这种类似的动画以前也介绍过一些，比如HTML5图片相册重力感应特效。
7.HTML5点阵列局部放大镜动画特效
记得以前我们分享过一款很酷的HTML5 3D 粒子波浪动画特效，它由一连串点阵列组成，3D效果非常炫酷。今天要介绍的也是一个基于HTML5的点阵列动画特效，当鼠标滑过阵列时，阵列图的局部将产生放大镜的动画特效，也具有极强的3D立体视觉效果。
8.纯CSS3实现可感知方向的卡片翻转动画
今天我们要给大家分享一个看似简单但却非常有趣的纯CSS3动画特效，当我们将鼠标滑过一个个卡片时，卡片可以进行翻转，这个应该很容易，而且也很常见，你一定会说，这种翻转动画随便用CSS3特性就可以实现了。但是这款CSS3卡片翻转动画有一个独有的特点，就是它可以感知翻转的方向，也就是说它可以根据用户鼠标滑过的方向来决定翻转的角度，比如鼠标从上往下滑过，那卡片就垂直翻转，如果鼠标从左往右滑过，那卡片就水平翻转。你可以去研究一下它的CSS源码，对你学习CSS3会有很大的帮助。
9.jQuery SVG左右弹性切换全屏焦点图动画
今天我们要为大家分享一款非常时尚和大气的jQuery全屏焦点图动画，这款焦点图插件的特点有2个，一个是焦点图整体以全屏的方式呈现，显得非常大气，而且图片四周也有3D阴影，立体视觉效果非常独特。第二是焦点图在图片切换的时候以弹性淡入淡出的动画方式，显得相当时尚。动画采用SVG相关特性，扩展十分灵活。
10.纯CSS3实现超炫酷的萤火虫动画
今天要为大家带来一款很有意思的纯CSS3动画，这次我们要利用CSS3的一些动画属性来绘制一只闪闪发光的萤火虫，和之前分享的纯CSS3蚱蜢与纯CSS3打火机类似，这只萤火虫也是用CSS3绘制，并且点击萤火虫可以关闭和打开它的翅膀，同时萤火虫的闪闪发光也可以控制。
11.CSS3实现五彩3D旋转星球
之前我们有分享过很多纯CSS3和HTML5实现的球体动画，比如这款HTML5 3D球体斑点运动动画和HTML5 Canvas 地球旋转3D动画都非常不错。今天要给大家分享另外一款超炫酷的CSS3五彩3D旋转星球，旋转起来的视觉效果相当震撼。
11个超震撼的HTML5和纯CSS3动画源码的更多相关文章
- 8个超震撼的HTML5和纯CSS3动画源码
HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要.Flash在几年之后肯定会消亡,那么HTML5和CSS3将会替代Flash.今天我们要给大家 ...
- 8个超炫酷的纯CSS3动画及源码分享
在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...
- 大爱HTML5 9款超炫HTML5最新动画源码
我们分享过很多漂亮的HTML5动画,包括CSS3菜单.HTML5 Canvas动画等.今天我们精选了9款非常不错的超炫HTML5最新动画及其源码,一起来看看. 1.HTML5可爱的404页面动画 很逗 ...
- 10款基于jquery实现的超酷动画源码
1.jQuery二级下拉菜单 下拉箭头翻转动画 之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽.但今天要介绍的这款j ...
- 纯CSS3动画：一棵跳舞的树
<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/htm ...
- 8款超酷的HTML5 3D图片动画源码
1.HTML5移动端图片左右切换动画 今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外观上,这款 ...
- 8个超炫酷仿HTML5动画源码
1.jQuery万年历插件 带农历老皇历功能 这是一款基于jQuery的日历插件,这款日历插件和之前分享的日历控件有很大差异,它是一本万年历,包含了农历已经老皇历的功能,是一个挑好日子的工具.同时日历 ...
- 出售基于Html5的高性能GIS平台源码
远景地理信息系统平台软件 远景地理信息系统平台软件,简称"RemoteGIS",版本V1.0,它是基于HTML5自主研发的新一代WEBGIS平台,它使用Javascript开发,具 ...
- 三款精美的html5及css3的源码插件
1.HTML5 3D爱心动画 晚来的七夕礼物 七夕情人节刚过,今天小编却在国外的网站上看到一个利用HTML5和CSS3制作的3D爱心动画,莫非老外也过七夕?当然小编还是将这款HTML5 3D爱心动画收 ...
随机推荐
- Nginx 反向代理 -- 一路上的坑
前些天刚过来新公司上班,公司的项目都挺多的,只不过项目都是第三方公司团队开发的,现在本公司要组建自己的团队,我作为一个Java后台人员去接手第三方公司的全部项目,我已经是直接崩溃了(先解释一下我崩溃的 ...
- BZOJ.1132.[POI2008]Tro(极角排序)
BZOJ 洛谷 考虑暴力,每次枚举三个点,答案就是\(\frac12\sum_{k<j<i}(i-k)\times(j-k)\). 注意到叉积有分配率,所以固定\(k\),枚举\(i,j\ ...
- 洛谷.3805.[模板]manacher算法
题目链接 之前做很早了没写这篇,补上. 记录当前ex[]最大的回文中心id和最远延伸范围mx! 关于串的构造: 应该是 @ #A#B#C#B#A# $ ,而不是 @ A#B#C#B#A $ 比如 @a ...
- Python3之弹性力学——应力张量2
问题 已知某应力张量的分量为 \[ \sigma_{11}=3,\quad\sigma_{12} = \sigma_{13} = 1, \quad \sigma_{22} = \sigma_{33} ...
- PCH 警告:标头停止点不能位于宏或#if块中
今天在vs2010写了点代码,居然报了“PCH 警告:标头停止点不能位于宏或#if块中”. /********************* * * * 文件夹: ▲01 绪论 * * * * 文件名: ...
- .ftl文件介绍
freemarker的文件一般以后缀ftl,ftl文件的头上要写<#assign ww=JspTaglibs["/WEB-INF/webwork.tld"] /这样才能在ft ...
- 树形动态规划（树形DP）入门问题—初探 & 训练
树形DP入门 poj 2342 Anniversary party 先来个题入门一下~ 题意: 某公司要举办一次晚会,但是为了使得晚会的气氛更加活跃,每个参加晚会的人都不希望在晚会中见到他的直接上 ...
- 2017.08.06【NOIP提高组】模拟赛B组
Summary 今天的比赛60+100+100=260分,没有想到第一题正解是搜索,我与AK差一段距离,这段距离,叫倒着搜.总的来说不是很难. Problem T1 天平 题目大意 给你N个排序好的砝 ...
- ./configure && make && make install 编译安装和卸载 （Linux）
./configure && make && make install 编译安装和卸载 (Linux) 正常的编译安装/卸载: 源码的安装一般由3个步骤组成:配置( ...
- Django中提供的6种缓存方式
由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用: 缓存,缓存将一个某个views的返回值保存至内存或者memcache中, ...