有意思的css-饼状图
2019-04-11 本文已影响0人
没_有_人
1、效果图
效果图
我们都知道，元素盒子都是矩形的形状，我们要做到饼状图，其实是不容易的，但是我们可以另辟蹊径，通过css的属性来实现，这里我们主要用到的css属性有 overflow,opacity,transform。
2、代码思路
我们首先只考虑50%以下的，这样方便理解。
//css代码
body{
background-color: #ccc;
}
.box{
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
background-color: #fff;
}
.left,.right{
width: 50%;
height: 100%;
float: left;
position: relative;
overflow: hidden;
}
.right-item{
width: 100%;
height: 100%;
position: absolute;
left: -100%;
background-color: #f00;
transform-origin: right;
transform: rotate(90deg);
}
//html代码
<div class="box">
<div class="left"></div>
<div class="right">
<div class="right-item"></div>
</div>
</div>
效果图
如果只有50%以下的情况，其实很简单,我们把右侧的类名为right-item的元素定位到左侧这样子就看不到了，因为父级元素设置了overflow:hidden然后他沿着自己右侧的中心旋转，就会出现在自己的父级元素里面，这样子，我们就能看到效果了。
考虑到50%-100%的情况
首先我们来看一下如果上述代码超过了50%出现什么情况
效果图
如图所示：我们发现缺了一部分，因为元素旋转出去，父级元素超出隐藏了。
这时候我们有一个思路，超过180度的时候，右侧是全部被颜色填充的，那我们直接放进去一个元素就是了。至于左侧的颜色填充和上面的思路一样，我们把左侧元素的子级元素定位到右侧，然后通过旋转来展示。
/*css代码*/
body{
background-color: #ccc;
}
.box{
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
background-color: #fff;
}
.left,.right{
width: 50%;
height: 100%;
float: left;
position: relative;
overflow: hidden;
}
.right-item{
width: 100%;
height: 100%;
position: absolute;
left: -100%;
background-color: teal;
transform-origin: right;
transform: rotate(270deg);
}
.right-color{
width: 100%;
height: 100%;
position: absolute;
background-color: teal;
}
.left-item{
width: 100%;
height: 100%;
position: absolute;
left: 100%;
background-color: teal;
transform-origin: left;
transform: rotate(90deg);
}
//html代码
<div class="box">
<div class="left">
<div class="left-item"></div>
</div>
<div class="right">
<div class="right-item"></div>
<div class="right-color"></div>
</div>
</div>
效果图
这样子我们就实现了50%以上的情况了。
那如果我们拿这个代码来试一试50%一下的情况呢？
效果图
我们会发现多出来一部分，这部分一个是因为右侧多了一个带背景的子级元素，一个是左侧的子级元素因为旋转，出现在自己的父级的范围内。
那么说我们有没有能实现0-100情况的方法呢，当然是有的了。我们可以通过控制元素的opacity来控制多出去的部分。
那我们给类名为right-color和left-item加上opacity:0
效果图
这样就正常了
效果图
上述代码改成50%以上又出现这种情况，那我们有没有办法让它的opacity可变呢？
答案是可以的！我们可以用css变量 var
最终代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>饼状图</title>
<style>
body{
background-color: #ccc;
}
.box{
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
background-color: #fff;
float: left;
margin-right: 20px;
}
.left,.right{
width: 50%;
height: 100%;
float: left;
position: relative;
overflow: hidden;
}
.right-item{
width: 100%;
height: 100%;
position: absolute;
left: -100%;
background-color: teal;
transform-origin: right;
transform: rotate(calc(3.6deg * var(--percent)));
}
.right-color{
width: 100%;
height: 100%;
position: absolute;
background-color: teal;
opacity: calc(999999*(var(--percent) - 50));
}
.left-item{
width: 100%;
height: 100%;
position: absolute;
left: 100%;
background-color: teal;
transform-origin: left;
transform: rotate(calc(3.6deg * (var(--percent) - 50)));
opacity: calc(999999*(var(--percent) - 50));
}
</style>
</head>
<body>
<div class="box" style="--percent:10">
<div class="left">
<div class="left-item"></div>
</div>
<div class="right">
<div class="right-item"></div>
<div class="right-color"></div>
</div>
</div>
<div class="box" style="--percent:30">
<div class="left">
<div class="left-item"></div>
</div>
<div class="right">
<div class="right-item"></div>
<div class="right-color"></div>
</div>
</div>
<div class="box" style="--percent:60">
<div class="left">
<div class="left-item"></div>
</div>
<div class="right">
<div class="right-item"></div>
<div class="right-color"></div>
</div>
</div>
<div class="box" style="--percent:90">
<div class="left">
<div class="left-item"></div>
</div>
<div class="right">
<div class="right-item"></div>
<div class="right-color"></div>
</div>
</div>
</body>
</html>
这样我们就实现了饼状图的效果了。
参考文章：
https://www.zhangxinxu.com/study/201903/css-idea/animation-pie.php
