<!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. CSS3动画进度条

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

  2. Unity3D NGUI制作进度条

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

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

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

  4. css3实现进度条的模拟

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

  5. 制作进度条(UISlider)

    怎样判断是否应当使用进度条 用进度条的主要目的是为了用一根管子的充满程度来直观地表示某种数值的百分比,进度条分为可拖动和不可拖动两种. 可拖动进度条和不可拖动进度条的原理几乎是一模一样,唯一的区别是可 ...

  6. 纯CSS3制作卡通场景汽车动画效果

    前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...

  7. 纯CSS打造进度条

    进度条效果如下: CSS部分 body { background-color: white; } .progress-bar { display: flex; flex-direction: row; ...

  8. 使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...

  9. 分针网—IT教育:使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...

随机推荐

  1. 配置使用EF常见的一些问题及解决方案

    转自http://www.2cto.com/database/201511/449573.html 提示未注册,找不到驱动程序 No Entity Framework provider found f ...

  2. 金士顿U盘,群联PS2251-60主控,量产CDROM教程

    量产前准备: 1. 插上U盘,(台式机的话插机箱后面) 2. 一台电脑,最好不要装杀毒软件(特别是360) 3. ISO镜像文件 4. 下载MPALL v3.29.0B.zip 请先耐心看完教程: 1 ...

  3. USACO GCD Extreme(II)

    题目大意:求gcd(1,2)+gcd(1,3)+gcd(2,3)+...+gcd(n-1,n) ---------------------------------------------------- ...

  4. iOS本地化

    本地化与相机中显示英文  工程PROJECT -> info ->Localizations 添加相应的国际化语言  一.当你发现相机中显示英文,可以通过它设置 添加一项“Localize ...

  5. php正则预查

    php正则预查 // 把ing结尾的单词词根部分(即不含ing部分)找出来$str = 'hello ,when i am working , don not coming';零宽度:站在原地往前看, ...

  6. eclipse 常用快捷键及调试方法

    原文链接:http://my.oschina.net/u/1054538/blog/741561 常用快捷键 Eclipse最全快捷键,熟悉快捷键可以帮助开发事半功倍,节省更多的时间来用于做有意义的事 ...

  7. 最近使用ajaxFileUpload和Jcrop来实现图片上传和截图,出现一个图片无法更换的问题

    使用setImage 都无法更换 刷新图片 找了很久 什么方法都找过,最后发现...... 原来是 上传的图片的命名问题... 每次上传的图片 保存后都是同样的图片, 所以返回路径都是一样... jc ...

  8. Linux syslog介绍

    一.简介 syslog是Linux系统默认的日志守护进程.默认的主配置文件和辅助配置文件分别是/etc/syslog.conf和/etc/sysconfig/syslog文件.通常,syslog 接受 ...

  9. 关于ActionContext.getContext()的用法

    为了避免与Servlet API耦合在一起,方便Action类做单元测试,Struts 2对HttpServletRequest.HttpSession和ServletContext进行了封装,构造了 ...

  10. 企业级账号更新app

    企业级账号 版本更新总结       参考:http://jingyan.baidu.com/article/a3aad71aa5fbfbb1fb0096b1.html 1.打包ipa,plist工具 ...