通过css3组装成透明的圆环,可以用于展示百分比进度等,效果如下
圆环除了环的颜色外,其它全为透明transparent,天蓝色为html背景色。
思路大致如下:
圆环整体块包裹,里面有中间的比值显示块,还有左右两侧的进度块
左右两侧的进度块分三层:
第一层用于定位环的位置(此处遮挡超出部分,overflow:hidden)
第二层用于环的角度旋转(此处也要遮挡超出,同上,另外左右侧的旋转中心需要设置)
第三层则是纯粹的完全圆环(使用mask实现中间透明,边缘有颜色);
通过调整第二层的旋转角度,与第一层交叉,重叠部分显示出第三层未被遮挡的圆环。左右两侧组合以呈现最大100%的比重。
以上是以顶部中间点为起始,顺时针计算比值的方式,如果要使用其它定点和比值计算方向,自行参考调整即可
以下是完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
body {
background-color: #6cf;
}
/* //最外面的一个div */
.annulusBasics {
left: 50%;
top: 300px;
width: 94px;
height: 94px;
position: relative;
/* overflow: hidden; */
border-radius: 50%;
text-align: center;
z-index: 1;
}
/* //圆环中间比值块,目前透明背景,可以自行调整 */
.centerCircle {
position: absolute;
left: 12px,
top: 12px,
z-index: 10;
border-radius: 50%;
width: 71px;
height: 71px;
background: transparent;
line-height: 71px;
}
/* //左边长方形的位置框 */
.leftRectangle {
position: absolute;
background: transparent;
width: 50%;
height: 100%;
overflow: hidden;
}
/* 左侧进度调整块 */
.leftRectangle>div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: transparent;
overflow: hidden;
transform-origin: right;
transform:rotate(-180deg); /* 默认进度0 */
}
/* 实际颜色块,中间透明,边缘为环色 */
.leftRectangle>div>div {
position: absolute;
left: 0;
width: 200%;
height: 100%;
mask: radial-gradient(transparent 35px, #000000 0px);
-webkit-mask: radial-gradient(transparent 35px, #000000 0px);
background-color: #FF7F69;
border-radius: 50%;
}
/* //右边长方形 */
.rightRectangle {
position: absolute;
background: transparent;
left: 47px;
width: 47px;
height: 94px;
overflow: hidden;
}
.rightRectangle>div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: transparent;
overflow: hidden;
transform-origin: left;
transform:rotate(-180deg); /* 默认进度0 */
}
.rightRectangle>div>div {
position: absolute;
left: -100%;
width: 200%;
height: 100%;
mask: radial-gradient(transparent 35px, #000000 0px);
-webkit-mask: radial-gradient(transparent 35px, #000000 0px);
background-color: #FF7F69;
border-radius: 50%;
}
</style>
</head>
<body>
<section class="container" id="container">
<div class="annulusBasics">
<div class="centerCircle">75%</div>
<div class="leftRectangle">
<div style="transform:rotate(-90deg)">
<div></div>
</div>
</div>
<div class="rightRectangle" >
<div style="transform: rotate(0deg);">
<div></div>
</div>
</div>
</div>
</section>
<script src="./js/jquery.min.js"></script>
<script>
</script>
</body>
</html>