CSS3动画进度条

 

CSS CODE:

@-webkit-keyframes move{
        0%{
            background-position: 0 0;
        }
        100%{
            background-position: 30px 30px;
        }
    }
    @-moz-keyframes move{
        0%{
            background-position: 0 0;
        }
        100%{
            background-position: 30px 30px;
        }
    }
    @-ms-keyframes move{
        0%{
            background-position: 0 0;
        }
        100%{
            background-position: 30px 30px;
        }
    }
    @keyframes move{
        0%{
            background-position: 0 0;
        }
        100%{
            background-position: 30px 30px;
        }
    }
    .progress{
        width: 300px;
        height: 25px;
        background-color:rgba(1,190,1,1) ;
        box-shadow: 0px 2px 0px rgba(255,255,255,0.5) inset;
        border-radius: 5px;
        background-size: 30px 30px;
        background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), to(transparent));
        background-image: -moz-linear-gradient(
          -45deg,
          rgba(255, 255, 255, .2) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, .2) 50%,
          rgba(255, 255, 255, .2) 75%,
          transparent 75%,
          transparent
       );
        background-image: linear-gradient(
          -45deg,
          rgba(255, 255, 255, .2) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, .2) 50%,
          rgba(255, 255, 255, .2) 75%,
          transparent 75%,
          transparent
       );
        -webkit-animation:move 1s linear infinite;
        -moz-animation:move 1s linear infinite;
        -ms-animation:move 1s linear infinite;
        -o-animation:move 1s linear infinite;
        animation:move 1s linear infinite;
    }

HTML CODE:

<div class="progress"></div>

这里两个关键:

background-size  background-image

中间白色条的大小可以通过background-size控制,颜色通过background-image rgba控制

CSS3动画进度条的更多相关文章

  1. 类似 Dribbble 下载按钮的 SVG 弹性动画进度条

    Codrops 发布了一个如何创建一个基于弹性效果的 SVG 加载进度条教程,基于 SVG 和 TweenMax 实现.按钮开始的时候是一个带有箭头的图标,一旦它被点击,动画成一个有趣的小金属丝和一个 ...

  2. 纯CSS3制作进度条源代码

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  3. Javascript 及 CSS3 实现进度条效果

    Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条:  在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...

  4. iOS之小功能模块--彩虹动画进度条学习和自主封装改进

    前言: 首先展示一下这个iOS小示例的彩色进度条动画效果: 阅读本文先说说好处:对于基础不好的读者,可以直接阅读文末尾的"如何使用彩虹动画进度条"章节,然后将我封装好的这个功能模块 ...

  5. css3实现进度条的模拟

    两种进度条动画的实现: 1.css3,但IE9-不支持. 2.js动画,兼容性好,但没有css3实现的顺畅 Demo: <html>    <head>        < ...

  6. 两种CSS3圆环进度条详解

    晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...

  7. CSS3 Loading进度条加载动画特效

    在线演示 本地下载

  8. css3彩色进度条

    <html>    <head>        <title>progress</title>        <script type=" ...

  9. css3圈圈进度条

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

随机推荐

  1. C和指针 第十六章 标准函数库 本地跳转setjmp.h

    setjmp和longjmp提供一种类似goto语句的机制,但它的作用域不局限于同一个函数的作用域之内.这些函数可以用于深层次的嵌套函数调用链. int setjmp(jmp_buf state); ...

  2. 培训第五天---JS

    &&与||的基础<script type="text/javascript"> var c = 4||3; alert(c);</script&g ...

  3. Python开发入门与实战12-业务逻辑层

    12. Biz业务层 前面的章节我们把大量的业务函数都放在了views.py里,按照目前这一的写法,当我们编写的系统复杂较高时,我们的views.py将会越来越复杂,大量的业务函数包含其中使其成为一个 ...

  4. [Algorithms(Princeton)] Week1 - Percolation

    public class Percolation { private boolean[] openSites; private int gridN; private WeightedQuickUnio ...

  5. 结合tcpdump命令对traceroute深入分析

    昨天突然被问到traceroute的原理,一时竟也说不出来,有些命令平时虽然经常在用,但实际原理确并不了解,趁这次机会就来梳理一下. traceroute:是网络诊断中,用来分析IP包经过那些路由的命 ...

  6. iOS_SN_CoreData数据迁移

    最开始使用CoreData的时候碰到一个问题,就是当增加一个字段的时候再次运行APP会发生崩溃,一开始不知道什么原因,只知道是里面的表结构发生改变,就重新删掉APP再次安装是可以运行的,这样调试完后觉 ...

  7. ecshop二次开发之购物车常见问题

    1.ecshop二次开发中保存注册用户购物车数据解决方法:ecshop购物车是数据库中cart表来支持的,在ecshop表中rec_id是编号,user_id是注册用户的id,session_id表示 ...

  8. projecteuler----&amp;gt;problem=8----Largest product in a series

    title: The four adjacent digits in the 1000-digit number that have the greatest product are 9 9 8 9 ...

  9. Linux开机启动(bootstrap)下

    init process (根据boot loader的选项,Linux此时可以进入单用户模式(single user mode).在此模式下,初始脚本还没有开始执行,我们可以检测并修复计算机可能存在 ...

  10. javascript原型链__proto__属性的理解

    在javascript中,按照惯例,构造函数始终都应该以一个大写字母开头,而非构造函数则应该以一个小写字母开头.一个方法使用new操作符创建,例如下面代码块中的Person1(可以吧Person1看做 ...