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:#;box-shadow:  50px rgba(,,,.);}

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

步骤二：

.box-taiji {width:400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#;box-shadow:  50px rgba(,,,.);}
.box-taiji:before,
.box-taiji:after {width:200px;height:400px;position:absolute;top:;display:block;content:"";}
.box-taiji:before {left:;border-radius:200px   200px;background-color:#;}
.box-taiji:after {right:;border-radius: 200px 200px ;background-color:#fff;}

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

步骤三：

.box-taiji {width:400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#;box-shadow:  50px rgba(,,,.);}
.box-taiji:before,
.box-taiji:after {width:200px;height:400px;position:absolute;top:;display:block;content:"";}
.box-taiji:before {left:;border-radius:200px   200px;background-color:#;}
.box-taiji:after {right:;border-radius: 200px 200px ;background-color:#fff;}
.circle-,
.circle- {width:200px;height:200px;position:absolute;z-index:;border-radius:300px;}
.circle- {top:;left:100px;background-color:#;}

.box-taiji {width:400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#;box-shadow:  50px rgba(,,,.);}
.box-taiji:before,
.box-taiji:after {width:200px;height:400px;position:absolute;top:;display:block;content:"";}
.box-taiji:before {left:;border-radius:200px   200px;background-color:#;}
.box-taiji:after {right:;border-radius: 200px 200px ;background-color:#fff;}
.circle-,
.circle- {width:200px;height:200px;position:absolute;z-index:;border-radius:300px;}
.circle- {top:;left:100px;background-color:#;}
.circle- {bottom:;right:100px;background-color:#fff;}

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

步骤四：

.box-taiji {width:400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#;box-shadow:  50px rgba(,,,.);}
.box-taiji:before,
.box-taiji:after {width:200px;height:400px;position:absolute;top:;display:block;content:"";}
.box-taiji:before {left:;border-radius:200px   200px;background-color:#;}
.box-taiji:after {right:;border-radius: 200px 200px ;background-color:#fff;}
.circle-,
.circle- {width:200px;height:200px;position:absolute;z-index:;border-radius:300px;}
.circle- {top:;left:100px;background-color:#;}
.circle- {bottom:;right:100px;background-color:#fff;}
.circle-:after,
.circle-:after {width:75px;height:75px;position:absolute;z-index:;display:block;content:"";border-radius:75px;}
.circle-:after {top:60px;left:55px;background-color:#fff;}
.circle-:after {bottom:60px;right:55px;background-color:#;}

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

步骤五：

.box-taiji {width:400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#;box-shadow:  50px rgba(,,,.);animation:rotation .5s linear infinite;-webkit-animation:rotation .5s linear infinite;-moz-animation:rotation .5s linear infinite;}
.box-taiji:before,
.box-taiji:after {width:200px;height:400px;position:absolute;top:;display:block;content:"";}
.box-taiji:before {left:;border-radius:200px   200px;background-color:#;}
.box-taiji:after {right:;border-radius: 200px 200px ;background-color:#fff;}
.circle-,
.circle- {width:200px;height:200px;position:absolute;z-index:;border-radius:300px;}
.circle- {top:;left:100px;background-color:#;}
.circle- {bottom:;right:100px;background-color:#fff;}
.circle-:after,
.circle-:after {width:75px;height:75px;position:absolute;z-index:;display:block;content:"";border-radius:75px;}
.circle-:after {top:60px;left:55px;background-color:#fff;}
.circle-:after {bottom:60px;right:55px;background-color:#;}
@keyframes rotation {
% {transform:rotate(0deg);}
    % {transform:rotate(360deg);}
}
@-webkit-keyframes rotation {
    % {-webkit-transform:rotate(0deg);}
    % {-webkit-transform:rotate(360deg);}
}
@-moz-keyframes rotation {
    % {-moz-transform:rotate(0deg);}
    % {-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:#;}
.box-taiji {width:400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#;box-shadow:  50px rgba(,,,.);animation:rotation .5s linear infinite;-webkit-animation:rotation .5s linear infinite;-moz-animation:rotation .5s linear infinite;}
.box-taiji:before,
.box-taiji:after {width:200px;height:400px;position:absolute;top:;display:block;content:"";}
.box-taiji:before {left:;border-radius:200px   200px;background-color:#;}
.box-taiji:after {right:;border-radius: 200px 200px ;background-color:#fff;}
.circle-,
.circle- {width:200px;height:200px;position:absolute;z-index:;border-radius:300px;}
.circle- {top:;left:100px;background-color:#;}
.circle- {bottom:;right:100px;background-color:#fff;}
.circle-:after,
.circle-:after {width:75px;height:75px;position:absolute;z-index:;display:block;content:"";border-radius:75px;}
.circle-:after {top:60px;left:55px;background-color:#fff;}
.circle-:after {bottom:60px;right:55px;background-color:#;}
@keyframes rotation {
    % {transform:rotate(0deg);}
    % {transform:rotate(360deg);}
}
@-webkit-keyframes rotation {
    % {-webkit-transform:rotate(0deg);}
    % {-webkit-transform:rotate(360deg);}
}
@-moz-keyframes rotation {
    % {-moz-transform:rotate(0deg);}
    % {-moz-transform:rotate(360deg);}
}
</style>
</head>

<body>

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

</body>
</html>