整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          純css3畫太極

          注本頭條號,專注做前端。

          這是一個中國人都非常熟悉的太極圖案,分陰陽兩級,會旋轉(用到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的路上請多多指教


          主站蜘蛛池模板: 久久国产精品最新一区| 国产成人一区二区三中文| 精品人妻少妇一区二区三区| 国产萌白酱在线一区二区| 一色一伦一区二区三区| 一区二区三区精密机械| 国产91精品一区| а天堂中文最新一区二区三区| 中文字幕一区二区三区有限公司| 久久99热狠狠色精品一区| 一区二区三区高清| 福利一区二区三区视频午夜观看| 精品国产一区二区三区2021| 亚洲AV日韩AV天堂一区二区三区| 中文字幕乱码人妻一区二区三区| 国产av一区二区精品久久凹凸| 国产成人精品无码一区二区三区| 精品一区二区视频在线观看| 美女视频免费看一区二区| 一区二区三区四区精品视频| 狠狠做深爱婷婷久久综合一区| 中文字幕日韩人妻不卡一区| 一区一区三区产品乱码| 亚洲国产精品成人一区| 精品无码一区二区三区在线| 一区二区三区日本电影| 亚洲宅男精品一区在线观看| 亚洲国产精品成人一区| 中文字幕AV无码一区二区三区| 一区在线免费观看| 高清精品一区二区三区一区| 色老板在线视频一区二区| 国产福利日本一区二区三区| 国产成人精品视频一区二区不卡| 精品国产一区二区三区在线| 色偷偷av一区二区三区| www一区二区www免费| 国产日产久久高清欧美一区| 亚洲一区综合在线播放| 国产精品被窝福利一区| 在线观看精品一区|