作者hubin ()
看板Web_Design
標題[分享] 使用 HTML 和 CSS 做圓圈的動畫效果
時間Fri Feb 24 10:42:13 2023
大家好，最近練習使用單純的 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://webptt.com/m.aspx?n=bbs/Web_Design/M.1677206537.A.80E.html
1F：→ secretfly: 這是新文章嗎 酷喔 02/24 19:34
2F：→ secretfly: 但為什麼都上傳yt了 不用影片教學? 示範短片很沒意義耶 02/24 19:35
3F：噓 secretfly: 好喔只是來廣告的 補血一下XD 03/01 18:30
4F：→ microloft: 這板可以分享啊，沒什麼關係吧 03/01 20:56
5F：→ secretfly: 可以分享呀:) 我覺得內容不錯 手滑按2的鍵盤怪怪的 03/02 18:15
6F：噓 tzouandy2818: 好文推 03/15 18:35