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控制

时间: 2024-10-18 20:11:33

CSS3动画进度条的相关文章

css3圆形进度条

前几天在网上看到了一个css3的进度条,自己想了下.做了一个. 进度条由4层构成,最下面的一层表示初始状态,我用蓝色的圆形div表示,第二层到第四层用来做进度动画用,第二层的圆是由一个宽高都为0的div,加上border和圆角做出来的,初始状态的时候,border的颜色全都是透明,旋转45度.第三层是一个1/4圆,用来旋转用的,当这个圆开始旋转的时候,第二层的圆的border-top-color变成最终的颜色,我用的紫色,当这个圆转到90度的时候,第二层的圆的右边框变为紫色.由于有动画效果,在0

JS框架_(Progress.js)圆形动画进度条

圆形动画进度条效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> p { position: fixed; top: 50%; left: 0; right: 0; text-align: center; transf

iOS之UI--彩虹动画进度条学习和自主封装改进

前言: 首先展示一下这个iOS小示例的彩色进度条动画效果: 阅读本文先说说好处:对于基础不好的读者,可以直接阅读文末尾的"如何使用彩虹动画进度条"章节,然后将我封装好的这个功能模块类用到你的工程项目中即可. 这个效果的示例是老外Nick Jensen在2013年写的一个作品:使用CAGradientLayer的动画精度条View. 本人阅读了老外的源码之后,觉得老外这个进度条的效果很不错,但是觉得他写的代码有待改进. 小贴士:读者可以直接将老外的源码下载下来,跑一下,然后对比本人写的博

Javascript 及 CSS3 实现进度条效果

一:css2 属性clip实现网页进度条:  在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解一下: 浏览器支持程度:所有主流浏览器都支持 clip 属性. Clip属性在w3c官网是这样描述的:通过对元素进行裁剪来控制元素的可视区域,默认情况下 元素是不进行任何裁剪的. Clip裁剪的语法如下: .xx {clip:rect(<top>, <right>, <bottom>, <left>)} Rect

两种CSS3圆环进度条详解

晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第一种:通过overflow溢出隐藏的方式: 这种方法好处在于容易理解,只需要一层一层的嵌套,即可得到效果,但是实现起来较为繁琐,HTML的结构也比较冗余. 先看HTML结构: <div class="circle-one"> <div class="circle

95秀-PK 动画 进度条 描边 圆角图片

PK界面 <?xml version="1.0" encoding="utf-8"?> <merge xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <Rela

bootstrap动画进度条

创建一个动画的进度条的步骤如下: 添加一个带有 class .progress 和 .progress-striped 的 <div>.同时添加 class .active. 接着,在上面的 <div> 内,添加一个带有 class .progress-bar 的空的 <div>. 添加一个带有百分比表示的宽度的 style 属性,例如 style="60%"; 表示进度条在 60% 的位置. 这将会使条纹具有从右向左的运动感. 实例 <lin

学习 | css3实现进度条加载

进度条加载是页面加载时的一种交互效果,这样做的目的是提高用户体验. 进度条的的实现分为3大部分:1.页面布局,2.进度条动效,3.何时进度条增加. 文件目录 加载文件顺序 <link rel="stylesheet/less" href="./index.less"> <script src="./zepto.min.js"></script> <script src="./less.js&qu

CSS3彩色进度条加载动画 带进度百分比

在线演示       本地下载 原文地址:https://www.cnblogs.com/datiangou/p/9986695.html