效果图
原理剖析
1.先完成这样一个半圆(这个很简单吧)
2.overflow: hidden;
3.在中间定位一个白色的圆形做遮挡
4.完成另一半
5.使用animate配合时间完成衔接
源码
<!doctype html> <html> <head> <meta charset="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% 2em; 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>
如对本文有疑问, 点击进行留言回复!!
清除新版Google Chrome浏览器中表单控件(input,button...)默认的黑色边框
荐 20200714——git/mac配置/项目运行步骤/一些报错
antd 菜单组件 使用时报错:Cannot read property ‘isRootMenu‘ of undefined
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来
硬件仪表盘账号建立指导(一) --WHQL认证测试结果提交账号(一)
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系
网友评论