看效果先：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. How to Enabling and Diabling VxDMP devices for use with Oracle ASM

    Enable DMP support for ASM to make DMP devices visible to ASM as available disks To make DMP devices ...

  2. 类型：。net；问题：HQL；结果：HQL: Hibernate查询语言

    HQL: Hibernate查询语言 Hibernate配备了一种非常强大的查询语言,这种语言看上去很像SQL.但是不要被语法结构 上的相似所迷惑,HQL是非常有意识的被设计为完全面向对象的查询,它可 ...

  3. 嵌入式Linux启动优化手记2&nbsp;U…

    参考一下 原文地址:U-boot优化">嵌入式Linux启动优化手记2 U-boot优化作者:ZhaoJunling 既然不能使用新的U-boot,那就优化一点是一点,慢慢干吧. 1. ...

  4. Android 数据库 OrmLite Failed to open database

    04-01 16:49:32.720: E/SQLiteLog(1894): (14) cannot open file at line 30204 of [00bb9c9ce4]04-01 16:4 ...

  5. android手机分辨率的一些说明

    Android上常见度量单位 px(像素):屏幕上的点,绝对长度,与硬件相关 in(英寸):长度单位 mm(毫米):长度单位 pt(磅):1/72英寸,point dp(与密度无关的像素):一种基于屏 ...

  6. day35 02-Hibernate持久化对象状态及状态转换

    hibernate内置有一个c3p0,不用引入c3p0的jar包也行. 现在其实可以不用去创建表和实体类.因为hibernate可以自动帮我们生成.只要把映射建好了它就可以自动帮我们生成. 创建实体类 ...

  7. 洛谷P2146 树链剖分

    题意 思路:直接树链剖分,用线段树维护即可,算是树剖的经典题目吧. 代码: #include <bits/stdc++.h> #define ls(x) (x << 1) #d ...

  8. idea 修改Recent projects

    idea用了一段时间了,打开的项目多了,导致Open Recent列表中的项目也非常多,在找一个项目时很不方便. 后来查询,在~/Library/Preferences/IntelliJIdea目录/ ...

  9. STM32数据类型定义

    #ifndef __STM32F10x_TYPE_H #define __STM32F10x_TYPE_H typedef signed long s32; typedef signed short ...

  10. PCL—关键点检测（rangeImage）低层次点云处理

    博客转载自:http://www.cnblogs.com/ironstark/p/5046479.html 关键点又称为感兴趣的点,是低层次视觉通往高层次视觉的捷径,抑或是高层次感知对低层次处理手段的 ...