【CSS】环形进度条
程序员文章站
2022-07-01 08:03:12
效果图 原理剖析 1.先完成这样一个半圆（这个很简单吧） 2.overflow: hidden; 3.在中间定位一个白色的圆形做遮挡 4.完成另一半 5.使用animate配合时间完成衔接 源码 ......
效果图
原理剖析
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>