您的位置:首页 - 教程 - 网页特效 - 正文
css3绘制旋转太极图
查看效果:
http://hovertree.com/texiao/css3/22/

制作方法:
第一步创建一个1:1的DIV(width和height)自定义:


第二步创建两个矩形,高度为宽度的一半拼合则为一个正方形


第三步设置上矩形和下矩形的角度使其成为半圆,切设置边框

效果图如下:


第四步每个矩形里创建圆(且创建内圆)


第五步填充颜色,旋转整体角度即可


第六步为其父标签创建旋转动画参考css3里面的即可。


代码如下:
.square{width:400px;height:400px;position:relative; transform:rotate(45deg); animation:rotate infinite linear 5s;}
.rect{width:400px;height:200px;position:relative;border:1px #d2d2d2 solid;border-bottom:none;}
.inner_circle{width:200px;height:200px;border-radius:200px;position:absolute;z-index:1;}
.dot{width:50px;height:50px;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;border-radius:50%;}
.rect_one{border-radius:200px 200px 0 0;background:white;}
.rect_one_one{bottom:-100px;left:0;background:black;}
.rect_one_two{background:white;}
.rect_two{border-radius:0 0 200px 200px;background:black;}
.rect_two_one{bottom:100px;right:0;background:white;}
.rect_two_two{background:black;}
@keyframes rotate{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}


<div class="square">
<div class="rect rect_one">
<div class="inner_circle rect_one_one">
<div class="dot rect_one_two"></div>
</div>
</div>
<div class="rect rect_two">
<div class="inner_circle rect_two_one">
<div class="dot rect_two_two"></div>
</div>
</div>
</div>

评论: