CSS3繪製太極圖程式碼例項詳解

admin發表於2018-09-07
CSSS3

分享一段程式碼例項，它實現了繪製太極圖的功能。

後面並詳細給出太極圖的實現過程。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body {
  background: #999;
}
.radius {
  border-radius: 50%;
}
.lg-radius1 {
  width: 200px;
  height: 400px;
  position: relative;
  margin: 50px auto;
  border-left: 200px solid #000;
}
.lg-radius2 {
  width: 200px;
  height: 400px;
  border-right: 200px solid #fff;
  position: absolute;
  right: 0;
  top: 0;
}
.md-radius1 {
  width: 100px;
  height: 200px;
  position: absolute;
  z-index: 3;
  left: -100px;
  top: 0;
  border-left: 100px solid #FFF;
}
.md-radius2 {
  width: 100px;
  height: 200px;
  position: absolute;
  z-index: 3;
  left: -100px;
  bottom: 0;
  border-right: 100px solid #000;
}
.sm-radius1 {
  width: 50px;
  height: 50px;
  position: absolute;
  z-index: 5;
  left: -28px;
  top: 19%;
  background: #000;
}
.sm-radius2 {
  width: 50px;
  height: 50px;
  position: absolute;
  z-index: 5;
  left: -28px;
  bottom: 19%;
  background: #fff;
}
</style>
</head>
<body>
  <div class="lg-radius1 radius">
    <div class="sm-radius2 radius"></div>
    <div class="sm-radius1 radius"></div>
    <div class="md-radius2 radius"></div>
    <div class="md-radius1 radius"></div>
    <div class="lg-radius2 radius"></div>
  </div>
</body>
</html>

上面的程式碼實現了太極圖的效果，下面介紹一下它的實現過程。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
body {
  background: #999;
}

設定body元素的背景顏色，也就是我們所看到的灰色。

[CSS] 純文字檢視 複製程式碼
.radius {
  border-radius: 50%;
}

程式碼可以設定元素為圓角，這裡之所以單獨設定一個class類，是為了提高程式碼複用。

[CSS] 純文字檢視 複製程式碼
.lg-radius1 {
  width: 200px;
  height: 400px;
  position: relative;
  margin: 50px auto;
  border-left: 200px solid #000;
}

這個實現了太極圖的左半部分的黑色區域，其實繪製的也是一個整圓，只不過沒有背景色而已。

程式碼演示如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body {
  background: #999;
}
.radius {
  border-radius: 50%;
}
.lg-radius1 {
  width: 200px;
  height: 400px;
  position: relative;
  margin: 50px auto;
  border-left: 200px solid #000;
  background-color:red;
}
</style>
</head>
<body>
  <div class="lg-radius1 radius">
  </div>
</body>
</html>

為了便於觀察，我們將元素背景色設定為紅色，效果截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/07/100618j81hnny65g4e5ghx.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

具體原理可以參閱border-radius帶border邊框情況一章節。

[CSS] 純文字檢視 複製程式碼
.lg-radius2 {
  width: 200px;
  height: 400px;
  border-right: 200px solid #fff;
  position: absolute;
  right: 0;
  top: 0;
}

這是太極圖的右半部分，和上面的左邊部分實現原理是一樣的。

它只是被巢狀在了lg-radius1元素之內，然後採用定位方式將其定位於右部。

[CSS] 純文字檢視 複製程式碼
.md-radius1 {
  width: 100px;
  height: 200px;
  position: absolute;
  z-index: 3;
  left: -100px;
  top: 0;
  border-left: 100px solid #FFF;
}

繪製了白色的中等大小的圓，繪製原理和上面大圓是相同的。

後面大多都是重複的內容，即便不重複也是非常的簡單，就不再做介紹了。

相關文章