CSS图书馆 » HTML & CSS » 12个创新的纯CSS3进度条特效 动画效果很漂亮

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

发表于: HTML & CSS. 评论 (3)
Sponsor

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

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

css-loadding

这里我特别制作成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代码:

<div class="timer"></div>

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

 

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

+ 添加评论3 Responses to “12个创新的纯CSS3进度条特效 动画效果很漂亮”

  1. 小安 - 回复

    .

  2. 辉儿所思 - 回复

    还css的,挺不错的

  3. 大头网 - 回复

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


{ 发表评论 }