八卦阵
思路
主要通过css里的content属性
前::after
后::before
<div class="taiji"></div>
body {background-color: #ccc;}
.taiji {
width: 150px;
height: 300px;
margin: 100px auto;
border-right: 150px solid #000;
background-color: #fff;
border-radius: 150px;
animation: box 2s infinite linear;
}
.taiji::before,
.taiji::after {
content: '';
margin-left: 50%;
display: block;
width: 50px;
height: 50px;
background-color: #fff;
border: 50px solid #000;
border-radius: 75px;
}
.taiji::after {
background-color: #000;
border: 50px solid #fff;
}
@keyframes box{
from {}
to {
transform: rotate(-360deg);
}
}
Processed:
0.009, SQL:
8
