如何用 CSS 制作動(dòng)畫(huà)圓環(huán)圖形圖標(biāo)
.doughnut {background: #000;display: block;width: 50px;height: 50px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);border: 10px solid red;}
然而，正如你所看到的，這看起來(lái)并不像一個(gè)甜甜圈。為了解決這個(gè)問(wèn)題，并創(chuàng)建一個(gè)筆觸，添加一個(gè)具有透明背景的 100% 邊框半徑：
.doughnut {...border-radius: 100%;}
將段添加到甜甜圈
要添加不同的段，你可以使用單獨(dú)的規(guī)則更改邊框每一側(cè)的顏色：
.doughnut {...border: 10px solid #FF6188;border-top: 10px solid #A9DC62;border-left: 10px solid #78DCDC;border-right: 10px solid #FFD862;}
玩轉(zhuǎn)段和旋轉(zhuǎn)
為了使效果漂亮，你還可以添加一點(diǎn)旋轉(zhuǎn)動(dòng)畫(huà)。通過(guò)添加一點(diǎn)動(dòng)畫(huà)，你還可以將其變成圓形加載指示器：
@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;}
你還可以通過(guò)簡(jiǎn)單地將相鄰邊框設(shè)為相同顏色來(lái)創(chuàng)建更大的段：
.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;}
使用不同的邊框樣式
你還可以使用 border-style 屬性來(lái)創(chuàng)建不同風(fēng)格的甜甜圈。 一些例子是：
.doughnut-01 { border-style: dotted; }.doughnut-02 { border-style: double; }.doughnut-03 { border-style: groove; }.doughnut-04 { border-style: ridge; }
把所有東西放在一起
最后，你還可以使用框陰影為其添加額外的邊框。 你可以根據(jù)需要添加任意數(shù)量的 box-shadow，你只需要用逗號(hào)分隔不同的值。
.doughnut {box-shadow: inset 0 0 10px 0px #21212191, 0 0 0 2px #212121;}
將所有內(nèi)容放在一起，這是構(gòu)成元素的最后一組規(guī)則：
.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;}
總結(jié)
總之，CSS 邊框可以以各種創(chuàng)造性的方式使用。 如你所見(jiàn)，即使你已經(jīng)用完給定元素的邊框?qū)傩裕闳匀豢梢允褂?box-shadow 在其上添加額外的邊框。
為了使這個(gè)圖標(biāo)更加可定制，它也可以替換為 SVG 路徑。
你是否已經(jīng)以創(chuàng)造性的方式使用過(guò) CSS 邊框？ 請(qǐng)?jiān)诹粞詤^(qū)中告訴我！ 感謝你的閱讀，快樂(lè)編程！
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
