整合營銷服務商

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

          免費咨詢熱線:

          純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的路上請多多指教


          主站蜘蛛池模板: 国产伦精品一区二区三区视频小说| 日韩精品一区二区三区中文字幕 | 日韩精品国产一区| 香蕉视频一区二区| 国产在线精品一区二区| 国产短视频精品一区二区三区| 国产高清在线精品一区二区| 精品国产区一区二区三区在线观看| 精品欧洲av无码一区二区14| 国模无码人体一区二区| 国产天堂一区二区综合| 日韩精品一区二区三区不卡| 国产免费私拍一区二区三区| 日本韩国一区二区三区| 在线视频一区二区三区四区| 精品一区高潮喷吹在线播放| 久久精品无码一区二区无码 | 亚洲国产精品一区| 韩国福利一区二区三区高清视频| 国产福利电影一区二区三区,免费久久久久久久精 | 日本欧洲视频一区| 少妇无码AV无码一区| 肥臀熟女一区二区三区| 国产一区二区三区精品视频 | 色综合视频一区中文字幕| 国产福利91精品一区二区| 波多野结衣一区二区三区| 中文字幕一区日韩精品| 中文精品一区二区三区四区| 亚洲国产精品无码第一区二区三区| 一区一区三区产品乱码| 精品一区二区ww| 国产激情一区二区三区四区| 免费一区二区三区在线视频| 亚洲视频一区二区| 区三区激情福利综合中文字幕在线一区亚洲视频1 | 国产一区二区三区不卡观| 亚洲成AV人片一区二区密柚 | 国产精品日韩一区二区三区| 视频一区视频二区在线观看| 久久久久人妻精品一区三寸蜜桃 |