如何用 CSS 制作动画圆环图形图标

我就是我 2022-08-29 11:57 176阅读 0赞

![b822d62ac6bac2fd8bf22f8aed55f97f.png][]

英文 | https://medium.com/weekly-webtips/how-to-make-a-doughnut-chart-icon-with-css-72924fbeef47

翻译 | 杨小二

CSS 边框一直以来被认为是一种特殊属性，可以创造性地使用它来创建各种 UI 元素，除了边框——比如笔画、V 形或箭头。

在本文中，我们将看看如何使用它来创建一个有边框的动画圆环图图标，它的最终效果如下所示：

![9738eed91df51359ee6d12efb5bba961.png][]

**用 CSS 边框创建甜甜圈**

首先，让我们创建一个只有一种颜色的甜甜圈。为此，我设置了以下规则，在屏幕中创建一个带有红色边框的 50x50px 黑色矩形。

.doughnut {
    background: #000;
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 10px solid red;
    }

![a9e4db06e0b7f15d1d8cff46b57150c6.png][]

然而，正如你所看到的，这看起来并不像一个甜甜圈。为了解决这个问题，并创建一个笔触，添加一个具有透明背景的 100% 边框半径：

.doughnut {
        ...
        border-radius: 100%;
    }

![09b294fc273f282955e6aa57706e165a.png][]

**将段添加到甜甜圈**

要添加不同的段，你可以使用单独的规则更改边框每一侧的颜色：

.doughnut {
        ...
        border: 10px solid #FF6188;
        border-top: 10px solid #A9DC62;
        border-left: 10px solid #78DCDC;
        border-right: 10px solid #FFD862;
    }

![96bb6f045814ca98403154b05abd55e7.png][]

**玩转段和旋转**

为了使效果漂亮，你还可以添加一点旋转动画。通过添加一点动画，你还可以将其变成圆形加载指示器：

@keyframes loading {
        0%   { transform: translate(-50%, -50%) rotate(25deg);  }
        100% { transform: translate(-50%, -50%) rotate(385deg); }
    }
    .doughnut {
    transform: translate(-50%, -50%) rotate(25deg);
    /* Add animation if you want to turn it into a loading indicator */
    animation: loading 1s ease-in-out infinite;
    }

效果如下：

![8d118eb1ff1b7e5be61697c353d49dc6.gif][]

你还可以通过简单地将相邻边框设为相同颜色来创建更大的段：

.doughnut-01 {
    /* default values */
    }
    .doughnut-02 {
    border-left: 10px solid #78DCDC;
    border-bottom: 10px solid #78DCDC;
    }
    .doughnut-03 {
    border-left: 10px solid #FF6188;
    border-right: 10px solid #FF6188;
    }

效果如下：

![7ea590bb84adfb53e8f5b8b06e722b9e.png][]

**使用不同的边框样式**

你还可以使用 border-style 属性来创建不同风格的甜甜圈。 一些例子是：

.doughnut-01 { border-style: dotted; }
    .doughnut-02 { border-style: double; }
    .doughnut-03 { border-style: groove; }
    .doughnut-04 { border-style: ridge; }

效果如下：

![9b5095b66f8b5b4844395b240b03de17.png][]

**把所有东西放在一起**

最后，你还可以使用框阴影为其添加额外的边框。 你可以根据需要添加任意数量的 box-shadow，你只需要用逗号分隔不同的值。

.doughnut {
    box-shadow: inset 0 0 10px 0px #21212191, 0 0 0 2px #212121;
    }

将所有内容放在一起，这是构成元素的最后一组规则：

.doughnut {
    display: block;
    border-radius: 100%;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(25deg);
    border: 10px solid #FF6188;
    border-top: 10px solid #A9DC62;
    border-left: 10px solid #78DCDC;
    border-right: 10px solid #FFD862;
    box-shadow: inset 0 0 10px 0px #21212191, 0 0 0 2px #212121;
    }

![390c4b55f57f8b381e678e0b070756f9.png][]

**总结**

总之，CSS 边框可以以各种创造性的方式使用。 如你所见，即使你已经用完给定元素的边框属性，你仍然可以使用 box-shadow 在其上添加额外的边框。

为了使这个图标更加可定制，它也可以替换为 SVG 路径。

你是否已经以创造性的方式使用过 CSS 边框？ 请在留言区中告诉我！ 感谢你的阅读，快乐编程！

#  #

**学习更多技能**

**请点击下方公众号**

![711e54c602832c52ba3fbba4114054e7.gif][]

![f7864b31e2c1c52eca590ef5ab48cb30.png][]

![7bb573200d396cae9f8d943f8c8812d4.png][]

[b822d62ac6bac2fd8bf22f8aed55f97f.png]: /images/20220829/fcaf3f1dc6214e2cbdd47c1c8f0df71e.png
[9738eed91df51359ee6d12efb5bba961.png]: /images/20220829/833e6af377e94c6bb89cd4326ad2bf6e.png
[a9e4db06e0b7f15d1d8cff46b57150c6.png]: /images/20220829/39a83c280d6f447280a49cd5e993c3fd.png
[09b294fc273f282955e6aa57706e165a.png]: /images/20220829/4e99ae2e34924c0f83decc3507fb308b.png
[96bb6f045814ca98403154b05abd55e7.png]: /images/20220829/f8a0a0bd097e485ea70b8be64c0719f8.png
[8d118eb1ff1b7e5be61697c353d49dc6.gif]: /images/20220829/e9b884ea56cf4caba7478885b0f0ee0d.png
[7ea590bb84adfb53e8f5b8b06e722b9e.png]: /images/20220829/e46d56a0e0ff4bef82a9c7faae37056c.png
[9b5095b66f8b5b4844395b240b03de17.png]: /images/20220829/4f015702064e4b37940c0ec980e5b8dc.png
[390c4b55f57f8b381e678e0b070756f9.png]: /images/20220829/9649304f4db2484ab5c47cf7b4d6966f.png
[711e54c602832c52ba3fbba4114054e7.gif]: /images/20220829/8e68b78dc9d04b0aa66e8500d01582b1.png
[f7864b31e2c1c52eca590ef5ab48cb30.png]: /images/20220829/58fba0fdbe3c4b0c91284e125f364c4b.png
[7bb573200d396cae9f8d943f8c8812d4.png]: /images/20220829/a9435557830f4a24889868bd3016a0cd.png