首頁 > web前端 > css教學 > 主體

利用CSS3的border-radius實現繪製太極及愛心的圖案

不言
發布: 2018-06-26 15:20:48
原創
2188 人瀏覽過

CSS3中的border-radius可以輕鬆地用來繪製弧線,如果只用來做圓角矩形的話可就太浪費了,下面就來展示一下利用CSS3的border-radius繪製太極及愛心圖案示例,需要的朋友可以參考下

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

檢視原始碼 HTML

<body>
 <p class="taichi">
  <p class="white-circle"></p>
  <p class="black-circle"></p>
 </p>
</body>
登入後複製

因為太極圖中有一黑一白的圓,所以多放了兩個 p 在區塊中。

接著請張大眼仔細看,筆者要先將大區塊分成一白一黑:

檢視原始碼CSS

.taichi {   
 position: relative;   
 width: 48px; /* 50 - 2 */
 height: 96px; /* 100 - 2 - 2 */
 background: #fff;   
 border: 2px solid #000;   
 border-width: 2px 50px 2px 2px;   
 border-radius: 50%;   
}
登入後複製

一般的盒子模式(Box Model)是連同邊框寬度都計算在區塊的寬高中的,所以我們想要做一個寬高100×100 的區塊,但邊框寬度如果是2px 的話,那麼裡面的部份應該就是只有96px 。再來特別的是,筆者將右邊的邊框寬度直接設定成 50px,所以區塊內部的寬度就只需要 48px 就可以了。

當這樣設定好再加上border-radius 圓角效果之後,就會變成~
2016517110833210.png (120×120)

嘿嘿~已經有一黑一白的區塊的,再來先補上一顆白圓:

檢視原始碼CSS

.white-circle {   
 position: absolute;   
 top: 0;   
 left: 50%;   
 background: #fff;   
 border-radius: 50%;   
 width: 48px;   
 height: 48px;   
}
登入後複製

這邊就是直接產生一個完整的白色圓形並放在上半部的中間:
2016517110925477.png (120×120)

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

檢視原始碼CSS

.black-circle {   
 position: absolute;   
 top: 50%;   
 left: 50%;   
 background: #000;   
 border-radius: 50%;   
 width: 48px;   
 height: 48px;   
}
登入後複製

看起來就已經有9 個成像囉~
2016517110953720.png (120×120)

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

檢視原始碼CSS

.white-circle::after {   
 content: "";   
 position: absolute;   
 top: 17px; /* (50-16)/2 */
 left: 17px; /* (50-16)/2 */
 background: #000;   
 border-radius: 50%;   
 width: 16px;   
 height: 16px;   
}   
.black-circle::after {   
 content: "";   
 position: absolute;   
 top: 17px; /* (50-16)/2 */
 left: 17px; /* (50-16)/2 */
 background: #fff;   
 border-radius: 50%;   
 width: 16px;   
 height: 16px;   
}
登入後複製

將會將~是不是很神奇呢! ?
2016517111042392.png (120×120)

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

我們只需要一個p 區塊就可以了:

<body>
 <p class="heart"></p>
</body>
登入後複製

然後指定區塊的寬高:

檢視原始碼CSS

.heart {   
 position: relative;   
 width: 140px;   
 height: 115px;   
}
登入後複製

一樣是將愛心分成左右兩區塊,一樣是先用::before 擬元素(Pseudo-elements)來產生左邊的區塊:

檢視原始碼CSS

.heart::before {   
 content: "";   
 position: absolute;   
 left: 70px;   
 top: 0;   
 width: 70px;   
 height: 115px;   
 background: red;   
 border-radius: 50px 50px 0 0;   
}
登入後複製

因為只有設定左上及右上的圓角效果,所以就變成圓頭的柱子了:
2016517111117036.png (200×200)

#接著筆者要改變它的旋轉中心點來把它往左旋轉45 度:

檢視原始碼CSS

