欧美熟妇色XXXX欧美老妇毛多,久久九九囯产亚洲精品视频 ,黄色小视频免费网站

技術(shù)頻道 - html技術(shù)

詳細(xì)介紹CSS+SVG創(chuàng)建圓圈/圓環(huán)動(dòng)畫

作者:admin 時(shí)間:2022-9-10 19:54:33 瀏覽:

本文是關(guān)于CSS+SVG創(chuàng)建圓圈/圓環(huán)動(dòng)畫的教程，為那些對(duì) SVG 感興趣的人提供了一個(gè)指南。

最終的效果

demo download

創(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 居中

接下來，這一步是可選的。如果你想將你的 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 的寬度和高度。

然后，你需要通過將寬度和高度值除以2 或使用百分比（％）值來表??示 x 軸和 y 軸坐標(biāo)來再次調(diào)整它。

<svg> 
  <circle cx="50%" cy="50%" r="75" /> 
</svg>

接下來，我們需要知道動(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)畫

問題：圓圈右側(cè)的起始動(dòng)畫點(diǎn)？如何使起點(diǎn)從頂部開始？

解決方法：將圓圈旋轉(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)畫的過程，希望你喜歡這個(gè) SVG 教程。關(guān)于CSS+SVG創(chuàng)建圓環(huán)動(dòng)畫的實(shí)例教程，除此之外，你也可以看看此文《[實(shí)例]純 CSS SVG 畫圓/圓環(huán)/圓弧動(dòng)畫》，實(shí)例圖示如下：