溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS3中怎么利用border-radius繪制一個太極

發(fā)布時間：2021-07-22 15:35:20 來源：億速云 閱讀：186 作者：Leah 欄目：web開發(fā)

本篇文章給大家分享的是有關(guān)CSS3中怎么利用border-radius繪制一個太極，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

太極圖
border-radius 除了做邊框圓角效果之外，把它用在畫圖示上的話，其實能產(chǎn)生出很多不同的創(chuàng)意哩。筆者今天要繼續(xù)使用它來教各位畫-太極圖。

檢視原始碼 HTML

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <body>  

  2.  <div class="taichi">  

  3.   <div class="white-circle"></div>  

  4.   <div class="black-circle"></div>  

  5.  </div>  

  6. </body>  

因為太極圖中有一黑一白的圓，所以多放了兩個 div 在區(qū)塊中。

接著請張大眼仔細看，筆者要先將大區(qū)塊分成一白一黑：

檢視原始碼 CSS

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .taichi {   

  2.  position: relative;   

  3.  width: 48px; /* 50 - 2 */  

  4.  height: 96px; /* 100 - 2 - 2 */  

  5.  background: #fff;   

  6.  border: 2px solid #000;   

  7.  border-width: 2px 50px 2px 2px;   

  8.  border-radius: 50%;   

  9. }  

一般的盒子模式(Box Model)是連同邊框?qū)挾榷加嬎阍趨^(qū)塊的寬高中的，所以我們想要做一個寬高 100&times;100 的區(qū)塊，但邊框?qū)挾热绻?2px 的話，那么里面的部份應(yīng)該就是只有 96px。再來特別的是，筆者將右邊的邊框?qū)挾戎苯釉O(shè)定成 50px，所以區(qū)塊內(nèi)部的寬度就只需要 48px 就可以了。

當這樣設(shè)定好再加上 border-radius 圓角效果之后，就會變成~
CSS3中怎么利用border-radius繪制一個太極

嘿嘿~已經(jīng)有一黑一白的區(qū)塊的，再來先補上一顆白圓：

檢視原始碼 CSS

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .white-circle {   

  2.  position: absolute;   

  3.  top: 0;   

  4.  left: 50%;   

  5.  background: #fff;   

  6.  border-radius: 50%;   

  7.  width: 48px;   

  8.  height: 48px;   

  9. }  

這邊就是直接產(chǎn)生一個完整的白色圓形并放在上半部的中間：
CSS3中怎么利用border-radius繪制一個太極

那黑色圓形就是放在下半部囉：

檢視原始碼 CSS

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .black-circle {   

  2.  position: absolute;   

  3.  top: 50%;   

  4.  left: 50%;   

  5.  background: #000;   

  6.  border-radius: 50%;   

  7.  width: 48px;   

  8.  height: 48px;   

  9. }  

看起來就已經(jīng)有 9 成像囉~
CSS3中怎么利用border-radius繪制一個太極

最后還差兩個相反顏色的小圓點在這兩個圓形中，這兩個小圓點我們只要使用 ::after 擬元素(Pseudo-elements) 就可以了：

檢視原始碼 CSS

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .white-circle::after {   

  2.  content: "";   

  3.  position: absolute;   

  4.  top: 17px; /* (50-16)/2 */  

  5.  left: 17px; /* (50-16)/2 */  

  6.  background: #000;   

  7.  border-radius: 50%;   

  8.  width: 16px;   

  9.  height: 16px;   

  10. }   

  11. .black-circle::after {   

  12.  content: "";   

  13.  position: absolute;   

  14.  top: 17px; /* (50-16)/2 */  

  15.  left: 17px; /* (50-16)/2 */  

  16.  background: #fff;   

  17.  border-radius: 50%;   

  18.  width: 16px;   

  19.  height: 16px;   

  20. }  

將將~是不是很神奇呢??？
CSS3中怎么利用border-radius繪制一個太極

愛心
上面教各位使用 border-radius 來畫太極圖，下面則是要教各位一樣是使用圓角效果來愛心。

我們只需要一個 div 區(qū)塊就可以了：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <body>  

  2.  <div class="heart"></div>  

  3. </body>  

然后指定區(qū)塊的寬高：

檢視原始碼 CSS

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .heart {   

  2.  position: relative;   

  3.  width: 140px;   

  4.  height: 115px;   

  5. }  

一樣是將愛心分成左右兩區(qū)塊，一樣是先用 ::before 擬元素(Pseudo-elements)來產(chǎn)生左邊的區(qū)塊：

檢視原始碼 CSS

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .heart::before {   

  2.  content: "";   

  3.  position: absolute;   

  4.  left: 70px;   

  5.  top: 0;   

  6.  width: 70px;   

  7.  height: 115px;   

  8.  background: red;   

  9.  border-radius: 50px 50px 0 0;   

  10. }  

