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

制作一个太极

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

怎么样很帅吧~

嘿嘿~

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

第一步：

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

第二步：

修改样式(形状、背景色等等)。

(领会精神就好，这毕竟是个草图)

第三步：

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

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

是不是超级简单~

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

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

首先完成第一步

创建 div 标签

class="square">

class="inner_circle rect_one_one">

样式代码：

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

页面效果：

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

代码：

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

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

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

源代码已经贴在上面了