5/6的圆环效果如下
原理是左右两边分开制作，左右两边各有两层盒子，外层负责遮挡溢出的部分，里层旋转表示百分比
下面代码见，改变count和totalcount就可以画出你想要的百分比圆环
<!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>Document</title><style>.left,.right {width: 100px;height: 200px;background: yellow;overflow: hidden;}.row {display: flex;flex-direction: row;}.left {border-radius: 100px 0 0 100px;}.right {border-radius: 0 100px 100px 0;}.rightCon {width: 100px;height: 200px;background: red;border-radius: 0 100px 100px 0;transform: rotate(-120deg);transform-origin: left center;}.leftCon {width: 100px;height: 200px;background: red;border-radius: 100px 0px 0px 100px;transform: rotate(20deg);transform-origin: right center;}.circle {width: 180px;height: 180px;position: absolute;left: 10px;top: 10px;border-radius: 90px;background: green;}.rel {position: relative;}</style>
</head><body><div class="row rel"><div class="left"><div id="left" class="leftCon"></div></div><div class="right"><div id="right" class="rightCon"></div></div><div class="circle"></div></div>
</body></html>
<script>function getLeftPercent(count, totalcount) {if (totalcount == 0 || count == 0 || count / totalcount <= 0.5) {return -180;} else {return 180 * (((count / totalcount - 0.5) * 2) - 1);}}function getRightPercent(count, totalcount) {if (totalcount == 0 || count == 0) {return -180;} else if (count / totalcount >= 0.5) {return 0;} else {// -(180 - 180 * (percent*2))return 180 * (((count / totalcount) * 2) - 1);}}var left = ElementById('left');var right = ElementById('right');var count = 5;var totalcount = 6;ansform = "rotate(" + getLeftPercent(count, totalcount) + "deg)";ansform = "rotate(" + getRightPercent(count, totalcount) + "deg)";</script>github地址：.git
本文发布于:2024-02-02 20:07:17，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170687563546139.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
