作者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/cn.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