<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
body {
height: 100%;
background: rgba(0,0,0,.5);
}
body,div {
padding: 0;
margin: 0;
}
.circleProgress_wrapper{
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
/*border:1px solid #ddd;*/
}
.wrapper{
width: 100px;
height: 200px;
position: absolute;
top:0;
overflow: hidden;
}
.right{
right:0;
}
.left{
left:0;
}
.circleProgress{
width: 188px;
height: 188px;
border: 6px solid #0FCD8B;
border-radius: 50%;
position: absolute;
top:0;
-webkit-transform: rotate(45deg);
}
.rightcircle{
border-top: 6px solid #fff;
border-right: 6px solid #fff;
right:0;
-webkit-animation: circleProgressLoad_right 1.5s linear forwards;
}
.leftcircle{
border-bottom: 6px solid #fff;
border-left: 6px solid #fff;
left:0;
-webkit-animation: circleProgressLoad_left 1.5s linear forwards;
}
@-webkit-keyframes circleProgressLoad_right{
0%{
-webkit-transform: rotate(45deg);
}
50%{
-webkit-transform: rotate(225deg);
}
100%{
-webkit-transform: rotate(225deg);
}
}
@-webkit-keyframes circleProgressLoad_left{
0%{
-webkit-transform: rotate(45deg);
}
50%{
-webkit-transform: rotate(45deg);
}
100%{
-webkit-transform: rotate(225deg);
}
}
</style>
<body>
<div class="circleProgress_wrapper">
<div class="wrapper right">
<div class="circleProgress rightcircle"></div>
</div>
<div class="wrapper left">
<div class="circleProgress leftcircle"></div>
</div>
</div>
</body>
</html>
原文地址：https://www.cnblogs.com/QQPrincekin/p/11076249.html
时间： 2024-07-31 20:23:36