效果图
原理剖析
1.先完成这样一个半圆（这个很简单吧）
2.overflow: hidden;
3.在中间定位一个白色的圆形做遮挡
4.完成另一半
5.使用animate配合时间完成衔接
源码
<!doctype html><html><head> <meta chart="utf-8"> <title>环形进度条</title> <style> .wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 4em; height: 4em; margin: auto; } .container { position: absolute; top: 0; bottom: 0; width: 2em; overflow: hidden; } .halfcir { width: 2em; height: 4em; background: red; } .container1 { left: 2em; } .container1 .halfcir { left: 0; border-radius: 0 4em 4em 0; transform-origin: 0 50%; animation: halfcir1 4s infinite linear; } .container2 { left: 0; } .container2 .halfcir { border-radius: 4em 0 0 4em; transform-origin: 2em 2em; animation: halfcir2 4s infinite linear; } @keyframes halfcir1 { 50%, 100% { transform: rotatez(180deg); } } 人与人之间的交往 @keyframes halfcir2 { 0%, 50% { transform: rotatez(0); 单身狗的图片 } 100% { transform: rotatez(180deg); } } .wrapper::after { position: absolute; top: 0.5em; left: 0.5em; width: 3em; height: 3em; background: #fff; border-radius: 50%; content: ""; } .cir { 王字的来历 position: absolute; top: 0; right: 不知肉味0; left: 0; width: 0.5em; height: 0.5em; margin: auto; background: red; border-radius: 50%; } .cir2 { transform-origin: 50% 2冬至祝福语em; animation: cir2 4s infinite linear; } @keyframes cir2 { 100% { transform: rotatez(360deg); } } </style></head><body> <div class="wrapper"> <div class="container container1"> <div class="halfcir"></div> </div> <div class="container container2"> <div class="halfcir"></div> </div> <div class="cir cir1"></div> <div class="cir cir2"></div> </div></body></html>
本文发布于:2023-04-03 13:36:32，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/6f2361f7ad5c0897ec1b5f3d1dd3a7f5.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：【CSS】环形进度条.doc
本文 PDF 下载地址：【CSS】环形进度条.pdf
| 留言与评论（共有 0 条评论） |
