8个纯CSS3制做的动画应用及源码

对于一个复杂的图形或者动画来讲，以前咱们的处理方式是图片叠加或者利用CSS+JavaScript的方法，然而随着CSS3标准的不断成熟，咱们甚至彻底能够利用CSS3来绘制一些图片和制做丰富的动画特效。本文主要是分享了8个纯CSS3制做的动画应用，提供源代码下载。

一、纯CSS3实现发光开关切换按钮

前段时间咱们向你们分享过一款牛奶般剔透的CSS3 3D开关按钮，效果至关赞。今天咱们要来分享一款相似的纯CSS3发光开关切换按钮，它的外观就像一个电灯的开关，能够左右切换。另外开关上的文字还有发光的特效，总体看上去颇有立体感。

在线演示 / 源码下载

二、纯CSS3绘制的火龙图像

这又是一款用纯CSS3绘制的动画特效，此次是一个纯CSS3绘制的火龙图像，整条龙没有使用一张图片，彻底利用了CSS3的特性。小火龙的样子仍是挺逼真的，你们以为呢？

在线演示 / 源码下载

三、HTML5 3D点阵列波浪翻滚动画

还记得以前分享过的两款HTML5 3D波浪动画特效么？它们是纯CSS3/HTML5实现3D波浪形动画和HTML5 WebGL实验 超酷的HTML5 Canvas波浪墙，其中一款利用WebGL让3D效果渲染得淋漓尽致，不过也消耗CPU。今天咱们要再分享一款基于HTML5 3D的点阵列波浪翻滚动画特效，一样是很是的壮观。

在线演示 / 源码下载

四、纯CSS3天气动画图标

这是一款基于纯CSS3的天气动画图标，利用CSS3特性，咱们在这里绘制了7个关于天气的图标，而且每个图标都有一套表明当前天气的动画特效，好比下雨天气，就会有下雨的动画，下雪也是如此。这些CSS3天气图标能够应用在关于天气预报的应用中。

在线演示 / 源码下载

五、纯CSS3实现人物摇头动画

此次咱们要来分享一款超级可爱的纯CSS3人物摇头动画，初始化的时候人物的各个部位是利用CSS3动画效果拼接而成，接下来就是人物听音乐的场景，一边听音乐一边摇着脑壳，十分陶醉的样子，周围还会出现跳动的音符动画。

在线演示 / 源码下载

六、纯CSS3实现3D效果iPhone 6动画

iPhone 6刚发布不久，今天咱们就用纯CSS3来把iPhone 6的外观简单地绘制出来，记得是用纯CSS3实现的哦，没有用一张图片。因为CSS3特性的运用，整个iPhone 6手机边框带有阴影，颇有立体3D的视觉效果。

在线演示 / 源码下载

七、纯CSS3立体动画菜单 菜单项按下有内阴影

此次小编来分享一款利用纯CSS3实现的立体动画菜单，该菜单的实现很是简单，并无太多的特效渲染，可是看起来却很是干净漂亮，尤为配合灰黑色的背景，让菜单显得有点立体的感受。另外，当咱们点击菜单项时，菜单项将会出现内阴影的视觉效果。

在线演示 / 源码下载

八、纯CSS3绘制的黑色图标按钮组合

这是一款基于纯CSS3的图标组合，利用CSS3，咱们基本能够在网页上绘制所有矢量图形，由于CSS3的出现咱们能够绘制曲线了。这款图标是黑色风格的，有几个复杂的图案须要用多层CSS代码才能实现，大部分图标的绘制仍是比较简单的。

在线演示 / 源码下载

以上就是8个纯CSS3制做的动画应用及源码，欢迎收藏分享。 本文连接：http://www.html5tricks.com/8-pure-css3-animations.html