分享12个简洁漂亮的纯CSS3进度条特效动画代码

HTML5+CSS3 欲思 0评论

进度条是很常用的一个用户体验项,用于表示事件的处理或加载状态,制作这些loading进度条我们通常会使用GIF图片来实现,但是这方法也有一些弊端,比如我要放大或改变颜色,这样就不好处理了。 要解决这些问题最好就是用代码来实现了,现在CSS3已经流行起来,我们是否也尝试一下用CSS来实现呢?方法是有的,而且很简单,看看下面这12个使用纯CSS3编写的进度条,loading图标和动画都很棒!如下图:

分享12个简洁漂亮的纯CSS3进度条特效动画代码

这些进度条看起来非常的简洁,而且创业十足,令人耳目一新的感觉。要怎么样在页面里使用这些loading进条度呢?

下面我以左上角的时钟为例子,代码如下:

/* 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元素每个人可以根据自己的需要修改。

每个进度条特效的代码都不同,如果需要其他的特效代码可以直接下载源码自己拿出来用。有问题可以参考演示网站,应该容易解决。

传送门:在线演示 | 原代码下载    注:文章参考自设计达人。

转载请注明:欲思博客 » 分享12个简洁漂亮的纯CSS3进度条特效动画代码

如果你觉得这篇文章或者我分享的主题对你有帮助,请支持我继续更新网站和主题 !捐赠本站
喜欢 (8)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址