gpt4 book ai didi

CSS3 简单圆环图

转载 作者:技术小花猫 更新时间:2023-10-29 10:19:25 24 4
gpt4 key购买 nike

我想做的是创建一个简单的圆环图。我目前只使用 CSS(3),但我不知道如果没有 javascript 是否可行。

我目前拥有的: http://jsfiddle.net/aBP5Q/

HTML:

<div class="donut-container" style="background: #9C0;">
<div class="donut-inner">
<div class="donut-label">HTML</div>
</div>
</div>

CSS:

.donut-container {
width: 150px;
height: 150px;
float: left;
-webkit-border-radius: 75px;
-moz-border-radius: 75px;
border-radius: 75px;
margin-right: 20px;
}

.donut-inner {
width: 134px;
height: 134px;
position: relative;
top: 8px;
left: 8px;
background: #FFF;
-webkit-border-radius: 65px;
-moz-border-radius: 65px;
border-radius: 65px;
}

.donut-label {
line-height: 130px;
text-align: center;
font-size: 20px;
}

我想显示绿色和蓝色作为百分比。所以没有绿色是 0%,全绿色(360 度)是 100%。如果可能的话,甚至可以在加载图表时使用简单的动画。

非常感谢您的帮助。

最佳答案

SVG 获胜!

.item {
position: relative;
float: left;
}

.item h2 {
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
}

svg {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}

.circle_animation {
stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
stroke-dashoffset: 440;
}

.html .circle_animation {
-webkit-animation: html 1s ease-out forwards;
animation: html 1s ease-out forwards;
}

.css .circle_animation {
-webkit-animation: css 1s ease-out forwards;
animation: css 1s ease-out forwards;
}

@-webkit-keyframes html {
to {
stroke-dashoffset: 80; /* 50% would be 220 (half the initial value specified above) */
}
}

@keyframes html {
to {
stroke-dashoffset: 80;
}
}

@-webkit-keyframes css {
to {
stroke-dashoffset: 160;
}
}

@keyframes css {
to {
stroke-dashoffset: 160;
}
}
<div class="item html">
<h2>HTML</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
</g>
</svg>
</div>

<div class="item css">
<h2>CSS</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#69aff4" fill="none"/>
</g>
</svg>
</div>

JSFiddle version


这是评论中要求的带有背景圆圈的版本:

.item {
position: relative;
float: left;
}

.item h2 {
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
}

svg {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}

.circle_animation {
stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
stroke-dashoffset: 440;
}

.html .circle_animation {
-webkit-animation: html 1s ease-out forwards;
animation: html 1s ease-out forwards;
}

.css .circle_animation {
-webkit-animation: css 1s ease-out forwards;
animation: css 1s ease-out forwards;
}

@-webkit-keyframes html {
to {
stroke-dashoffset: 80; /* 50% would be 220 (half the initial value specified above) */
}
}

@keyframes html {
to {
stroke-dashoffset: 80;
}
}

@-webkit-keyframes css {
to {
stroke-dashoffset: 160;
}
}

@keyframes css {
to {
stroke-dashoffset: 160;
}
}
<div class="item html">
<h2>HTML</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#f2f2f2" fill="none"/>
<circle class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
</g>
</svg>
</div>

<div class="item css">
<h2>CSS</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#f2f2f2" fill="none"/>
<circle class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#69aff4" fill="none"/>
</g>
</svg>
</div>


它是如何工作的?

stroke-dasharray 用于定义虚线使用的“模式”( MDN )。通过提供单个值,您可以创建一个 440 像素的破折号和 440 像素的空格的图案。 (440px 大致是圆的周长)。

stroke-dashoffset 有效地移动了破折号图案 (MDN) 的起点。

dash-offset 为 220(stroke-dasharray 的一半)会产生一个半圆。 110 = 四分之一圆等

关于CSS3 简单圆环图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20525820/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com