.heart::before {   
 content: "";   
 position: absolute;   
 left: 70px;   
 top: 0;   
 width: 70px;   
 height: 115px;   
 background: red;   
 border-radius: 50px 50px 0 0;   
 -webkit-transform: rotate(-45deg);   
 -moz-transform: rotate(-45deg);   
 -o-transform: rotate(-45deg);   
 transform: rotate(-45deg);   
 -webkit-transform-origin: left bottombottom;   
 -moz-transform-origin: left bottombottom;   
 -o-transform-origin: left bottombottom;   
 transform-origin: left bottombottom;   
}
登入後複製

transform-origin 可以改變元素的中心點。它跟 background-position 一樣是接受兩個值,第一個是設定水平,第二個是設定垂直。預設是以center center 為主,現在筆者將它改成在左下方:
2016517111144455.png (200×200)

右邊的部份也一樣,但只是旋轉中心點改在右下,並且向右旋轉:

檢視原始碼CSS

.heart::after {   
 content: "";   
 position: absolute;   
 top: 0;   
 left: 0;   
 width: 70px;   
 height: 115px;   
 background: red;   
 border-radius: 50px 50px 0 0;   
 -webkit-transform: rotate(45deg);   
 -moz-transform: rotate(45deg);   
 -o-transform: rotate(45deg);   
 transform: rotate(45deg);   
 -webkit-transform-origin: rightright bottombottom;   
 -moz-transform-origin: rightright bottombottom;   
 -o-transform-origin: rightright bottombottom;   
 transform-origin: rightright bottombottom;   
}
登入後複製

當兩邊都產生完後,一個紅通通的愛心就出現囉:
2016517111209126.png (200×200)

什麼~中和的鐘先生問說怎麼不會動...沒關係,補上個animation 的動畫效果給它:

檢視原始碼CSS

.heart {   
 -webkit-animation: jump 1s infinite ease-out;   
 -moz-animation: jump 1s infinite ease-out;   
 -o-animation: jump 1s infinite ease-out;   
 animation: jump 1s infinite ease-out;   
}   
@-webkit-keyframes jump {   
 0%, 60%, 75%, 90%, 100% {   
  -webkit-transform: scale(1);   
 }   
 15% {   
  -webkit-transform: scale(0.6);   
 }   
 30% {   
  -webkit-transform: scale(1);   
 }   
 45% {   
  -webkit-transform: scale(0.7);   
 }   
}   
@-moz-keyframes jump {   
 0%, 60%, 75%, 90%, 100% {   
  -moz-transform: scale(1);   
 }   
 15% {   
  -moz-transform: scale(0.6);   
 }   
 30% {   
  -moz-transform: scale(1);   
 }   
 45% {   
  -moz-transform: scale(0.7);   
 }   
}   
@-o-keyframes jump {   
 0%, 60%, 75%, 90%, 100% {   
  -o-transform: scale(1);   
 }   
 15% {   
   -o-transform: scale(0.6);   
 }   
 30% {   
  -o-transform: scale(1);   
 }   
 45% {   
  -o-transform: scale(0.7);   
 }   
}   
@keyframes jump {   
 0%, 60%, 75%, 90%, 100% {   
  transform: scale(1);   
 }   
 15% {   
  transform: scale(0.6);   
 }   
 30% {   
  transform: scale(1);   
 }   
 45% {   
  transform: scale(0.7);   
 }   
}
登入後複製

透過transform 的scale(x, y) 來改變愛心的大小,讓整個動畫的看起來就像是噗通噗通的跳一樣:
2016517111241939.gif (200×200)

以上就是本文的全部內容,希望對大家的學習有幫助,更多相關內容請關注PHP中文網!

相關推薦:

關於CSS中視窗單位和百分比單位的使用

CSS3如何實現自訂「W ”形運行軌跡

利用CSS3實作文字向右循環的閃過效果

以上是利用CSS3的border-radius實現繪製太極及愛心的圖案的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板