|
|
|
|
|
本文是關(guān)于CSS+SVG創(chuàng)建圓圈/圓環(huán)動(dòng)畫的教程,為那些對(duì) SVG 感興趣的人提供了一個(gè)指南。
最終的效果
創(chuàng)建 SVG 圓
第一個(gè)問題:如何建立一個(gè)圈子?讓我們從簡(jiǎn)單的數(shù)學(xué)開始吧!圓的周長(zhǎng) = 2 * PI * 半徑。
公式:C = 2 × π × r
<svg>
<circle cx="100" cy="100" r="75" />
</svg>
如果你將代碼復(fù)制并粘貼到HTML文件中,用瀏覽器打開時(shí)將收到一個(gè)不完整的圓圈。為什么?當(dāng)你檢查<circle>
元素時(shí),你將知道答案。
y 軸坐標(biāo) (cy) 有問題嗎?
作為解決方案,我們可以將cy值更改為75以使<circle>
元素在y 軸上居中。同樣,對(duì)于cx值,將 300 除以 2。
代碼如下:
<svg>
<circle cx="150" cy="75" r="75" />
</svg>
將 SVG 居中
接下來(lái),這一步是可選的。如果你想將你的 SVG 放在網(wǎng)頁(yè)的中心,你可以按照下面的代碼:
svg {
background: #ffece3;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
中心<circle>元素
為它創(chuàng)建動(dòng)畫
我計(jì)劃以順時(shí)針方向?yàn)閳A圈設(shè)置動(dòng)畫。因此,我將 stroke-width
屬性添加到 10px。
circle {
fill: transparent;
stroke: orange;
stroke-width: 10px;
}
10px寬的圓圈
哎呀!該<circle>
元素沒有足夠的空間。讓我們把“空間”做大。因此,為 SVG 元素添加大約 400px 的寬度和高度。
然后,你需要通過(guò)將寬度和高度值除以2 或使用百分比(%)值來(lái)表??示 x 軸和 y 軸坐標(biāo)來(lái)再次調(diào)整它。
<svg>
<circle cx="50%" cy="50%" r="75" />
</svg>
接下來(lái),我們需要知道動(dòng)畫stroke-dasharray
的stroke-dashoffset
屬性。
CSS 中的stroke-dasharray
屬性用于在 SVG 形狀的筆劃中創(chuàng)建破折號(hào)。
對(duì)于<circle>
元素,該stroke-dasharray
屬性表示圓的周長(zhǎng)。
所以,我們可以得到該屬性的最大值。stroke-dasharray
值越低,<circle>
元素筆劃中短劃線之間的空間越大。
circle {
fill: transparent;
stroke: orange;
stroke-width: 10px;
stroke-dasharray: 471;
}
CSS 中的stroke-dashoffset
屬性定義了 SVG 路徑上 stroke
的破折號(hào)開始的位置。
我試了stroke-dashoffset
具有不同值的屬性。結(jié)果如下:
如果你用與stroke-dasharray
相同的值,你會(huì)得到一個(gè)空的圓圈。所以,我們要為stroke-dashoffset
屬性設(shè)置動(dòng)畫?,F(xiàn)在,我們可以為<circle>
元素聲明動(dòng)畫了。
circle {
fill: transparent;
stroke: orange;
stroke-width: 10px;
stroke-dasharray: 471;
stroke-dashoffset: 471;
animation: clock-animation 10s linear infinite;
}
@keyframes clock-animation {
0% {
stroke-dashoffset: 471;
}
100% {
stroke-dashoffset: 0;
}
}
圓形動(dòng)畫
解決方法:將圓圈旋轉(zhuǎn)到-90 度。并記住將transform-origin
屬性添加到center
。
circle {
fill: transparent;
stroke: orange;
stroke-width: 10px;
stroke-dasharray: 471;
stroke-dashoffset: 471;
animation: clock-animation 10s linear infinite;
transform: rotate(-90deg);
transform-origin: center;
}
-90 度圓變換
你也可以更改為逆時(shí)針方向。只需更改動(dòng)畫代碼。
@keyframes anti-clock-animation {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 471;
}
}
如果你想要一個(gè)完整的圓圈動(dòng)畫,只需增加stroke-width
值。假設(shè)圓的半徑為 75,然后將值加倍,即 150px。
總結(jié)
本文詳細(xì)介紹了CSS+SVG創(chuàng)建圓圈/圓環(huán)動(dòng)畫的過(guò)程,希望你喜歡這個(gè) SVG 教程。關(guān)于CSS+SVG創(chuàng)建圓環(huán)動(dòng)畫的實(shí)例教程,除此之外,你也可以看看此文《[實(shí)例]純 CSS SVG 畫圓/圓環(huán)/圓弧動(dòng)畫》,實(shí)例圖示如下:
相關(guān)文章