CSS3動態月食效果詳解

admin發表於2018-09-09
CSSS3

本章節分享一段程式碼例項，它利用CSS3實現了動態的月食效果。

動畫其實比較簡單簡短，需要的朋友可以自行做一下分析，這裡就不多介紹了。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
*{
  margin:0;
  padding:0;
}
body{
  background-color: #000;
}
.moonback{
  width:600px;
  height:600px;
  background-color:#000;
  margin:0 auto;
  position: relative;
}
.moonback::before{
  content:",";
  display:block;
  position:absolute;
  left:200px;
  top:100px;
  
  width:200px;
  height:200px;
  background-color:#ff0;
  border-radius:100px;
}
.moonback::after{
  content:" ";
  display:block;
  position:absolute;
  left:26px;
  top:0px;
  
  width:200px;
  height:200px;
  background-color:#000;
  border-radius:100px;
  
  animation:12s dog linear infinite;
  animation-fill-mode: forwards;
}
  
@-webkit-keyframes dog{
  0%{ 
    left:27px;
    top:0px;
  }
  100%{ 
    left:399px;
    top:216px;
  }
}
@-moz-keyframes dog {
  0%{ 
    left:27px;
    top:0px;
  }
  100%{ 
    left:399px;
    top:216px;
  }
}
@keyframes dog{
  0%{ 
    left:27px;
    top:0px;
  }
  100%{ 
    left:399px;
    top:216px;
  }
}
.star{
  position:absolute;
}
.star::before{
  content:"★";
  display:block;
  position:absolute;
  left:10px;
  top:20px;
  
  width:auto;
  height:auto;
  color:#fff;
  transform:scale(0.5);
  animation:1s starlight linear infinite;
  animation-fill-mode: forwards;
}
.star::after{
  content:"★";
  display:block;
  position:absolute;
  left:40px;
  top:120px;
  
  width:auto;
  height:auto;
  color:#fff;
  transform:scale(0.5);
  animation: 2s starlight linear infinite;
}
@keyframes starlight{
  0%{ 
    transform:scale(0.5);
  }
  100%{ 
    transform:scale(0.1);
  }
} 
</style> 
 </head>
 <body>
  <div class="content">
    <div class="moonback">
      <div class="star" style="top:20px;right:220px;"></div>
      <div class="star" style="top:50px;right:120px;"></div>
      <div class="star" style="top:190px;left:20px;"></div>
      <div class="star" style="top:220px;left:50px;"></div>
    </div>
  </div>
 </body>
</html>

程式碼實現了我們的要求，下面介紹一下效果的實現過程。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
*{
  margin:0;
  padding:0;
}
body{
  background-color: #000;
}

對內編劇和外邊距進行簡單初始化，統一設定為0。

然後將body的背景顏色設定為黑色，也就是夜晚的天空效果。

[CSS] 純文字檢視 複製程式碼
.moonback{
  width:600px;
  height:600px;
  background-color:#000;
  margin:0 auto;
  position: relative;
}

設定效果的真正容器，背景也是黑色，以便於和整個body的背景融合在一起。

通過margin:0 auto將其設定為水平居中。

position: relative將其設定為相對定位，作用會在後面介紹。

[CSS] 純文字檢視 複製程式碼
.moonback::before{
  content:",";
  display:block;
  position:absolute;
  left:200px;
  top:100px;
  
  width:200px;
  height:200px;
  background-color:#ff0;
  border-radius:100px;
}

通過偽元素選擇器，新增那個黃色的月亮。

新建立的偽元素採用絕對定位，又因為它的父元素是相對定位，所以它的定位參考物件是父元素。

[CSS] 純文字檢視 複製程式碼
.moonback::after{
  content:" ";
  display:block;
  position:absolute;
  left:26px;
  top:0px;
  
  width:200px;
  height:200px;
  background-color:#000;
  border-radius:100px;
  
  animation:12s dog linear infinite;
  animation-fill-mode: forwards;
}

採用偽元素選擇器新增那個黑色的運動的陰影（天文知識不好，不知道月食的原理是什麼）。

新建立的偽元素採用絕對定位，又因為它的父元素是相對定位，所以它的定位參考物件是父元素。

最後並且設定了動畫執行效果，具體知識可以參閱相關閱讀。

[CSS] 純文字檢視 複製程式碼
@keyframes dog{
  0%{ 
    left:27px;
    top:0px;
  }
  100%{ 
    left:399px;
    top:216px;
  }
}

控制動畫的位移，關於@keyframes可以參閱後面的相關閱讀。

[CSS] 純文字檢視 複製程式碼
.star{
  position:absolute;
}
.star::before{
  content:"★";
  display:block;
  position:absolute;
  left:10px;
  top:20px;
  
  width:auto;
  height:auto;
  color:#fff;
  transform:scale(0.5);
  animation:1s starlight linear infinite;
  animation-fill-mode: forwards;
}
.star::after{
  content:"★";
  display:block;
  position:absolute;
  left:40px;
  top:120px;
  
  width:auto;
  height:auto;
  color:#fff;
  transform:scale(0.5);
  animation: 2s starlight linear infinite;
}
@keyframes starlight{
  0%{ 
    transform:scale(0.5);
  }
  100%{ 
    transform:scale(0.1);
  }
}

上面程式碼製作星星閃爍效果。

也是通過animation動畫控制星星的縮放，以實現閃爍。

二.相關閱讀:

（1）.::before可以參閱CSS 偽物件選擇符before/E::before一章節。

（2）.border-radius可以參閱CSS3實現圓角效果一章節。

（3）.animation可以參閱CSS3 animation用法一章節。

（4）.animation-fill-mode可以參閱animation-fill-mode一章節。

（5）.相對定位參閱CSS position:relative 相對定位一章節。

（6）.絕對定位參閱CSS position:absolute 絕對定位一章節。

相關文章