css3百分比圆环怎么画

Posted 2023-04-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3百分比圆环怎么画相关的知识，希望对你有一定的参考价值。

参考技术A

把代码复制到html文件里运行到浏览器上查看一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title></title>
</head>

<style>
    .adaptive-circle
        margin: 50px auto 0;
        width: 80%;
        height: 0;
        padding-top: 80%;

        border-radius: 100%;
        border: 1px solid #000;
        box-sizing: border-box;

        position: relative;

    .adaptive-circle .layout
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        text-align: center;

    .adaptive-circle .layout.middle:before
        display: inline-block;
        vertical-align: middle;

        content: '';
        height: 100%;
        width: 0;
        overflow: hidden;

    .adaptive-circle .layout.middle div:first-child
        display: inline-block;
        vertical-align: middle;

</style>

<body>
    <div class="adaptive-circle">
        <div class="layout middle">
            <div>
                <h2>自适应标题</h2>
                <p>自适应介绍</p>
            </div>
        </div>
    </div>
</body>
</html>

浏览器下不同尺寸变化大小：

参考技术B 暂时只能用边框做一个空心圆，再加个border-radius：50%圆角；而且也有限制，只能化4份

svg画圆环

之前我已经分享了一篇css画圆环，为啥今天还要分享一篇svg画圆环呢?

原因是：css画圆环在部分ipone手机会有bug，最大张角为90°，所以圆环会有白色的间隙。

好了，开始代码展示：

html：

 <svg class="c-c-c">
　　　　　<!-- score为百分比值 -->
　　　　　<!-- color为圆环的色值 -->　
        <circle cx="48" cy="48" r="40" stroke="#eee" stroke-width="15" fill="none" stroke-dashoffset="<%=80*Math.PI%>px"/>
        <circle cx="48" cy="48" r="40" stroke="<%=color%>"
        stroke-width="15" fill="none" stroke-dasharray="<%=score*8*Math.PI%>px, <%=80*Math.PI%>px" class="blue-circle"/>
                                                        <!-- 此处前面值为圆环占的值，后面值为圆环总长度 -->

        <text x="40" y="56" fill="<%=color%>" font-size="25"><%=score %></text>
 </svg>

css：

.c-c-c {
  display: block;
  position: relative;
  margin: 0 auto;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blue-circle{
    transform: rotateZ(-90deg);
    transform-origin: 50% 50%;
}

ok，这样就完成了，是不是很棒，如果需要js改变动画还可以增加以下样式

transition: stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease 0s;

效果图如下：

技术图片

以上是关于css3百分比圆环怎么画的主要内容，如果未能解决你的问题，请参考以下文章