1、效果布局主要用了用了3个DIV，配合:before、:after利用css3中的圆角(border-radius)、阴影(box-shadow)完成。
2、动画效果CSS3中的@keyframes、animation
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS3绘制旋转的太极图案</title> <style> body {background-color:#555;} .box-taiji {width:400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#000;box-shadow:0 0 50px rgba(0,0,0,.8);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 {width:200px;height:400px;position:absolute;top:0;display:block;content:"";} .box-taiji:before {left:0;border-radius:200px 0 0 200px;background-color:#000;} .box-taiji:after {right:0;border-radius:0 200px 200px 0;background-color:#fff;} .circle-01, .circle-02 {width:200px;height:200px;position:absolute;z-index:2;border-radius:300px;} .circle-01 {top:0;left:100px;background-color:#000;} .circle-02 {bottom:0;right:100px;background-color:#fff;} .circle-01:after, .circle-02:after {width:75px;height:75px;position:absolute;z-index:3;display:block;content:"";border-radius:75px;} .circle-01:after {top:60px;left:55px;background-color:#fff;} .circle-02:after {bottom:60px;right:55px;background-color:#000;} @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);} } </style> </head> <body> <div class="box-taiji"> <div class="circle-01"></div> <div class="circle-02"></div> </div> </body> </html>
原文：http://www.cnblogs.com/huanlei/p/4028910.html