<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>太极八卦图</title>
<style>
*{
margin: 0;
padding: 0;
background-color: #eeeded;
}
#main{
width: 100%;
height: 100vh;
/* background-color: blue; */
}
#taiji{
background-color: black;
border-color: white;
border-style: solid;
border-width: 0 0 100px 0;
height: 100px;
width: 200px;
margin: auto;
border-radius: 50%;
top: 40vh;
position: relative;
/* infinite是无限循环的动画,linear是线性动画,2s是动画持续时间,rotate是旋转动画, */
animation: rotate 5s linear infinite;
}
#taiji::before{
content: "";
width: 28px;
height: 28px;
background-color: black;
border: 36px solid white;
/* css伪元素默认是inline-block,所以要设置为block */
display: block;
border-radius: 50%;
position: absolute;
top: 50%;
/* left: 50%; */
/* transform: translate(-50%, -50%) rotate(45deg) */
}
#taiji::after{
content: "";
width: 28px;
height: 28px;
background-color: white;
border: 36px solid black;
display: block;
border-radius: 50%;
position: absolute;
top: 50%;
/* transform: translate(100%, 0) */
right: 0;
/* 当然这里right:0也可以用left:50%,因为伪元素是相对父元素定位的。或者用transform: translate(100%, 0) */
}
/* 旋转动画 */
@keyframes rotate {
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(180deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="main">
<div id="taiji"></div>
</div>
</body>
</html>
11-26
1019