css地球月亮太陽環繞旋轉

antzone發表於2018-05-20
CSS

分享一段程式碼例項，它使用css3實現了地球、月亮和太陽圍繞旋轉效果。

程式碼例項如下:

[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: #000;
}
.sun{
  width: 280px;
  height: 280px;
  margin-top: 200px;
  margin-left: 300px;
  border:1px solid #FFA500;
  background:#FFA500;
  border-radius: 50%;
  box-shadow:0px 0px 35px #FFA500;
  animation:action 10s;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
}
@keyframes action{
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg)}
}
.earth{
  border:1px solid #0000CC;
  background:#0000CC;
  box-shadow:0px 0px 35px #0000CC;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: -90px;
  animation:actions 5s;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
}
@keyframes actions{
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg)}
}
.moon{
  border:1px solid #F0F0F0;
  background:#F0F0F0;
  box-shadow:0px 0px 35px #F0F0F0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-left: -20px;                
}                
</style>
</head>
<body>
<div class="sun">  
  <div class="earth">       
    <div class="moon"></div>
  </div>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，更多內容可以參閱相關閱讀。

相關閱讀：

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

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

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

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

相關文章