.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.taijibagua{
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.taiji{
width: 100px;
height: 100px;
position: relative;
border-radius: 50%;
box-shadow: 0px -5px 10px 0px rgba(42,245,152,0.4), 0px 5px 10px 0px rgba(8,174,234,0.4);
animation: zhuan 5s linear infinite;
}
.taiji:before,.taiji:after{
content: '';
width: 100px;
height: 50px;
position: absolute;
background-color: #fff;
border-radius: 100px 100px 0 0;
}
.taiji:after{
top: 50px;
background-color: #000;
border-radius: 0 0 50px 50px;
}
.yu:before,.yu:after{
content: '';
width: 12px;
height: 12px;
position: absolute;
top: 25px;
left: 50px;
border-radius: 50%;
background-color: #000;
border: 19px solid #fff;
z-index: 1;
}
.yu:after{
left: 0;
background-color: #fff;
border: 19px solid #000;
}
@keyframes zhuan{
to {
transform: rotate(360deg);
}
}
.bagua{
width: 40px;
height: 5px;
background-color: #2AF598;
position: absolute;
top: 0;
transform-origin: 20px 100px;
animation: eff49 5s linear infinite;
opacity: 0.2;
}
.bagua:before,.bagua:after{
content: '';
width: 40px;
height: 5px;
background-color: #08AEEA;
position: absolute;
top: 10px;
}
.bagua:after{
top: 20px;
background-color: #000;
}
.taijibagua .bagua:nth-of-type(3){
transform: rotate(-45deg);
animation-delay: 4.375s;
}
.taijibagua .bagua:nth-of-type(4){
transform: rotate(-90deg);
animation-delay: 3.75s;
}
.taijibagua .bagua:nth-of-type(5){
transform: rotate(-135deg);
animation-delay: 3.125s;
}
.taijibagua .bagua:nth-of-type(6){
transform: rotate(-180deg);
animation-delay: 2.5s;
}
.taijibagua .bagua:nth-of-type(7){
transform: rotate(-225deg);
animation-delay: 1.875s;
}
.taijibagua .bagua:nth-of-type(8){
transform: rotate(-270deg);
animation-delay: 1.25s;
}
.taijibagua .bagua:nth-of-type(9){
transform: rotate(-315deg);
animation-delay: 0.625s;
}
.white1,.white2,.white3{
width: 10px;
height: 7px;
background-color: #ffffff;
position: absolute;
top: -1px;
left: 50%;
transform: translate(-50%,0);
z-index: 10;
}
.white2{
top: 10px;
}
.white3{
top: 20px;
}
@keyframes eff49{
0% {
opacity: 1;
}
100%{
opacity: 0.2;
}
}
