<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 动态进度条</title>
    <style>
        .progress {
            width: 500px;
            height: 40px;
            margin: 100px auto;
            background-color: yellow;
            border-radius: 5px;
            background-image: linear-gradient(
                135deg,
                green 25%,
                transparent 25%,
                transparent 50%,
                green 50%,
                green 75%,
                transparent 75%,
                transparent 100%
            );
            background-size: 40px 40px;

            background-position: 0 0;

            animation: move 1s linear infinite;
        }
        
        /*动画序列*/
        @keyframes move {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: 40px 0;
            }
        }
    </style>
</head>
<body>
    <div class="progress"></div>
</body>
</html>

纯CSS3制作进度条源代码的更多相关文章

  1. 每日CSS_纯CSS制作进度条

    每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...

  2. 8个纯CSS3制作的动画应用及源码

    对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...

  3. CSS3动画进度条

    CSS3动画进度条   CSS CODE: @-webkit-keyframes move{ 0%{ background-position: 0 0; } 100%{ background-posi ...

  4. Unity3D NGUI制作进度条

    利用GUI可以制作进度条,但是NGUI更加方便 我是用的NGUI3.5.3, 先找到NGUI  Slider的预制体,利用自带的UISlider来制作. 主要是利用UISlider的Value来控制进 ...

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

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

  6. CSS源码之纯css3制作的哆啦a梦图片

    本文章向大家介绍一个纯css3制作的哆啦a梦图像,主要巧妙的使用了css3的border-radius属性,需要的朋友介意参考一下本文章的源码. 效果图: 源码 <!doctype html&g ...

  7. html5中的progress兼容ie，制作进度条样式

    html5新增的progress标签用处很大,它可以制作进度条,不用像以前那样用css来制作进度条! 一.progress使用方法 progress标签很好使用,他有两个属性,value和max,va ...

  8. 移动端纯CSS3制作圆形进度条所遇到的问题

    近日在开发的页面中,需要制作一个动态的圆形进度条,首先想到的是利用两个矩形,宽等于直径的一半,高等于直径,两个矩形利用浮动贴在一起,设置overflow:hidden属性,作为盒子,内部有一个与其宽高 ...

  9. 纯css实现进度条效果

    去年7月份做一个公司商城的微信页面(微信用的chrome内核)需要写一个提示返现进度的进度条效果. 一个完整的进度条效果其实可以拆分一下: 一段背景: 一小段的静态的斜纹进度条: 斜纹进度条用线性渐变 ...

随机推荐

  1. [iOS微博项目 - 1.5] - NavigationBar标题按钮

    A.NavigationBar标题按钮 1.需求 在“首页”的导航栏中部设置一个“首页”文字+箭头按钮 统一设置样式 根据实际文本长度调整宽度 消除系统自带的点击高亮效果 点击按钮,箭头上下颠倒 gi ...

  2. IPhone 设备状态、闪光灯状态

    //判断闪光灯状态,修改默认的"CameraFlashOff" 按钮图片.转由 TGCameraFlash.m 控制图标切换    AVCaptureDevice *device ...

  3. HDU 5768 Lucky7 (中国剩余定理+容斥)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5768 给你n个同余方程组,然后给你l,r,问你l,r中有多少数%7=0且%ai != bi. 比较明显 ...

  4. CodeForces 707B Bakery (水题，暴力，贪心)

    题意:给定n个城市,其中有k个有仓库,问你在其他n-k个城市离仓库的最短距离是多少. 析:很容易想到暴力,并且要想最短,那么肯定是某一个仓库和某一个城市直接相连,这才是最优,所以只要枚举仓库,找第一个 ...

  5. SQLite的37个核心函数

    转载:http://www.feiesoft.com/00012/ abs(X) abs(X)返回 X 的绝对值. Abs(X) returns NULL if X is NULL. Abs(X) r ...

  6. IoC模式(Inversion of Control)

      1.依赖 依赖就是有联系,有地方使用到它就是有依赖它,一个系统不可能完全避免依赖.如果你的一个类或者模块在项目中没有用到它,恭喜你,可以从项目中剔除它或者排除它了,因为没有一个地方会依赖它.下面看 ...

  7. 【多校练习4签到题】HDU 4642—— Fliping game

    来源:点击打开链接 看上去很难,比赛的时候光看hehe了,也没有想. 但是仔细想想,是可以想出来的.一个棋盘上每个格子摆放一个硬币,硬币有正面1和反面0之分.现在两个人可以按照规则翻硬币,选择(x,y ...

  8. Spring声明式事务的配置~~~

    /*2011年8月28日 10:03:30 by Rush  */ 环境配置 项目使用SSH架构,现在要添加Spring事务管理功能,针对当前环境,只需要添加Spring 2.0 AOP类库即可.添加 ...

  9. 下载discuz 6 论坛的附件

    前段时间我下了个python脚本把emsky的附件全部下载了,之前是因为偶然发现emsky附件不登陆也能访问,直接访问一个url就行了. 后来发现大部分discuz6的论坛都有这个bug,我想是因为d ...

  10. UOJ #148. 【NOIP2015】跳石头 二分

    #148. [NOIP2015]跳石头 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://uoj.ac/problem/148 Descripti ...