CSS3绘制旋转的太极图案（一）

 

 

 实现步骤：

基础HTML：

<div class="box-taiji">    <div class="circle-01"></div>    <div class="circle-02"></div></div>

 

 

步骤一：

 

.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);}

画一个宽高为400px的圆，加上阴影。

 

步骤二：

.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);}.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;}

利用伪类实现左右两个半圆，一黑一白。宽为200px，高为400px;

 

步骤三：

 

.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);}.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;}

 

.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);}.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;}

依次画两个宽高都为200px的圆，一黑一白。上下定位。

 

步骤四：

.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);}.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;}

组后两个黑白小圆，加上，布局效果搞定。

 

步骤五：

.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);}}

添加上动画效果，搞定、收工！！！

 

 

总结：

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>