CSS製作陰陽(偽元素/關鍵幀)

東方來客發表於2018-06-24
CSS

用普通的方法畫出陰陽以及用偽元素做出的一些改進

1.在<body>裡新增div標籤,第一層的<div>用來做外面的大圓.它的兩個子元素<div>標籤用來畫內部的兩個小圓.

html部分

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class = 'yin-yang'>       
    <div class="black"></div>
    <div class="white"></div>
  </div>
</body>
</html>
複製程式碼

css部分

.yin-yang{
  height:300px;
  width:300px;
  border-radius:50%;
  background: linear-gradient(to bottom, #ffffff 50%,#000000 50%,#000000 50%);
}
複製程式碼

第五行裡用到了漸變,產生了一個上白下黑的圓形.

CSS製作陰陽(偽元素/關鍵幀)

2.畫一個小圓,用絕對定位定位它的位置.可在其父元素裡新增position:relative;.

.black{
  position:absolute;
  top:75px;
  background: #ffffff;
  height:20px;
  width:20px;
  border:65px solid;
  border-radius:50%;
}
複製程式碼

小圓設定其height和width為20畫素,背景白色(蓋住父元素的一點黑色

CSS製作陰陽(偽元素/關鍵幀)
),加上一邊65畫素的大黑border正好是大圓的半徑.則小圓的border-top距其父元素75畫素.

3.複製第二步,絕對定位將其定位於父元素的右邊.border的顏色為白色,背景黑色.(設定絕對定位後變為塊級元素)

.white{
  position:absolute;
  top:75px;
  right:0;
  background: #000000;
  height:20px;
  width:20px;
  border:65px solid white;
  border-radius:50%;
} 
複製程式碼

CSS製作陰陽(偽元素/關鍵幀)
你中有我,我中有你的陰陽就完成啦.

接下來用偽元素來實現畫出陰陽圖

html部分

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class = 'triangle'>
    
  </div>
</body>
</html>
複製程式碼

這樣就可以少寫兩個<div>標籤
css部分

.yin-yang::after{
  content:'';
  position:absolute;
  top:75px;
  right:0;
  background: #000000;
  height:20px;
  width:20px;
  border:65px solid white;
  border-radius:50%;
} 
複製程式碼

另一部分做相同改寫即可.需要注意的是這裡必須加一句content:'';(可以加內容但是並不會顯示),否則就不顯示啦.

繼續新增如下程式碼 
@keyframes spin {
  from {
    transform:rotate(0deg)
  }
  to {
    transform:rotate(360deg)
  }
}
複製程式碼

將.yin-yang選擇器的內容改為

.triangle{
  height:300px;
  width:300px;
  border-radius:50%;
  background: linear-gradient(to bottom, #ffffff 50%,#000000 50%,#000000 50%);
  position:relative;
  animation-name:spin;
  animation-duration:3s;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
}
複製程式碼

最後四句的意思依次是引用spin,設定一次動畫的時間為3s,不停的旋轉,線性的旋轉.
預覽傳送門: 春夏秋冬

相關文章