css环形图制作

使用CSS制作环形图

CSS环形图可以通过多种方法实现，包括使用border-radius、conic-gradient以及SVG等技术。以下是几种常见的方法：

使用border-radius和伪元素

通过创建一个圆形元素，并利用伪元素和border属性实现环形效果：

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: relative;
    background: #f0f0f0;
}

.circle::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    background: white;
}

使用conic-gradient

conic-gradient可以创建环形进度条效果，通过定义角度和颜色实现：

.ring {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(red 0% 30%, blue 30% 70%, green 70% 100%);
}

使用SVG

SVG提供更灵活的控制，适合复杂环形图需求：

<svg width="100" height="100" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="none" stroke="#f0f0f0" stroke-width="10"/>
    <circle cx="50" cy="50" r="40" fill="none" stroke="red" stroke-width="10" stroke-dasharray="80 120" stroke-dashoffset="0"/>
</svg>

动画效果

为环形图添加动画效果可以通过CSS的@keyframes实现：

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animated-ring {
    animation: rotate 2s linear infinite;
}

响应式设计

确保环形图在不同设备上显示一致，可以使用vw或vh单位：

.responsive-ring {
    width: 20vw;
    height: 20vw;
}

这些方法可以根据需求灵活组合，实现不同风格的环形图效果。