html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>八卦阵</title>
</head>
<body>
<div class="box">
<div class="box1">
<div class="box_1"></div>
</div>
</div>
</body>
</html>
css部分
*{
margin: 0;
padding:0;
}
body{
display:flex;
justify-content: center;
align-items: center;
min-height:100vh;
background-color: #000;
}
.box{
position: relative;
width: 500px;
height:auto;
}
.box .box1{
width: 400px;
height: 400px;
}
.box .box1 .box_1{
width: 200px;
height:400px;
background-color: #fff;
border-right: #000 200px solid ;
border-radius:50%;
animation: Bagua 4s linear infinite;
}
.box .box1 .box_1::after,
.box .box1 .box_1::before{
content: "";
display:block;
width:50px;
height:50px;
border-radius: 50%;
}
.box .box1 .box_1::after{
position: absolute;
top:0;
left:50%;
background-color: #000;
border:75px solid #fff;
}
.box .box1 .box_1::before{
position: absolute;
background-color: #fff;
bottom:0;
left:50%;
border:75px solid #000;
}
@keyframes Bagua{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
533
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
