html5做太极,html5怎么制作会转圈的太极

太极阴阳图

.box-taiji {

width: 0;

height: 400px;

position: relative;

margin: 50px auto;

border-left: 200px solid #000;

border-right: 200px solid #fff;

box-shadow: 0 0 30px rgba(0,0,0,.5);

border-radius: 400px;

animation: rotation 2.5s linear infinite;

-webkit-animation: rotation 2.5s linear infinite;

-moz-animation: rotation 2.5s linear infinite;

}

.box-taiji:before,

.box-taiji:after {

position: absolute;

content: "";

display: block;

}

.box-taiji:before {

width: 200px;

height: 200px;

top: 0;

left: -100px;

z-index: 1;

background-color: #fff;

border-radius: 50%;

box-shadow: 0 200px 0 #000;

}

.box-taiji:after {

width: 60px;

height: 60px;

top: 70px;

left: -30px;

z-index: 2;

background-color: #000;

border-radius: 50%;

box-shadow: 0 200px 0 #fff;

}

@keyframes rotation {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(-360deg);

}

}

@-webkit-keyframes rotation {

0% {

-webkit-transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(-360deg);

}

}

@-moz-keyframes rotation {

0% {

-moz-transform: rotate(0deg);

}

100% {

-moz-transform: rotate(-360deg);

}

}