僅 CSS 動畫繪制帶有邊框半徑和透明背景的圓

問題：

如何創(chuàng)建動畫邊框-半徑為透明背景的圓，同時遮蓋圓的初始部分以獲得繪圖效果？

解決方案：

1. 建立畫布：

   • 使用絕對定位和邊框定義容器以供參考。
   • 為遮罩創(chuàng)建一個 50% 寬度、絕對定位的半剪輯元素。

2. 創(chuàng)建圓圈：

   • 在半剪輯內(nèi)，放置一個具有透明邊框和藍(lán)色頂部的圓圈，然后左邊框顏色。
   • 將圓圈在半剪輯內(nèi)右對齊。

3. 動畫繪圖：

   • 使用 CSS 動畫將圓從初始 -45 度位置旋轉(zhuǎn) 135 度，以呈現(xiàn)繪圖的外觀。
   • 將半剪輯動畫旋轉(zhuǎn) 360 度以保持遮罩不變

4. 保持透明度：

   • 向主體添加重復(fù)的線性漸變，以確保透明度和提供視覺上下文。
   • 將漸變縮放到容器大小并將背景重復(fù)設(shè)置為不重復(fù)。

5. 修復(fù)半圓:

   • 創(chuàng)建第二個半圓（固定），無動畫，旋轉(zhuǎn) 135 度。
   • 動畫固定半圓的不透明度，使其在 50% 后出現(xiàn)

6. 控制動畫時間：

   • 根據(jù)需要調(diào)整動畫持續(xù)時間和時間以實(shí)現(xiàn)所需的繪制速度和效果。

代碼片段：

<code class="css">body {
  background: repeating-linear-gradient(45deg, white 0px, lightblue 100px);
  height: 500px;
  background-size: 500px 500px;
  background-repeat: no-repeat;
}

#container {
  position: absolute;
  width: 400px;
  height: 400px;
  border: solid red 1px;
  animation: colors 4s infinite;
}

#halfclip {
  width: 50%;
  height: 100%;
  right: 0px;
  position: absolute;
  overflow: hidden;
  transform-origin: left center;
  animation: cliprotate 16s steps(2) infinite;
  -webkit-animation: cliprotate 16s steps(2) infinite;
}

.halfcircle {
  box-sizing: border-box;
  height: 100%;
  right: 0px;
  position: absolute;
  border: solid 25px transparent;
  border-top-color: blue;
  border-left-color: blue;
  border-radius: 50%;
}

#clipped {
  width: 200%;
  animation: rotate 8s linear infinite;
  -webkit-animation: rotate 8s linear infinite;
}

#fixed {
  width: 100%;
  transform: rotate(135deg);
  animation: showfixed 16s steps(2) infinite;
  -webkit-animation: showfixed 16s linear infinite;
}

@-webkit-keyframes cliprotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes cliprotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@-webkit-keyframes rotate {
  0% { transform: rotate(-45deg); }
  100% { transform: rotate(135deg); }
}

@keyframes rotate {
  0% { transform: rotate(-45deg); }
  100% { transform: rotate(135deg); }
}

@-webkit-keyframes showfixed {
  0% { opacity: 0; }
  49.9% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 1; }
}
</code>

以上是如何僅使用 CSS 創(chuàng)建具有透明背景的平滑動畫圓形繪制效果？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！