android 进度条 纹理,12个创新的纯CSS3进度条特效 动画效果很漂亮

12个创新的纯CSS3进度条特效 动画效果很漂亮

1月 13, 2014

评论 (3)

Sponsor

进度条是很常用的一个用户体验项，用于表示事件的处理或加载状态，制作这些loading进度条我们通常会使用GIF图片来实现，但是这方法也有一些弊端，比如我要放大或改变颜色，这样就不好处理了。

要解决这些问题最好就是用代码来实现了，现在CSS3已经流行起来，我们是否也尝试一下用CSS来实现呢？方法是有的，而且很简单，看看今天设计达人网为大家分享的12个使用纯CSS3编写的进度条，loading图标和动画都很棒哦！如下图：

这里我特别制作成GIF图片方便大家浏览，这些loading的icon 图标动画各有特色，有充电状态、眼睛转动、时钟转动动画、加精的点点点等等，都是很有创意的设计哦！

是不是很好看而又创新呢？那么我们如何使用这些loading进条度应用在优秀网页设计上呢？下面我以左上角的时钟为例子，代码如下：

进度条CSS代码：

/* Timer*/

.timer{

width: 24px;

height: 24px;

background-color: transparent;

box-shadow: inset 0px 0px 0px 2px #fff;

border-radius: 50%;

position: relative;

margin: 38px auto;/* Not necessary- its only for layouting*/

}

.timer:after, .timer:before{

position: absolute;

content:"";

background-color: #fff;

}

.timer:after{

width: 10px;

height: 2px;

top: 11px;

left: 11px;

-webkit-transform-origin: 1px 1px;

-moz-transform-origin: 1px 1px;

transform-origin: 1px 1px;

-webkit-animation: minhand 2s linear infinite;

-moz-animation: minhand 2s linear infinite;

animation: minhand 2s linear infinite;

}

.timer:before{

width: 8px;

height: 2px;

top: 11px;

left: 11px;

-webkit-transform-origin: 1px 1px;

-moz-transform-origin: 1px 1px;

transform-origin: 1px 1px;

-webkit-animation: hrhand 8s linear infinite;

-moz-animation: hrhand 8s linear infinite;

animation: hrhand 8s linear infinite;

}

@-webkit-keyframes minhand{

0%{-webkit-transform:rotate(0deg)}

100%{-webkit-transform:rotate(360deg)}

}

@-moz-keyframes minhand{

0%{-moz-transform:rotate(0deg)}

100%{-moz-transform:rotate(360deg)}

}

@keyframes minhand{

0%{transform:rotate(0deg)}

100%{transform:rotate(360deg)}

}

@-webkit-keyframes hrhand{

0%{-webkit-transform:rotate(0deg)}

100%{-webkit-transform:rotate(360deg)}

}

@-moz-keyframes hrhand{

0%{-moz-transform:rotate(0deg)}

100%{-moz-transform:rotate(360deg)}

}

@keyframes hrhand{

0%{transform:rotate(0deg)}

100%{transform:rotate(360deg)}

}

HTML代码：

怎么样？是不是很简单呢？日后使用这些CSS编写的loading进度条就非常方便的改大小和颜色啦！

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

小安 -

2014 年 01 月 27 日 下午 1:32

.

辉儿所思 -

2014 年 01 月 17 日 下午 3:13

还css的，挺不错的

大头网 -

2014 年 01 月 13 日 下午 10:04

找CSS3特效就上【大头网】，地址：www.datouwang.com

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站