整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
注本头条号，专注做前端。
这是一个中国人都非常熟悉的太极图案，分阴阳两级，会旋转（用到css3 animation动画属性），通过纯css3实现，可以看出是通过若干个小圆组合而成，适合初学css3的人练练手，娱以致学。
//
家好今天跟大家分享的是纯CSS实现旋转太极图的方法，首先我们来看下效果：
接下来我们来看一下它的实现过程：
一、构建HTML：
HTML
二、CSS样式设置：
1、基本样式格式化
2、太极图主题样式：设置相同的宽高，并通过“border-radius：50%”转为圆形，position设为relative相对定位，给一个1像素的灰色边框，最后通过animation引入后面的动画。
3、黑白部分设置：黑白两部分的宽均为父元素的50%，高度为父元素的100%，通过absolute定位在一左一右，然后通过border-radius去掉左右两侧多余的部分与太极主体圆形完全重合。
4、圆弧部分设置：主要原理就是用一个黑色和一个白色的圆形进行覆盖从而形成圆弧，这里注意一下尺寸和定位就行了。
5、黑白圆点设置：同上面的操作方法基本类似，通过border-radius设置两个圆形，调整尺寸和背景颜色并通过定位放到合适的位置即可
6、添加动画：通过@keyframes设置动画，主体部分延Z轴旋转360度，步骤2中以引用此处。
天都 A 题
小伙伴都该疲劳了吧~
今天咱们玩点别的~
制作一个太极~
效果就是下面这个样子的~
怎么样很帅吧~
嘿嘿~
首先还是分析一下如何实现这个图形，先来规划好位置~我们先来做一半，剩下的一半直接复制代码，修改一下参数就好了~
第一步：
首先由三个矩形，做好大致的骨架~
第二步：
修改样式（形状、背景色等等）。
（领会精神就好，这毕竟是个草图）
第三步：
完成另一半的制作并且添加动画效果。
这样我们的太极动画效果就完成了
是不是超级简单~
好的~现在我们开始动手操作吧~
先来规划一下图像的位置，（我们这边先设置一下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);
}
现在我们来回顾一下制作太极的全过程~
那么我们的旋转太极就做好了
源代码已经贴在上面了
当然私信回复
“太极”
可以获取源码呦！
我是萌新娜娜
立志做一个不翻车的老司机
学习Java的路上请多多指教
*请认真填写需求信息，我们会在24小时内与您取得联系。
