纯css3实现圆环占比图

最新推荐文章于 2023-06-28 11:26:21 发布

qdmoment

最新推荐文章于 2023-06-28 11:26:21 发布

阅读量3.9k

点赞数 2

分类专栏： css

本文链接：https://blog.csdn.net/qdmoment/article/details/89186149

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

圆环占比图可以用canvas实现，可以用svg实现，这里使用css3实现，兼容ie10以上，实现原理

盒模型层叠，css3选装，超出隐藏

实现步骤：

创建5个盒模型(这里使用伪类)

1，.left div 左侧圆环底部背景div

2，.left:after 左侧圆环显示div

3，.right div 右侧圆环底部背景div

4，.right:after 右侧圆环显示div

5，.progress 中间覆盖div，在这里显示文案比如30%

最终实现代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.loading {
    margin: 100px auto;
    width: 8em;
    height: 8em;
    position: relative;
}
 
.loading .progress {
    position: absolute;
    width: 6em;
    height: 6em;
    background-color: white;
    border-radius: 50%;
    left: 1em;
    top: 1em;
    line-height: 6em;
    text-align: center;
}
 
.left,
.right {
    width: 4em;
    height: 8em;
    overflow: hidden;
    position: relative;
    float: left;
    background-color: blue
}
 
.left {
    border-radius: 8em 0 0 8em;
	
}
 
.right {
    border-radius: 0 8em 8em 0;
	
}
 
.left:after
{
    content: "";
    position: absolute;
    display: block;
    width: 4em;
    height: 8em;
    border-radius: 8em 0 0 8em;
    background-color: red;
	
}
 
.right:after {
    content: "";
    position: absolute;
    display: block;
	width: 4em;
    height: 8em;
    border-radius: 0 8em 8em 0;
	background-color: red;
	
}
.left:after {
    transform-origin: right center;
	transform: rotateZ(-144deg);
}
 
.right:after {
    transform-origin: left center;
    transform: rotateZ(0deg);
}

</style>
</head>
<body>

<div class="loading">
    <div class="left"></div>
    <div class="right"></div>
    <div class="progress">60%</div>
</div>

</body>
</html>

实现效果