CSS3 太陽系星球旋轉效果

admin發表於2017-11-27
CSSS3

分享一段程式碼例項，它利用CSS3模擬實現了太陽系星球相互環繞旋轉效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
*{
  margin: 0;
  padding: 0;
}
body{
  background-color: #000;
}
div{
  border-radius: 50%;
}
.sun{
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width: 100px;
  height: 100px;
  background-color: yellow;
  border-radius: 50%;
  box-shadow: 0 0 20px 1px red;
}
/*地球*/
.earth{
  position: absolute;
  width: 180px;
  height: 180px;
  border: 1px solid #fff;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
  animation: autoPlay 3s linear infinite ;
}
.earth::before{
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  top: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background-color: deepskyblue;
  box-shadow:0px 0px 10px 1px blue ;
}
/*月球*/
.moon{
  position: absolute;
  width: 60px;
  height: 60px;
  transform: translate(-50%,-50%);
  top: 50%;
  animation: autoPlay 2s linear infinite ;
}
.moon::before{
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  background-color: #fff;
  box-shadow:0px 0px 10px 1px #fff ;
}
/*火星*/
.mark{
  position: absolute;
  width: 320px;
  height: 320px;
  border: 1px solid #fff;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
  animation: autoPlay 6s linear infinite ;
}
.mark::before{
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background-color: red;
  box-shadow:0px 0px 10px 1px #ff5227;
}
/*金星*/
.vnues{
  position: absolute;
  width: 500px;
  height: 500px;
  border: 1px solid #fff;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
  animation: autoPlay 8s linear infinite ;
}
.vnues::before{
  content: '';
  position: absolute;
  width: 70px;
  height: 70px;
  top: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background-color: gold;
  box-shadow:0px 0px 10px 1px #fff232;
}
@keyframes autoPlay {
  0%{
    transform: translate(-50%,-50%) rotate(0deg)  ;
  }
  100%{
    transform: translate(-50%,-50%) rotate(360deg) ;
  }
}
</style>
</head>
<body>
<div class="sun"></div>
<div class="earth">
    <div class="moon"></div>
</div>
<div class="mark"></div>
<div class="vnues"></div>
</body>
</html>

上面程式碼實現了預期效果，下面介紹一下它的實現過程。

[CSS] 純文字檢視 複製程式碼
*{
  margin: 0;
  padding: 0;
}

簡單初始化效果，將所有元素內邊距和外邊距設定為0。

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

設定body的背景顏色。

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

將所有的div元素都設定為圓形，這裡星球和星系軌道都設定為圓的。

[CSS] 純文字檢視 複製程式碼
.sun{
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width: 100px;
  height: 100px;
  background-color: yellow;
  border-radius: 50%;
  box-shadow: 0 0 20px 1px red;
}

實現了中心的太陽效果。

將其設定為絕對定位，然後left和top值都為50%，這樣元素的左上角（假設為矩形）處於body的中心位置。

transform:translate(-50%,-50%)將位置再分別向左和向上移動一半的寬度和高度，元素就中心居中了。

最後通過box-shadow將其設定的有點發光效果。

[CSS] 純文字檢視 複製程式碼
.earth{
  position: absolute;
  width: 180px;
  height: 180px;
  border: 1px solid #fff;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
  animation: autoPlay 3s linear infinite ;
}

地球執行的軌道，視覺上是地球在旋轉，實際上是這個軌道在旋轉。

軌道和太陽形成了同心圓，實現原理是相同的。

最後以動畫方式實現此軌道每3秒旋轉一圈。

[CSS] 純文字檢視 複製程式碼
.earth::before{
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  top: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background-color: deepskyblue;
  box-shadow:0px 0px 10px 1px blue ;
}

通過偽元素選擇器，在軌道上新增藍色地球。

它是絕對定位，這樣位移參考物件就是它的父元素，也就是地球軌道。

然後通過定位和transform將其圓心定位到軌道的左側；軌道的旋轉達成了視覺上地球的旋轉。

二.相關閱讀:

（1）.border-radius參閱CSS3 border-radius一章節。

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

（3）.transform參閱CSS3 transform一章節。

（4）.box-shadow參閱CSS3 box-shadow一章節。

（5）.animation參閱CSS3 animation一章節。

（6）.@keyframes參閱CSS3 @keyframes一章節。

相關文章