使用CSS制作动态的环形图/饼图
warning:
这篇文章距离上次修改已过447天，其中的内容可能已经有所变动。
使用CSS创建动态的环形图或者饼图，可以通过使用@keyframes规则来定义动画，并使用CSS的transform属性进行旋转来显示数据。以下是一个简单的环形图示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 动态环形图</title>
<style>
.circle-wrapper {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
}
.circle {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
clip-path: inset(0 50% 0 0);
animation: rotate 4s linear infinite;
}
.circle-bg {
fill: #eee;
}
.circle-fg {
fill: #3498db;
clip-path: inset(0 100% 0 0);
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="circle-wrapper">
<svg class="circle" viewBox="0 0 200 200">
<circle class="circle-bg" cx="100" cy="100" r="90" />
<circle class="circle-fg" cx="100" cy="100" r="90" />
</svg>
</div>
</body>
</html>在这个例子中，.circle-wrapper 创建了一个圆形容器，.circle 是一个SVG元素，通过clip-path属性来控制显示的部分，@keyframes rotate定义了一个旋转动画，使得.circle旋转显示不同的部分，从而形成动态的环形图。这个示例是一个简单的动态环形图，可以根据需要添加更多的数据和复杂性。
评论已关闭