因為只有設(shè)定左上及右上的圓角效果，所以就變成圓頭的柱子了：
CSS3中怎么利用border-radius繪制一個太極

接著筆者要改變它的旋轉(zhuǎn)中心點來把它往左旋轉(zhuǎn) 45 度：

檢視原始碼 CSS

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .heart::before {   

  2.  content: "";   

  3.  position: absolute;   

  4.  left: 70px;   

  5.  top: 0;   

  6.  width: 70px;   

  7.  height: 115px;   

  8.  background: red;   

  9.  border-radius: 50px 50px 0 0;   

  10.  -webkit-transform: rotate(-45deg);   

  11.  -moz-transform: rotate(-45deg);   

  12.  -o-transform: rotate(-45deg);   

  13.  transform: rotate(-45deg);   

  14.  -webkit-transform-origin: left bottombottom;   

  15.  -moz-transform-origin: left bottombottom;   

  16.  -o-transform-origin: left bottombottom;   

  17.  transform-origin: left bottombottom;   

  18. }  

transform-origin 可以改變元素的中心點。它跟 background-position 一樣是接受兩個值，第一個是設(shè)定水平，第二個是設(shè)定垂直。預(yù)設(shè)是以 center center 為主，現(xiàn)在筆者將它改成在左下方：
CSS3中怎么利用border-radius繪制一個太極

右邊的部份也一樣，但只是旋轉(zhuǎn)中心點改在右下，并往右旋轉(zhuǎn)：

檢視原始碼 CSS

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .heart::after {   

  2.  content: "";   

  3.  position: absolute;   

  4.  top: 0;   

  5.  left: 0;   

  6.  width: 70px;   

  7.  height: 115px;   

  8.  background: red;   

  9.  border-radius: 50px 50px 0 0;   

  10.  -webkit-transform: rotate(45deg);   

  11.  -moz-transform: rotate(45deg);   

  12.  -o-transform: rotate(45deg);   

  13.  transform: rotate(45deg);   

  14.  -webkit-transform-origin: rightright bottombottom;   

  15.  -moz-transform-origin: rightright bottombottom;   

  16.  -o-transform-origin: rightright bottombottom;   

  17.  transform-origin: rightright bottombottom;   

  18. }  

當兩邊都產(chǎn)生完后，一個紅通通的愛心就出現(xiàn)囉：
CSS3中怎么利用border-radius繪制一個太極

什么~中和的鐘先生問說怎么不會動...沒關(guān)系，補上個 animation 的動畫效果給它：

檢視原始碼 CSS

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .heart {   

  2.  -webkit-animation: jump 1s infinite ease-out;   

  3.  -moz-animation: jump 1s infinite ease-out;   

  4.  -o-animation: jump 1s infinite ease-out;   

  5.  animation: jump 1s infinite ease-out;   

  6. }   

  7. @-webkit-keyframes jump {   

  8.  0%, 60%, 75%, 90%, 100% {   

  9.   -webkit-transform: scale(1);   

  10.  }   

  11.  15% {   

  12.   -webkit-transform: scale(0.6);   

  13.  }   

  14.  30% {   

  15.   -webkit-transform: scale(1);   

  16.  }   

  17.  45% {   

  18.   -webkit-transform: scale(0.7);   

  19.  }   

  20. }   

  21. @-moz-keyframes jump {   

  22.  0%, 60%, 75%, 90%, 100% {   

  23.   -moz-transform: scale(1);   

  24.  }   

  25.  15% {   

  26.   -moz-transform: scale(0.6);   

  27.  }   

  28.  30% {   

  29.   -moz-transform: scale(1);   

  30.  }   

  31.  45% {   

  32.   -moz-transform: scale(0.7);   

  33.  }   

  34. }   

  35. @-o-keyframes jump {   

  36.  0%, 60%, 75%, 90%, 100% {   

  37.   -o-transform: scale(1);   

  38.  }   

  39.  15% {   

  40.    -o-transform: scale(0.6);   

  41.  }   

  42.  30% {   

  43.   -o-transform: scale(1);   

  44.  }   

  45.  45% {   

  46.   -o-transform: scale(0.7);   

  47.  }   

  48. }   

  49. @keyframes jump {   

  50.  0%, 60%, 75%, 90%, 100% {   

  51.   transform: scale(1);   

  52.  }   

  53.  15% {   

  54.   transform: scale(0.6);   

  55.  }   

  56.  30% {   

  57.   transform: scale(1);   

  58.  }   

  59.  45% {   

  60.   transform: scale(0.7);   

  61.  }   

  62. }  

透過 transform 的 scale(x, y) 來改變愛心的大小，讓整個動畫的看起來就象是噗通噗通的跳一樣：
CSS3中怎么利用border-radius繪制一個太極

以上就是CSS3中怎么利用border-radius繪制一個太極，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手