转载

纯CSS3动画系列精选(一)

今天开始我们要陆续为大家整理一些纯CSS3实现的动画特效，这里的大部分案例都是用CSS3实现，很少使用JavaScript。特别是在网页中绘制一些人物、动物等，CSS3还是绰绰有余的，你缺少的只是想像力，本文及接下来的系列文章将带你领略CSS3的无限风采。

1、 CSS3按钮发光动画

今天分享一款基于纯CSS3的发光按钮，多种色彩的按钮排列在网页上，伴随着闪闪发光的效果，CSS3的强大肯定会让你叹为观止。该CSS3按钮发光动画主要是利用了webkit的动画属性，让各种颜色规律性的发生变化。也许这么绚丽的CSS3按钮应用不那么广泛，但是在一些需要特效的网页中用来做提交表单按钮或者菜单项，那就非常方便了。

纯CSS3动画系列精选(一)

在线演示源码下载

2、纯CSS3发光登录表单

我们见过很多CSS3表单，制作都非常精美，今天介绍的这款CSS3表单不但外观华丽，而且伴有颜色发光动画。当鼠标激活表单时，表单周围就会出现颜色渐变的发光动画，配合黑色的背景，整个CSS3表单显得格外亮丽。更重要的是，这个CSS3发光表单基本用CSS3实现，很少的JS代码，在CSS3引擎上优化非常明显。

纯CSS3动画系列精选(一)

在线演示源码下载

3、纯CSS3加载Loading动画图 12款创意设计

我们经常使用GIF图片来实现Loading加载动画，确实利用GIF图片来实现也非常方便，但需要我们一定的制图功底，我们作为程序员很多对制图一窍不通，那么今天就让我们用CSS3代码来实现漂亮的Loading加载动画吧，下面的12款非常有创意的CSS3 Loading加载动画肯定会让你喜欢上CSS3，喜欢上HTML5。

纯CSS3动画系列精选(一)

在线演示源码下载

4、CSS3扁平化面包屑菜单导航

面包屑菜单一般贯穿整个网站，可以很清晰地描述访客的当前层级目录，让用户更清楚地了解网站各个频道之间的关系。这款CSS3面包屑菜单十分精巧，它采用了扁平化设计，让菜单显得更加简单易用，视觉效果也非常不错。该CSS3面包屑菜单的箭头也是用纯CSS3代码实现。

纯CSS3动画系列精选(一)

在线演示源码下载

5、纯CSS3圆形面包屑菜单

今天我们再来介绍一款CSS3圆形面包屑菜单，该 CSS3菜单的菜单项默认是圆形的，当鼠标滑过菜单项时，菜单项即会展开，并伴随展开动画。让我们一起来看看这款纯CSS3实现的圆形面包屑菜单吧。

纯CSS3动画系列精选(一)

在线演示源码下载

6、纯CSS3 3D按钮按钮酷似牛奶般剔透

CSS3按钮一般都可以设计的非常漂亮，利用投影、渐变等CSS3属性特效可以把按钮渲染的十分动感。今天分享的这款CSS3按钮外观非常特别，它看上去酷似晶莹剔透的牛奶，而且在点击按钮时出现3D效果的动画，按钮按下时，按钮会轻轻的弹动一下，非常逼真。

纯CSS3动画系列精选(一)

在线演示源码下载

7、纯CSS3 Android Logo动画绘制

利用CSS3可以绘制很多复杂的图案图标，今天就利用纯CSS3实现Android Logo图标，该CSS3 Android Logo主要利用了CSS3中的圆角等属性，绘制出来的Logo非常逼真，同时该Android Logo还有动画效果，鼠标滑过Android小人的头和手时，小手还能够挥动。

纯CSS3动画系列精选(一)

在线演示源码下载

8、纯CSS3人物行走动画

CSS3实在是太强大了，今天分享的CSS3动画非常神奇，它可以模拟人物行走，而且人物行走动画非常逼真。人物行走时的跨步动画时多张图片重叠实现的。有了这个CSS3人物行走动画的基础，我们就可以更方便的在浏览器上实现HTML5游戏。

纯CSS3动画系列精选(一)

在线演示源码下载

9、纯CSS3美化 checkbox 和 Radiobox 按钮

利用CSS3我们可以打造非常具有个性化的用户表单，今天我们就利用CSS3美化checkbox复选框和Radiobox单选框。CSS3美化Checkbox和Radiobox的原理很简单，在页面上新建一个checkbox和radiobox并给予他们默认的label标签显示文字，然后将checkbox和radiobox隐藏，再利用CSS3来美化label标签，这样，我们就自定义了checkbox和radiobox，外观很时尚。

纯CSS3动画系列精选(一)