[分享] 使用 HTML 和 CSS 做圓圈的動畫效果
大家好，最近練習使用單純的 HTML & CSS 做圓圈的動畫效果，
主要的技巧使用了 conic-gradient、radial-gradient 和 mask 相關 CSS。
也使用到了 @property 來自訂屬性，
雖然會有瀏覽器支援度的問題(Chrome 和 Edge 有支援)，
不過覺得不支援也沒有關係，只是沒有動畫效果而已，
圓圈最後的百分比仍能正常呈現。
然後也有寫 JS 來讓頁面下滑，碰到圓圈時，觸發動畫效果。
若想看重點解說，可瀏覽 https://webmix.cc/lab/pie_chart_animation
也提供原始碼下載喔。
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 219.68.233.17 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1677206537.A.80E.html
→
02/24 19:34,
1年前
, 1F
02/24 19:34, 1F
→
02/24 19:35,
1年前
, 2F
02/24 19:35, 2F
噓
03/01 18:30,
1年前
, 3F
03/01 18:30, 3F
→
03/01 20:56,
1年前
, 4F
03/01 20:56, 4F
→
03/02 18:15,
1年前
, 5F
03/02 18:15, 5F
噓
03/15 18:35,
1年前
, 6F
03/15 18:35, 6F
Web_Design 近期熱門文章
PTT數位生活區 即時熱門文章
