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

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

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2013-10-30   阅读次数: 104   查看权限: 游客查看

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>

关键词: css3,动画,进度条   编辑时间: 2013-11-01 11:18:14

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博  匿名评论  验证码:  点击更新
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐
  • kendo ui简介