<!--html代码-->

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title></title>

</head>

<body>

    <div class="progressBox">

        <div class="progress" style="display:block;">

            <div class="progress-bar" style="width:40%;">

                <span id="bbb">40%</span>

            </div>

        </div>

    </div>

</body>

</html>
 /*css代码*/

.progressBox {

    width:80%;

    height:100%;

    overflow: visible;

}

.progress {

    height: 30px;

    padding: 6px;

    display:none;

    margin-top:20px;

    background: #809495;

    position: relative;

    overflow: visible;

    border-radius: 30px;

}

.progress .progress-bar{

    height:30px;

    z-index: 2;

    position: relative;

    background:#f0ad4e;

    border-radius:30px;

    animation: animate-positive 4s;

}

.progress .progress-bar span {

    position: absolute;

    top: -15px;

    right:-40px;

    color: #fff;

    width: 60px;

    height: 60px;

    display: block;

    font-size: 17px;

    font-weight: bold;

    background: #f0ad4e;

    line-height: 60px;

    text-align: center;

    border-radius: 100%;

}

@-webkit-keyframes animate-positive {

    0% { width: 0%;}

}

@keyframes animate-positive {

    0% { width:0%; }

}

纯css进度条效果的更多相关文章

  1. 纯css进度条,各种兼容

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD&g ...

  2. 纯css实现进度条效果

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

  3. CSS 实现滚动进度条效果

    参考:https://www.w3cplus.com/css/pure-css-create-scroll-indicator.html 前言:细化总结.参考的文章作者已经写的很详细了.这里在从初学者 ...

  4. 纯 CSS 实现波浪效果！

    一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

  5. 创建一个jQuery UI的垂直进度条效果

    日期:2013-9-24  来源:GBin1.com 在线演示 缺省的jQuery UI只有水平的进度条效果,没有垂直的进度条效果,仅仅重新定义JQuery UI的CSS不能解决这个问题. 这里我们扩 ...

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

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

  7. css 进度条

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

  8. Android -- 真正的 高仿微信 打开网页的进度条效果

    (本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截 ...

  9. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

随机推荐

  1. 转载：c++深拷贝和浅拷贝

    文章来自:http://blog.csdn.net/u010700335/article/details/39830425 C++中类的拷贝有两种:深拷贝,浅拷贝:当出现类的等号赋值时,即会调用拷贝函 ...

  2. BOUNDARIES AND SPACE

    BOUNDARIES AND SPACE Review Nice work! You've learned a lot. Let's review the web and CSS concepts c ...

  3. 尚硅谷springboot学习29-docker常用命令和操作

    前提是要安装docker,有关docker的安装请参考相关资料,下面来看一下常用的操作命令 1).镜像操作 操作 命令 说明 检索 docker search 关键字 eg:docker search ...

  4. Python介绍与安装

    Python 是一种面向对象的解释型程序设计语言,支持支持面向过程.函数式和面向对象编程.另外,Python可以在Windows.UNIX等多个操作系统上使用. 为什么学编程 编程是一种工具,可以实现 ...

  5. mysql创建索引以及对索引的理解

    创建表的时候创建索引   创建索引是指在某个表的一列或多列上建立一个索引,以便提高对表的访问速度.创建索引有3种方式,这3种方式分别是创建表的时候创建索引.在已经存在的表上创建索引和使用ALTER T ...

  6. git克隆远程仓库的时候断电了，使用git-fetch断点续传

    今天下载tensorflow serving 模型,但是因为主机电源线太长了,不知是我自己搞的还是同事,断电了都, 网速捉急,下载了挺长时间的,一看,git clone 到中途竟然断电,不过查看,还好 ...

  7. c++ 面试题(数据库)

    1,索引的原理: https://www.cnblogs.com/songwenjie/p/9414960.html https://blog.csdn.net/qq_32924343/article ...

  8. object references an unsaved transient instance save the transient instance before flushing

    object references an unsaved transient instance save the transient instance before flushing 对象引用未保存的 ...

  9. 解决win10电脑VB虚拟机无法安装64位系统的方法

    64位电脑在VB虚拟机里却只能安装32位系统怎么办? **原因:CPU虚拟化未开启 只要CPU虚拟化开启即可解决问题. 开启步骤: 1.打开电脑设置 2.进入 更新和安全 界面 3.进入 恢复 界面 ...

  10. 记录----第一次使用BFS（广度搜索）学习经验总结

    学习经验记录与分享—— 最近在学习中接触到了一种解决最短路径的实用方法----BFS(广度搜索),在这里总结并分享一下第一次学习的经验. 首先第一个要了解的是"queue"(队列函 ...