11款超震撼的HTML5和纯CSS3动画

1.纯CSS3小姑娘荡秋千动画

这又是一款基于纯CSS3的动画特效，动画主要描绘了一个小姑娘荡秋千的情景，首先小姑娘人物和秋千都是用CSS3绘制而成，对于该动画实例来说，难度最大的在于小姑娘在荡秋千的时候身体各个部位关节的联动，在这个动画中，这方面表现得非常逼真。

在线演示

源码下载

2.SVG图片波浪效果渲染动画

今天我们要为大家分享一款很酷的SVG图片动画，主要是图片上会出现波浪的渲染动画。实现原理是在图片上方利用SVG路径绘制了一层蒙板，然后蒙版进行一定的随机扭曲就形成了图片上方波浪翻滚的动画特效，而且也十分逼真。

在线演示

源码下载

3.jQuery五彩炫酷模拟键盘 带键盘敲击声音

还记得以前我们分享过两款基于jQuery的模拟键盘插件，一个是jQuery获取键盘按键提示，另外一个是jQuery模拟键盘事件，都非常不错。今天我们要分享的这款jQuery模拟键盘插件非常炫酷，键盘上面会出现动态改变的背景颜色，而且颜色都是各个角度渐变的，同时更为强大是，敲击键盘时会带有键盘敲击的声音，功能十分强大。

在线演示

源码下载

4.HTML5 Canvas高空瀑布下落湖面动画

HTML5 Canvas是一个神奇的网页技术，我们在Canvas画布上可以做任何有趣的事情。今天要分享的这款瀑布动画就是利用了HTML5 Canvas的相关特性实现的。记得我们在很早以前给大家介绍过一个超逼真的HTML5瀑布动画，也是在Canvas上完成的，非常酷。今天的这个瀑布更加美妙，因为它模拟了整个瀑布落入湖面的美妙景象，但是从逼真度上来说，还是稍微有待改进，不过个人觉得已经非常不错了。

在线演示

源码下载

5.超实用CSS3 3D菜单 菜单项悬浮凸出立体效果

昨天我们向大家分享过一款非常不错的CSS3垂直3D菜单，主要以鼠标滑过菜单项立方体旋转的动画特效展现。今天我们要接着为大家介绍另外一款CSS3 3D菜单，不同的是，这款菜单是水平展现的，更适合大部分网站的菜单选择。同时，这款菜单的特点是鼠标滑过菜单项时，菜单项会逐渐悬浮凸出显示，看上去非常炫酷。

在线演示

源码下载

6.纯CSS3炫酷3D菜单 菜单项3D旋转动画

不久前，我们刚刚为大家分享过很多外观各异的CSS3菜单，很多都是比较实用的，比如这款jQuery/CSS3波浪形弹性下拉菜单就非常具有创意，也很实用。今天要介绍的也是一款基于纯CSS3的3D菜单，当我们将鼠标滑过菜单项时，菜单项就会实现3D的旋转动画，另外菜单项是垂直的显示的。

在线演示

源码下载

7.SVG实现吸血蝙蝠变身动画

今天我们要分享一款基于SVG的炫酷动画，它是一只可以变身为吸血僵尸的吸血蝙蝠。首先我们利用SVG的路径绘制了一只会扇动翅膀的蝙蝠，并且蝙蝠在飞行的过程中还有阴影，这样更显得具有真实感。然后随便在页面空白地方点击鼠标，飞行的吸血蝙蝠立马摇身一变，变成了一只恶魔般的吸血僵尸，这中间我们仅仅是对SVG的路径进行了切换而已。

在线演示

源码下载

8.SVG/CSS3实现按钮点击波纹动画

之前对于按钮动画，我们分享过很多基于jQuery和CSS3的鼠标滑过按钮动画，有滑过后发光的，也有波纹的，都非常不错。这次我们要分享的是一款基于CSS3和SVG的波纹按钮动画，鼠标点击按钮时，按钮上将会出项各种形状的波纹特效，一共有4组波纹动画效果。

在线演示1

在线演示2

在线演示3

在线演示4

源码下载

9.HTML5/CSS3 全屏3D焦点图切换插件

今天我们要给大家分享一款基于HTML5和CSS3的3D焦点图插件，类似的3D焦点图插件之前也有分享过，比如这款jQuery 3D 垂直螺旋切换焦点图动画和这款jQuery/CSS3 3D旋转图片切换焦点图插件都非常不错。这次的3D焦点图动画插件是全屏的，效果非常绚丽，整张图片就像悬浮在夜空中一样，切换时还带有丰富的过渡动画效果。

在线演示

源码下载

10.基于Vue.js的超实用科学型计算器

不久前我们为大家分享过一些功能相对比较简单的jQuery计算器和HTML5计算器，可以实现简单的加减乘除功能，比如这款jQuery精美的加减乘除计算器 支持存储功能和简洁美观的jQuery计算器插件。这次我们要分享一款基于Vue.js的计算器插件，这款计算器功能比较强大，支持科学型的计算功能，当然我们也可以切换到标准型的简单模式。

在线演示

源码下载

11.CSS3/SVG绘制的悉尼歌剧院

这是一款基于纯CSS和SVG实现的歌剧院建筑，CSS3的强大和SVG的灵活打造了这个用不同线条勾勒的悉尼歌剧院，另外还有海面和天空中的太阳和白云也描绘的活灵活现，在网页绘制方面，除了炫酷的Canvas外，SVG也是不错的选择。

在线演示

源码下载

未经允许不得转载：爱前端网 » 11款超震撼的HTML5和纯CSS3动画