注本頭條號,專注做前端。
這是一個中國人都非常熟悉的太極圖案,分陰陽兩級,會旋轉(用到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小時內與您取得聯系。