整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
注本頭條號，專注做前端。
這是一個中國人都非常熟悉的太極圖案，分陰陽兩級，會旋轉（用到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小時內與您取得聯系。
