看效果先：http://sandbox.runjs.cn/show/b6bmksvn

参考：

jquery圆环百分比进度条制作

CSS clip:rect矩形剪裁功能及一些应用介绍

CSS clip:rect几个值含义示意实例页面

clip:rect下png通道透明下sprite图片定位实例页面

clip:rect图片剪裁效果预览实例页面

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        .clip-wrap {

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            margin: auto;

            width: 400px;

            height:400px;

            background-color: #ffb348;

            border-radius: 50%;

        }

        .clip-wrap .left,.clip-wrap .right {

            position: absolute;

            top:0;

            left:0;

            width: 100%;

            height:100%;

            background-color: #cccccc;

            border-radius: 50%;

            -webkit-transition: all 0.5s linear;

        }

        .clip-wrap .left {

            clip: rect(0 ,200px,400px,0);

        }

        .clip-wrap .right {

            clip: rect(0 ,400px,400px,200px);

        }

        .mask {

            position: absolute;

            top:50%;

            left:50%;

            margin-left: -180px;

            margin-top: -180px;

            width:360px;

            height:360px;

            background-color: #fff;

            border-radius: 50%;

            line-height: 360px;

            text-align: center;

            font-size: 100px;

            color: #ff9f40;

        }

        .left-wrap {

            position: absolute;

            top:0;

            left:0;

            width: 100%;

            height:100%;

            clip: rect(0 ,200px,400px,0);

        }

        .right-wrap {

            position: absolute;

            top:0;

            left:0;

            width: 100%;

            height:100%;

            clip: rect(0 ,400px,400px,200px);

        }

    </style>

</head>

<body>

    <div class="clip-wrap">

        <div class="left-wrap">

            <div class="left"></div>

        </div>

        <div class="right-wrap">

            <div class="right"></div>

        </div>

        <div class="mask">

            <span class="num">0</span>%

        </div>

    </div>

    <button>0%</button>

    <button>10%</button>

    <button>30%</button>

    <button>50%</button>

    <button>80%</button>

    <button>100%</button>

</body>

<script>

    function changeView(num) {

        var deg = num * 3.6;   // 把360度分成100份

        document.querySelector('.num').textContent = num;

        if(deg<180) {

            document.querySelector('.left').style.webkitTransform = 'rotate('+(0)+'deg)';

            document.querySelector('.right').style.webkitTransform = 'rotate('+deg+'deg)';

        }else {

            document.querySelector('.right').style.webkitTransform = 'rotate('+180+'deg)';

            document.querySelector('.left').style.webkitTransform = 'rotate('+(deg-180)+'deg)';

        }

    }

    var btn = document.querySelectorAll('button');

    for(var i = 0,len = btn.length; i< len; i++) {

        (function(i) {

            btn[i].onclick = function() {

                var num = parseInt(this.textContent);

                changeView(num);

            }

        })(i)

    }

</script>

</html>

圆环进度css的更多相关文章

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

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

  2. canvas圆环进度

    CSS: <div class="circle"> <p><span id="loadedNum">0</span&g ...

  3. Vue/React圆环进度条

    数据展示,一直是各行各业乐此不疲的需求,具体到前端开发行业,则是各种各种图表数据展示,各种表格数据展示,烦不胜烦(繁不胜繁)! 前几天刚做了折线图.柱状图.饼状图之类的图表数据展示效果,今天又碰到了类 ...

  4. svg实现圆环进度条

    开源实现:https://github.com/lugolabs/circles 自行实现:圆环与svg画布间剩的空间太多. <!DOCTYPE html> <html> &l ...

  5. css3 制作圆环进度条

    引子 移动端做一个 loadiing 加载的图标,跟以往沿用的都不太一样,是一个圆环进度条,圆环进度条也就罢了,还得能用百分比控制. CSS3 实现圆环 demo 刚开始写这个圆环的时候是参照帖子上给 ...

  6. CSS3实现圆环进度条

    摘要:圆环进度条被应用于各个场景,比如我们可以用来表示加载进度等.通常我们可以用 css3 的动画去实现. 详解 css3 实现圆环进度条 简单的画一个圆环,我们都知道如何使用 css 画一个圆环.( ...

  7. canvas绘制百分比圆环进度条

    开发项目,PM会跟踪项目进度:完成某个事情,也可以设置一个完成的进度. 这里用canvas绘制一个简单百分比圆环进度条. 看下效果: 1. 动画方式   2. 静默方式   // 贴上代码,仅供参考 ...

  8. android 圆环进度view

    新建RoundProgressBar class RoundProgressBar : View { private val paint = Paint() var max = 100 //最大进度 ...

  9. 浅谈一下关于使用css3来制作圆环进度条

    最近PC端项目要做一个这样的页面出来,其他的都很简单,关键在于百分比的圆环效果.我最初打算是直接使用canvas来实现的,因为canvas实现一个圆是很简便的. 下面贴出canvas实现圆环的代码,有 ...

随机推荐

  1. Android 4学习（1）：学习路线图

    学习路线图 如下图所示,整个Android的架构可以分为四层,五个部分.我给自己制定的学习路线图是这样的: 对于有java基础的入门级android开发者而言,首先要学会使用Application F ...

  2. 01-19asp.net网站--关于“应用程序中的服务器错误（需添加"Jquery"ScriptRescourseMapping）”

    一般打开网页进行加载时(有缓存),会弹出以下对话框. 但是如果网页加载后出现以下错误,就是应用程序的问题了.如果出现这种问题,就需要在安装Csharp的根目录下,找到一个名为.dll结尾的Jquery ...

  3. python获得当前工作目录和修改

    import os  curDir = os.getcwd() 最近使用Python 写了很多脚本,想导入脚本,发现不知道如何查看python 的默认工作目录,并修改默认工作目录. 方法/步骤   查 ...

  4. DAY11-MYSQL单表查询

    一 单表查询的语法 SELECT 字段1,字段2... FROM 表名 WHERE 条件 GROUP BY field HAVING 筛选 ORDER BY field LIMIT 限制条数 二 关键 ...

  5. intellij idea打包springboot项目

    一.可执行jar包 注意点: maven的package类型需要为jar 配置了spring-boot-mavne-plugin插件 1.1.pom.xml <?xml version=&quo ...

  6. 0016_练习题d2

    __author__ = 'qq593' #!/usr/bin/env python #-*- coding:utf-8 -*- #元素分类,有如下值集合[11,22,33,44,55,66,77,8 ...

  7. day35-hibernate映射 05-Hibernate的一级缓存：快照区

    SessionImpl里面有很多的Java集合,很多java集合才构成了一级缓存.一级缓存里面有一个非常特殊的区域叫做快照区.SessionImpl实现了Session接口,有很多Java集合(包括M ...

  8. Spring_02 注入类型值、利用引用注入类型值、spring表达式、与类相关的注解、与依赖注入相关的注解、注解扫描

    注意:注入基本类型值在本质上就是依赖注入,而且是利用的set方式进行的依赖注入 1 注入基本类型的值 <property name="基本类型的成员变量名" value=&q ...

  9. ubuntu16.04 安装opencv3.4

    1.去官网下载opencv,在本教程中选用的时opencv3.4.1,其他版本的配置方法异曲同工. 下载链接http://opencv.org/releases.html,选择sources版本 2. ...

  10. ROS Learning-005 beginner_Tutorials 创建ROS程序包（就是软件包）

    ROS Indigo beginner_Tutorials-04 创建ROS程序包(就是软件包) 我使用的虚拟机软件:VMware Workstation 11 使用的Ubuntu系统:Ubuntu ...