css3制作动态进度条以及附加jQuery百分比数字显示

2024-07-11 08:29:18

字体：大中小

来源：转载

供稿：网友

在网页设计中，想必一个精彩的进度条将会为你的网站增添不少的精彩，一个好的网页设计往往体现在一些小的细节上面，细节决定了成功与否。在此之前也为大家分享了一些关于进度条的设计 ― 让人不得不爱的22个UI进度条设计。有了设计理念和作品，那我们怎么用最精彩的方法运用到我们的网页制作当中呢﹖今天就为大家分享一个利用css3制作动态进度条以及附加jQuery百分比数字显示。其效果对比flash来说却毫不逊色，有一个精致的动画进度条，上面还有当前进度的百分比数字显示，而且还会跟着进度条而移动。相信追求新颖的朋友来说一定会非常的喜欢。

HTML代码
HTML的代码非常简单，只要为进度条提供一个容器就可以了。基本的HTML代码如下：

复制代码

代码如下:
<div class="wrapper">
<div class="load-bar">
<div class="load-bar-inner" data-loading="0"> <span id="counter"></span> </div>
</div>
<h1>Loading</h1>
<p>Please wait...(By:<a href="http://www.jiawin.com">www.jiawin.com</a>)</p>
</div>

CSS样式表
接下来是为我们的进度条定义样式，这里主要运用了CSS3的linear-gradient的渐变属性、border-radius的圆角属性、box-shadow的阴影属性等等，来制作出进度条的初步模型。完成进度条的模型后我们利用animation属性，让进度条开始动起来，就其中的进度条动画设置代码如下：

复制代码

代码如下:
.load-bar-inner {
height: 99%;
width: 0%;
border-radius: inherit;
position: relative;
background: #c2d7ac;
background: linear-gradient(#e0f6c8, #98ad84);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 5px rgba(0, 0, 0, 0.3), 0 4px 5px rgba(0, 0, 0, 0.3);
animation: loader 10s linear infinite;
}

如果接触了CSS3的朋友，相信大多数人对这个属性都比较熟悉了，在这里大概的说明一下animation设置的参数：
设置对象所应用的动画名称：loader
设置对象动画的持续时间：10s
设置对象动画的过渡类型：linear （线性过渡，等同于贝塞尔曲线）
设置对象动画的循环次数：infinite （无限循环）
@keyframes loader这个标签属性是用来被animation使用的，定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态：

复制代码

代码如下:
@keyframes loader {
from {
width: 0%;
}
to {
width: 100%;
}
}

上一篇：高度导致IE6中两个DIV有3px空隙问题_margin-right/left可解决

下一篇：position替代部分float进行网页元素定位

发表评论

共有条评论