11个超震撼的HTML5和纯CSS3动画源码

短命女 2022-03-30 14:08 164阅读 0赞

## 1.jQuery多功能手风琴个人信息菜单面板 ##

这是一款基于jQuery的手风琴个人信息菜单面板，每一个菜单项展开后可以自定义布局，因此可以为每一个菜单项实现多功能。类似这样的多功能菜单还有jQuery/CSS3大屏下拉菜单，非常实用。由于这款手风琴菜单是基于jQuery框架的，因此兼容性和实用性很强。

![11个超震撼的HTML5和纯CSS3动画源码 - 爱七七五八网 - 1][11_HTML5_CSS3_ - _ - 1]

[在线演示][Link 1]

[源码下载][Link 2]

## 2.纯CSS3水平手风琴分享按钮菜单 ##

对于手风琴动画，我们以前分享过很多，有基于jQuery的手风琴菜单，比如jQuery多层级垂直手风琴菜单；也有基于jQuery的手风琴焦点图，比如jQuery实现横向手风琴图片轮播焦点图效果。今天要分享的是一款利用纯CSS3实现的水平手风琴分享按钮菜单，每一个分享按钮展开时会有该平台的简单介绍，非常绚丽实用。

![11个超震撼的HTML5和纯CSS3动画源码 - 爱七七五八网 - 2][11_HTML5_CSS3_ - _ - 2]

[在线演示][Link 3]

[源码下载][Link 4]

## 3.HTML5 WebGL粒子爆炸动画 ##

之前我们分享过几款非常炫酷的HTML5粒子动画，比如这款HTML5像素粉碎图片动画和HTML5 Canvas彩色像素进度条动画，都是利用了HTML5的粒子渲染特性实现。今天我们要分享另外一款基于HTML5和WebGL的粒子爆炸动画特效，效果非常令人震撼。

![11个超震撼的HTML5和纯CSS3动画源码 - 爱七七五八网 - 3][11_HTML5_CSS3_ - _ - 3]

[在线演示][Link 5]

[源码下载][Link 6]

## 4.超酷逼真的CSS3 3D书本翻页动画 ##

之前我们分享过好几款风格各异的jQuery书本翻页插件和HTML5书本翻页动画，有几个还是不错的，比如jQuery书本翻页3D动画特效和HTML5 3D书本翻页特效。今天要分享的也是一款基于CSS3的3D书本翻页动画，目前这个动画不支持鼠标交互，只可以自动将页面打开和收拢。

![11个超震撼的HTML5和纯CSS3动画源码 - 爱七七五八网 - 4][11_HTML5_CSS3_ - _ - 4]

[在线演示][Link 7]

[源码下载][Link 8]

## 5.超实用的jQuery淡入淡出焦点图插件 带3D相框 ##

这是一款基于jQuery和CSS3的焦点图插件，这款焦点图的设计非常简单，仅仅是自动播放一系列相片，相片在切换的时候带有淡入淡出的动画特效，使用起来也十分方便。另外一个特点是，这款jQuery焦点图插件的相片外框呈现3D的效果，配合黑色的背景显得非常立体大气。

![11个超震撼的HTML5和纯CSS3动画源码 - 爱七七五八网 - 5][11_HTML5_CSS3_ - _ - 5]

[在线演示][Link 9]

[源码下载][Link 10]

## 6.HTML5 Canvas人物四肢模拟及身体碰撞动画 ##

前几天我们刚刚为大家分享过一款基于HTML5的人物四肢关节伸展模拟动画，它可以模拟人物的头部、四肢伸展情况，相当逼真。今天要介绍的这款HTML5 Canvas动画在原来四肢模拟的基础上，添加了身体碰撞模拟的动画特效，我们用鼠标模拟一个大铁球，移动鼠标后将大铁球撞击人物的身体，人物身体受到作用力后就会按一定方向进行翻转活动，因此四肢也随着伸展和摆动。当然这种动画也应用了HTML5的重力感应特性。这种类似的动画以前也介绍过一些，比如HTML5图片相册重力感应特效。

![11个超震撼的HTML5和纯CSS3动画源码 - 爱七七五八网 - 6][11_HTML5_CSS3_ - _ - 6]

[在线演示][Link 11]

[源码下载][Link 12]

## 7.HTML5点阵列局部放大镜动画特效 ##

记得以前我们分享过一款很酷的HTML5 3D 粒子波浪动画特效，它由一连串点阵列组成，3D效果非常炫酷。今天要介绍的也是一个基于HTML5的点阵列动画特效，当鼠标滑过阵列时，阵列图的局部将产生放大镜的动画特效，也具有极强的3D立体视觉效果。

![11个超震撼的HTML5和纯CSS3动画源码 - 爱七七五八网 - 7][11_HTML5_CSS3_ - _ - 7]

[在线演示][Link 13]

[源码下载][Link 14]

## 8.纯CSS3实现可感知方向的卡片翻转动画 ##

今天我们要给大家分享一个看似简单但却非常有趣的纯CSS3动画特效，当我们将鼠标滑过一个个卡片时，卡片可以进行翻转，这个应该很容易，而且也很常见，你一定会说，这种翻转动画随便用CSS3特性就可以实现了。但是这款CSS3卡片翻转动画有一个独有的特点，就是它可以感知翻转的方向，也就是说它可以根据用户鼠标滑过的方向来决定翻转的角度，比如鼠标从上往下滑过，那卡片就垂直翻转，如果鼠标从左往右滑过，那卡片就水平翻转。你可以去研究一下它的CSS源码，对你学习CSS3会有很大的帮助。

![11个超震撼的HTML5和纯CSS3动画源码 - 爱七七五八网 - 8][11_HTML5_CSS3_ - _ - 8]

