对于复杂的图形或动画，我们习惯于叠加图片或者使用CSS+JavaScript来处理。 不过，随着CSS3标准的不断成熟，我们甚至可以用CSS3来勾勒出一些图片并制作出来。 丰富的动画特效。 本文主要分享8款纯CSS3制作的动画应用，并提供源码下载。
1.纯CSS3实现发光开关按钮
前段时间我们给大家分享了一款豆浆般的透明CSS3 3D切换按钮，效果相当不错。 今天我们要分享一款类似的纯CSS3发光开关开关按钮，看起来像一个灯光开关，可以左右切换。 另外，开关上的文字有灯光的特效，整体看起来非常立体。
在线演示/源码下载
2.纯CSS3绘制的火龙图像
这是又一个用纯CSS3绘制的动画特效。 这次是纯CSS3绘制的火龙图像。 整条龙没有使用单一图片，充分利用了CSS3的特性。 小火龙看起来很现实，你觉得怎么样？
在线演示/源码下载
3. HTML5 3D点阵波浪翻滚动画
还记得之前分享的两个HTML5 3D波浪动画效果吗？ 它们是纯CSS3/HTML5实现3D波浪动画和HTML5 WebGL实验酷炫的HTML5 Canvas波浪墙，其中之一利用WebGL将3D效果渲染得淋漓尽致，但也很消耗CPU。 今天我们要分享的另一个基于HTML53D的点阵波浪滚动动画特效，也是特别的华丽。
在线演示/源码下载
4.纯CSS3天气动画图标
这是一个基于纯CSS3的天气动画图标。 利用CSS3的特性，我们在这里勾勒出7个关于天气的图标，每个图标都有一组代表当前天气的动画效果。 例如，如果下雪了，就会有下雪的动漫，雪也是如此。 这些 CSS3 天气图标可用于天气预报的应用程序。
在线演示/源码下载
5.纯CSS3实现人物摇头动画
这次我们要分享一个超帅的纯CSS3人物摇头动画。 在初始化过程中，角色的各个部分借助 CSS3 动画效果缝合在一起。 接下来是角色听音乐的场景，一边听音乐一边晃动耳朵，非常陶醉，周围还会有跳动音符的动画。
在线演示/源码下载
6.纯CSS3实现3D疗效iPhone 6动画
iPhone 6刚刚发布，今天我们用纯CSS3来简单勾勒出iPhone 6的外观，记住是纯CSS3实现的css3人物动画，没有使用一张图片。 由于CSS3特性的应用，iPhone 6的整个边框都有阴影，具有立体3D视觉效果。
在线演示/源码下载
7.纯CSS3三维动画菜单菜单项按下时有内阴影
这次小编给大家分享一个借助纯CSS3实现的三维动画菜单。 菜单的实现非常简单css3人物动画，也没有太多的特效渲染，但是看起来却非常干净漂亮，尤其是红色的背景，使得菜单变得有点三维的感觉。 另外，当我们点击菜单项时，菜单项会有内阴影的视觉效果。
在线演示/源码下载
8.纯CSS3勾勒出的红色图标和按钮的组合
这是一个基于纯CSS3的图标组合。 有了CSS3，我们基本上就可以在网页上绘制所有矢量图形了。 因为CSS3的出现，我们可以画曲线了。 这个图标是白色风格的。 有几种复杂的模式需要使用多层 CSS 代码来实现。 大多数图标的轮廓都比较简单。
在线演示/源码下载
发表评论