伪元素（:before与:after）实现太极图
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>太极图</title>
<link rel = "stylesheet" type = "text/css" href = "main.css" />
</head>
<body>
<div class = "box"></div>
</body>
</html>
.box{
width: 140px;
height: 70px;
position: relative;
border-style: solid;
border-width: 2px 2px 72px 2px;
border-radius: 50%;
animation: rot 4s infinite cubic-bezier(0,0,1,1);
}
.box:before{
content: '';
position: absolute;
top: 50%;
/* left: 0; */
width: 30px;
height: 30px;
background-color: #fff;
border: 20px solid #000;
border-radius: 50%;
}
.box:after{
content: '';
position: absolute;
left:50%;
top: 50%;
width: 30px;
height: 30px;
background-color: #000;
border: 20px solid #fff;
border-radius: 50%;
}
@keyframes rot{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
4285
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
