css环形进度条clip,clip实现圆环进度条
效果图
怎么实现这样一个圆环进度条的效果呢,可以使用canvas、svg、GIF等等方式,今天我们来说下使用css3怎么来实现。
实现思路
圆环很简单,一行cssborder-radius:50%即可实现,而且没有兼容性问题,什么,你说IE,让它滚...
我们这里需要三个圆环,一个整的,两个半的。大概画了下图
这里半圆环我使用了clip进行裁剪,主要代码如下,
.left{
width: 200px;
height: 200px;
border-radius: 50%;
border: 10px solid lightblue;
position:absolute;
top: -10px; /* 10的原因是因为边框是10个像素 */
right: -10px;
clip: rect(0 100px 200px 0); /* 上面为0 右边到100px
下面200px 左边到0 这个区域的我们裁剪出来 */
}
右边类似只是裁剪位置改了
.right{
width: 200px;
height: 200px;
border-radius: 50%;
border: 10px solid lightblue;
position:absolute;
top: -10px; /* 10的原因是因为边框是10个像素 */
right: -10px;
clip: rect(0 200px 200px 100px); /* 位置更改,计算可以参考上图 */
}
完整代码
Document
div{
box-sizing: border-box;
}
.box{
width: 200px;
height: 200px;
position: relative;
background-color: #ccc;
border-radius: 50%;
left: 40%;
top: 200px;
}
.num{
position: absolute;
top: 50%;
left: 50%;
background: #fff;
border-radius: 50%;
width: 180px;
height: 180px;
transform: translate(-50%, -50%);
text-align: center;
line-height: 180px;
font-size: 32px;
}
.clip{
width: 200px;
height: 200px;
position: absolute;
border: 10px solid #ccc;
border-radius: 50%;
clip: rect(0, 200px, 200px, 100px);
}
.left{
width: 200px;
height: 200px;
position: absolute;
border: 10px solid lightblue;
border-radius: 50%;
clip: rect(0 100px 200px 0);
top: -10px;
left: -10px;
}
.right{
width: 200px;
height: 200px;
position: absolute;
border: 10px solid lightblue;
border-radius: 50%;
clip: rect(0 200px 200px 100px);
top: -10px;
left: -10px;
}
.width-none{
width: 0;
}
.auto{
clip: auto;
}
let clip = document.querySelector('.clip'),
left = document.querySelector('.left'),
right = document.querySelector('.right'),
num = document.querySelector('.num'),
rotate = 0;
let loop = setInterval(() => {
if(rotate >= 100){
rotate = 0;
right.classList.add('width-none');
clip.classList.remove('auto');
} else if(rotate > 50){
right.classList.remove('width-none');
clip.classList.add('auto');
}
rotate++;
left.style.transform = 'rotate('+ 3.6*rotate + 'deg)';
num.innerHTML = `${rotate}%`
},100)
简单说下上面的代码
1、首先隐藏了右半圆,这是因为我们需要旋转的是左半圆,我们可以等左半圆转到右边圆的位置再显示右 边,就是等到旋转到180度的时候。
2、同时我们看到主圆添加了clip: rect(0, 200px, 200px, 100px);裁剪样式,这是因为默认我们 进度是0%的,我们只显示右边的话才能隐藏左边,但是我们右边不是隐藏的吗?那显示它干嘛呢,因为 旋转左边的时候就看到转到右边的圆了。稍微有点绕,请结合代码,多多理解
3、等到左边旋转了180我们需要将右边显示出来,并且将box元素的裁剪设置为默认值,就是不裁剪,这 这样才能显示完整的左右两个圆。
4、最后我们使用js来控制旋转角度并将百分比显示在页面上
写在最后
如果上面的解释看不明白,索性就不要看了,把代码放在本地调试下,自己去理解。
别钻牛角尖,代码是最好的语言。
使用clip才实现圆环进度还是很简单的,还不需要考虑兼容性,关于clip可以看[张鑫旭大神的日志]
css环形进度条clip,clip实现圆环进度条相关推荐
- CSS 奇技淫巧Box-shadow实现圆环进度条
CSS 奇技淫巧Box-shadow实现圆环进度条 文章目录 CSS 奇技淫巧Box-shadow实现圆环进度条 一.Box-shadow圆环进度条 二.效果预览 三.原理刨析 四.实际应用 五.总结 ...
- android绘制环形进度_Android使用Canvas绘制圆形进度条效果
前言 Android自定义控件经常会用到Canvas绘制2D图形,在优化自己自定义控件技能之前,必须熟练掌握Canvas绘图机制.本文从以下三个方面对Canvas绘图机制进行讲解: 画布Canvas ...
- css圆环进度条的几种方法
方法一: 用H5自带的canvas画圆环 <!DOCTYPE html> <html lang="en"> <head><meta cha ...
- CSS实现圆环进度条
CSS实现圆环进度条 一.静态进度条 首先,我们先看一个静态进度条 第一步当然是先实现一个最外层的父级圆环. 其次是通过 clip-path画出两个半圆,并绝对定位覆盖在父级圆环. 小于50的时候,我 ...
- css 实现圆环进度条
先上图,最后的效果是这样 主要的思路是 使用锥形渐变给div一个背景,然后使用mask遮挡中间部分,这样就变成一个圆环了,最后用 before和after处理一下 圆环进度开始和结束位置. html ...
- 两种CSS3圆环进度条详解
晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...
- vue 做圆环进度条
昨天公司要做一个类似于这样的效果: 上面是昨天已经做出来的效果图,感觉还不错.本来准备用canvas来做,但是有页面上有很多圆环,造成了很多canvas同时存在的时候页面卡顿,所以用的css来做的. ...
- Unity圆环进度条制作
0. 背景 最近有个在Unity中制作圆环进度条的需求,并在圆中显示进度数值,类似于图1: 图1. 圆环进度条 平时制作直线的进度条比较多,突然要求做个圆环的有些不适应.不过,这个需求google一下 ...
- vue圆环进度条_Vue/React圆环进度条
数据展示,一直是各行各业乐此不疲的需求,具体到前端开发行业,则是各种各种图表数据展示,各种表格数据展示,烦不胜烦(繁不胜繁)! 前几天刚做了折线图.柱状图.饼状图之类的图表数据展示效果,今天又碰到了类 ...
- Swift 圆环进度条
Swift 圆环进度条 import UICircularProgressRing import UIKit import UICircularProgressRing class ViewContr ...
最新文章
- 如何为linux服务器配置DNS解析?
- box-shadow实现曲线投影效果
- Python函数的递归调用
- (二)python3 只需3小时带你轻松入门——基本变量
- JavaFX触屏事件
- 面向对象设计思想-C语言
- 超松弛迭代法(C语言实现)
- ppt复制切片器_【PPT】高端人物活动介绍页PPT创意设计制作
- 如何在SQL Server中自动进行表分区
- js页面跳转与url获取
- stm32定时器引脚分布,定时器2~7、9~14基本配置
- InstallShield Slient Uninstall
- mac android studio Waiting for application to come online解决方案
- 芒果不能用百度了,怎么办?
- L1-051 打折 (5 分) pta天梯赛 详解
- 迅雷9远程服务器,迅雷9【搞定方式】
- JavaScript基础学习——第五天(原型、垃圾回收、数组简介)
- php kestrel,转载 kestrel php 讯息队列
- MySQL SHOW INDEX 的语法解析
- 使用anaconda 要用conda 方式更新各个软件,不要用pip
热门文章
- Java如何配置环境变量
- 汇编语言 王爽 第四版 第二章 检测点2.3
- 基于MATLAB的数字滤波器之低通滤波器
- RHEL6.4下一键安装 Redmine
- android 魅族扫码,教你扫码登录王者荣耀,支持魅族OPPO华为小米苹果安卓等手机,超简单...
- 远程控制计算机软件有哪些,支持远程控制电脑的工具有哪些?这几款软件值得一试!...
- 延时队列的几种实现方式(只有原理,并没有源码)
- Python 爬取小程序接口图片
- 计算机网络hdcp是什么意思,为什么显卡面板显示此显示器不支持HDCP是怎么回事...
- 数字时代的必经之路,汽车经销商(4S)行业的信息化特点