css3闪烁跳跃动画进度条效果

搜索

您当前位置：首页 > 文章中心 > HTML5+CSS3 > CSS3

【CSS3】

下载

新闻

文章

css3闪烁跳跃动画进度条效果

如果你的浏览器支持HTML5那应该可以看到上面的动画效果了。

我们来看看html结构：

<div id="progress">
    <ul>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
    </ul>
</div>

这html非常简单，首先我们让ul居中、圆角、阴影。每个li顺序向左移动，而li里的div做变大缩小动画，并分配不同的透明背景。以第一个li为例代码是这样的：

#progress ul li:nth-child(1) {
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    -o-animation-delay: 0.1s;
    animation-delay: 0.1s;
}
#progress ul li:nth-child(1) div {
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    -o-animation-delay: 0.1s;
    animation-delay: 0.1s;
    background-color: rgba(120, 120, 120, 0.3);
}

因为需要兼容所以代码比较多，再加上有好多个li呢，最终我决定以js循环搞定：

<script type="text/javascript">
    var color=["rgba(255,0,0,0.3)","rgba(255,0,255,0.3)","rgba(0,0,255,0.3)","rgba(0,255,255,0.3)","rgba(0,255,0,0.3)","rgba(255,255,0,0.3)","rgba(255,255,255,0.3)"];
    var props = "animationDelay,WebkitAnimationDelay,MozAnimationDelay,OAnimationDelay".split(",");
    var delay, i, el = document.createElement('div');
    for(i = props.length-1; i >=0; i --) {
        if(typeof el.style[props[i]] !== "undefined") {
            delay = props[i];
            break;
        }
    }
    var li=document.getElementById("progress").getElementsByTagName("li");
    for(i = li.length-1;i >= 0;i --){
        li[i].style[delay]=0.1*i+"s";
        li[i].childNodes[0].style[delay]=0.1*i+"s";
        li[i].childNodes[0].style.backgroundColor=color[i];
    }
</script>

动画代码：

<style type="text/css">
    @keyframes bump {
 0% {opacity: 0;left: -10px} 100% { left: 570px; opacity: 0} 10%, 85% { opacity: 1}
}
    @keyframes spin {
 0%, 100% {height: 20px;top:25px} 50% {height: 80px;top:-5px}
}
</style>

注意这里还没添加兼容写法，实战中需要加上。

==========================这是美丽的分割线==========================

最后附上另一种平滑进度条效果代码：

<style type="text/css">
    .bg{
        padding: 20px;
        text-align: center;
        background-color: #35363a;
    }
    @keyframes login{
        0%{width:1px}100%{width:600px}
    }
    .progress-out {
        margin: 40px auto;
        text-align: left;
        width: 608px;
        background-color: #292a2e;
        height: 11px;
        border-radius: 11px;
        border-bottom: 1px solid #48494d;
        border-top: 1px solid #0e0f10;
    }
    .progress-in{
        margin:2px 4px;
        width: 1px;
        background-color: #a0d500;
        height: 5px;
        border-radius: 5px;
        border-bottom: 1px solid #000;
        border-top: 1px solid #d0f16f;
        animation: login 5s infinite linear;
    }
    div.b{
        background-color: #02a5d0;
        border-top: 1px solid #01eded;
    }
</style>
<div class="bg">
    <div class="progress-out">
        <div class="progress-in"></div>
    </div>
    <div class="progress-out">
        <div class="progress-in b"></div>
    </div>
</div>