太极怎么用html写出来,如何用css实现太极图

太极图

*{

margin: 0;

padding: 0;

}

body{

background-color: #ddd;

}

.boxs{

display: flex;

align-items: center;

width: 200px;

height: 200px;

margin: 100px auto;

/* 从上往下各占50%由黑变白的一个过程! */

background: linear-gradient(#000 50%,#fff 50%);

border-radius: 50%

}

/* 接下来用css3伪对象选择符创建内部的两个小圆形，由于标签是弹性布局，

并且设置了align-items:center属性，所以创建的内部元素垂直居中： */

.boxs::before,.boxs::after{

content:"";

display: block;

width: 50%;

height: 50%;

border-radius: 50%;

background: rgb(11, 189, 165);

}

.boxs::before{

background:radial-gradient(#fff 25%, #000 25%);

transform-origin: 0% 50%;

animation-name: move;

animation-duration: 1s;

animation-timing-function: linear;

animation-iteration-count: infinite;

animation-direction: alternate;

}

.boxs::after{

background:radial-gradient(#000 25%, #fff 25%);

transform-origin: 100% 50%;

animation-name: move;

animation-duration: 1s;

animation-timing-function: linear;

animation-delay: -1s;

animation-iteration-count: infinite;

animation-direction: alternate;

}

/* 使用关键帧(@keyframes)和动画属性animation：

创建动画，从原始大小0.7倍变化到1.3倍： */

@keyframes move{

from{

transform: scale(0.7);

}

to{

transform:scale(1.3);

}

}