转载

纯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动画系列精选(一)

在线演示源码下载

正文到此结束
Loading...