纯CSS3技术——制作一个旋转的太极

制作一个太极

效果就是下面这个样子的：

怎么样很帅吧~

嘿嘿~

首先还是分析一下如何实现这个图形，先来规划好位置~我们先来做一半，剩下的一半直接复制代码，修改一下参数就好了~

第一步：

首先由三个矩形，做好大致的骨架~

第二步：

修改样式（形状、背景色等等）。

（领会精神就好，这毕竟是个草图）

第三步：

完成另一半的制作并且添加动画效果。

这样我们的太极动画效果就完成了

是不是超级简单~

好的~现在我们开始动手操作吧~

先来规划一下图像的位置，（我们这边先设置一下border的值，方便我们观察，后面会清除掉的）

首先完成第一步

创建 div 标签

<body><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></body>

样式代码：

<style>*{
 margin: 0; padding: 0; }body { width: 100vw; height: 100vh; overflow: 
hidden;}.square{ width:400px; height:400px; position:relative;  
margin:10% auto; border:1px #d2d2d2 solid;}.rect{ width:400px; 
height:200px; position:relative; border:1px #d2d2d2 
solid;}.inner_circle{ width:200px; height:200px; position:absolute; 
z-index:1; border:1px #d2d2d2 solid;}.dot{ width:50px; height:50px; 
position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; 
border:1px #d2d2d2 solid;}.rect_one_one{ bottom:-100px; 
right:0;}</style>

页面效果：

现在调整图形的形状和背景颜色

代码：

.inner_circle{
 width:200px; height:200px; border-radius:200px; position:absolute; 
z-index:1; border:1px #d2d2d2 solid;}.dot{ width:50px; height:50px; 
position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; 
border-radius:50%; border:1px #d2d2d2 solid;}.rect_one{ 
border-radius:200px 200px 0 0; background:black;}.rect_one_one{ 
bottom:-100px; right:0; background:black;}.rect_one_two{ 
background:white;}

页面效果：

现在我们努努力把另一半也做出来~（复制上面的代码和样式，修改部分参数，把我们做的辅助线清除掉）

现在就是重要的一步了，给它添加一个动画~

代码：

.square{
 width:400px; height:400px; position:relative;  margin:10% auto;   
animation:rotate infinite linear 5s; -webkit-animation:rotate infinite 
linear 5s; -moz-animation:rotate infinite linear 5s;}

@keyframes
 rotate{ from{ transform:rotate(0deg); -webkit-transform:rotate(0deg); 
}to{ transform:rotate(360deg); -webkit-transform:rotate(360deg);}

现在我们来回顾一下制作太极的全过程~

那么我们的旋转太极就做好了

源代码已经贴在上面了

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c50758.shtml