解决方法
要创建逐渐绘制其外部路径的圆,请使用SVG.
SVG的stroke-dasharray属性会将任何路径转换为虚线,您可以通过将虚线大小设置为与路径本身一样长的方式来利用它.
然后使用CSS动画逐渐更改stroke-dashoffset以围绕圆周边移动短划线.
circle { fill: white; stroke: black; stroke-width: 2; stroke-dasharray: 250; stroke-dashoffset: 1000; animation: rotate 5s linear infinite; } @keyframes rotate { to { stroke-dashoffset: 0; } }
<svg height="100" width="100"> <circle cx="50" cy="50" r="40" /> </svg>
原文地址:https://www.jb51.cc/css/217520.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。