使用CSS3和SVG創建圓形進度條動畫效果

可以使用CSS3 和SVG 創建圓形進度條動畫效果，步驟如下：創建SVG 元素並定義圓形路徑；為圓形路徑設置虛線樣式；使用CSS3 動畫控制虛線的偏移量；通過調整虛線的初始偏移量設置進度百分比。

使用CSS3 和SVG 創建圓形進度條動畫效果

圓形進度條動畫效果是一種簡潔而有效的方法，可顯示任務的進展或完成百分比。使用CSS3 和SVG 可以輕鬆創建這種效果。

步驟：

1. 創建SVG 元素

創建一個SVG 元素，它將包含進度條。在SVG 元素中，定義一個圓形路徑，其半徑為進度條所需的半徑。

 <code><svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke-width="10" fill="none"></circle> </svg></code>

2. 設置圓形的虛線樣式

為圓形路徑設置虛線樣式，虛線間隔應為圓周的總長度。通過使用stroke-dasharray 和stroke-dashoffset 屬性來實現。

 <code>circle { stroke-dasharray: 251.32741228718345; stroke-dashoffset: 251.32741228718345; }</code>

3. 使用CSS3 動畫

使用CSS3 動畫來控制圓形虛線的偏移量。動畫的duration 應設置為進度完成所需的時間，animation-fill-mode 應設置為forwards，以使進度在動畫完成後保持不變。

 <code>@keyframes progress { to { stroke-dashoffset: 0; } } circle { animation: progress 5s forwards; }</code>

4. 設置進度百分比

通過調整stroke-dashoffset 的初始值來設置進度百分比。百分比等於(1 - 進度百分比) * 圓周的總長度。

 <code>circle { stroke-dashoffset: calc((1 - 0.5) * 251.32741228718345); }</code>

示例代碼：

 <code>   <style> svg { width: 100; height: 100; } circle { stroke-width: 10; fill: none; stroke-dasharray: 251.32741228718345; stroke-dashoffset: 251.32741228718345; animation: progress 5s forwards; } @keyframes progress { to { stroke-dashoffset: 0; } } </style>   <svg> <circle cx="50" cy="50" r="40"></circle> </svg>  </code>

以上是使用CSS3和SVG創建圓形進度條動畫效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！