java旋转太极图_如何用CSS纯代码画一个旋转的太极图（附代码）

这是一个中国人都非常熟悉的图案——太极图，它分为阴阳两级，会旋转(用到css3 animation动画属性)，此图通过css3纯代码实现，它由 若干个小圆组合而成，适合初学css3的人练练手，娱以 致学，增加学习的乐趣。

HTML部分：

CSS部分：

.square {

width: 400px;

height: 400px;

position: relative;

transform: rotate(45deg);

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

animation: rotate infinite linear 5s;

margin: 10% auto;

-webkit-animation: rotate infinite linear 5s;

margin: 10% auto;

-moz-animation: rotate infinite linear 5s;

margin: 10% auto;

}

.rect {

width: 400px;

height: 200px;

position: relative;

border: 1px #d2d2d2 solid;

border-bottom: none;

}

.inner_circle {

width: 200px;

height: 200px;

border-radius: 200px;

position: absolute;

z-index: 1;

}

.dot {

width: 50px;

height: 50px;

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

border-radius: 50%;

}

.rect_one {

border-radius: 200px 200px 0 0;

background: white;

}

.rect_one_one {

bottom: -100px;

left: 0;

background: black;

}

.rect_one_two {

background: white;

}

.rect_two {

border-radius: 0 0 200px 200px;

background: black;

}

.rect_two_one {

bottom: 100px;

right: 0;

background: white;

}

.rect_two_two {

background: black;

}

@keyframes rotate {

from {

transform: rotate(0deg);

-webkit-transform: rotate(0deg);

}

to {

transform: rotate(360deg);

-webkit-transform: rotate(360deg);

}

}

看图看效果：