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>