[在线演示][Link 15]

[源码下载][Link 16]

## 9.jQuery SVG左右弹性切换全屏焦点图动画 ##

今天我们要为大家分享一款非常时尚和大气的jQuery全屏焦点图动画，这款焦点图插件的特点有2个，一个是焦点图整体以全屏的方式呈现，显得非常大气，而且图片四周也有3D阴影，立体视觉效果非常独特。第二是焦点图在图片切换的时候以弹性淡入淡出的动画方式，显得相当时尚。动画采用SVG相关特性，扩展十分灵活。

![11个超震撼的HTML5和纯CSS3动画源码 - 爱七七五八网 - 9][11_HTML5_CSS3_ - _ - 9]

[在线演示][Link 17]

[源码下载][Link 18]

## 10.纯CSS3实现超炫酷的萤火虫动画 ##

今天要为大家带来一款很有意思的纯CSS3动画，这次我们要利用CSS3的一些动画属性来绘制一只闪闪发光的萤火虫，和之前分享的纯CSS3蚱蜢与纯CSS3打火机类似，这只萤火虫也是用CSS3绘制，并且点击萤火虫可以关闭和打开它的翅膀，同时萤火虫的闪闪发光也可以控制。

![11个超震撼的HTML5和纯CSS3动画源码 - 爱七七五八网 - 10][11_HTML5_CSS3_ - _ - 10]

[在线演示][Link 19]

[源码下载][Link 20]

## 11.CSS3实现五彩3D旋转星球 ##

之前我们有分享过很多纯CSS3和HTML5实现的球体动画，比如这款HTML5 3D球体斑点运动动画和HTML5 Canvas 地球旋转3D动画都非常不错。今天要给大家分享另外一款超炫酷的CSS3五彩3D旋转星球，旋转起来的视觉效果相当震撼。

![11个超震撼的HTML5和纯CSS3动画源码 - 爱七七五八网 - 11][11_HTML5_CSS3_ - _ - 11]

[在线演示][Link 21]

[源码下载][Link 22]

*  本文固定链接: [http://www.i7758.com/archives/2681.html][http_www.i7758.com_archives_2681.html]

[11_HTML5_CSS3_ - _ - 1]: /images/20220330/daa226999f6d4c609d3d733b2d10eb38.png
[Link 1]: http://www.html5tricks.com/demo/jquery-accordion-person-info/index.html
[Link 2]: http://www.html5tricks.com/download/jquery-accordion-person-info.rar
[11_HTML5_CSS3_ - _ - 2]: /images/20220330/ea47dfa8b09940ed890eb2e2bafaf24a.png
[Link 3]: http://www.html5tricks.com/demo/css3-accordion-share-menu/index.html
[Link 4]: http://www.html5tricks.com/download/css3-accordion-share-menu.rar
[11_HTML5_CSS3_ - _ - 3]: /images/20220330/f75631bfdd7b49acbe1a97d08a07cf28.png
[Link 5]: http://www.html5tricks.com/demo/html5-webgl-particle-animation/index.html
[Link 6]: http://www.html5tricks.com/download/html5-webgl-particle-animation.rar
[11_HTML5_CSS3_ - _ - 4]: /images/20220330/ee69cd3efd2247db8e7fe9d4f52482e1.png
[Link 7]: http://www.html5tricks.com/demo/css3-3d-book-flip/index.html
[Link 8]: http://www.html5tricks.com/download/css3-3d-book-flip.rar
[11_HTML5_CSS3_ - _ - 5]: /images/20220330/333302f6e1e84e56984cb115d03fbe73.png
[Link 9]: http://www.html5tricks.com/demo/jquery-auto-fade-image-play/index.html
[Link 10]: http://www.html5tricks.com/download/jquery-auto-fade-image-play.rar
[11_HTML5_CSS3_ - _ - 6]: /images/20220330/647624bacae840d48bc05c5d07474ebc.png
[Link 11]: http://www.html5tricks.com/demo/html5-canvas-person-collision/index.html
[Link 12]: http://www.html5tricks.com/download/html5-canvas-person-collision.rar
[11_HTML5_CSS3_ - _ - 7]: /images/20220330/6394308c6237482ba42fe902b4053e5a.png
[Link 13]: http://www.html5tricks.com/demo/html5-dot-outline/index.html
[Link 14]: http://www.html5tricks.com/download/html5-dot-outline.rar
[11_HTML5_CSS3_ - _ - 8]: /images/20220330/c9354f48ba594bdb8a2234de9c7ac804.png
[Link 15]: http://www.html5tricks.com/demo/pure-css-direction-aware-tile/index.html
[Link 16]: http://www.html5tricks.com/download/pure-css-direction-aware-tile.rar
[11_HTML5_CSS3_ - _ - 9]: /images/20220330/28c0abd13cd647ff8da8ecb4a0659630.png
[Link 17]: http://www.html5tricks.com/demo/jquery-svg-image-slider/index.html
[Link 18]: http://www.html5tricks.com/download/jquery-svg-image-slider.rar
[11_HTML5_CSS3_ - _ - 10]: /images/20220330/7546159a4c0c4ae2ada65a2c69ef8d53.png
[Link 19]: http://www.html5tricks.com/demo/css3-firefly/index.html
[Link 20]: http://www.html5tricks.com/download/css3-firefly.rar
[11_HTML5_CSS3_ - _ - 11]: /images/20220330/e61e20a131b24e93b05004e504843de6.png
[Link 21]: http://www.html5tricks.com/demo/css3-colorful-3d-ball/index.html
[Link 22]: http://www.html5tricks.com/download/css3-colorful-3d-ball.rar
[http_www.i7758.com_archives_2681.html]: http://www.i7758.com/archives/2681.html