CSS3星系運動效果程式碼例項

antzone發表於2018-07-03
CSSS3

分享一段程式碼例項，它實現了簡單的星系運動效果。

所謂的星系運動簡單的說就是一群行星圍繞一個恆星轉動。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body {
  margin: 0;
  padding: 0;
  background-image: url(bg.jpg);
}
ul {
  width: 600px;
  height: 600px;
  margin: 40px auto;
  position: relative;
  list-style: none;
}
ul li {
  border-radius: 50%;
  position: absolute;
  border: 2px solid #394057;
  top: 50%;
  left: 50%;
  /*水平垂直居中*/
  transform: translate(-50%, -50%);
  /*2 把定義好的動畫應用*/
  animation-name: rotate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
ul li span {
  display: block;
  position: absolute;
  border-radius: 50%;
}
li:nth-child(1) {
  width: 60px;
  height: 60px;
  border: none;
  background-color: #c90;
  box-shadow: 0 0 50px #c90;
  animation-duration: 5s;
}
li:nth-child(2) {
  width: 120px;
  height: 120px;
  animation-duration: 10s;
}
li:nth-child(2) span {
  width: 12px;
  height: 12px;
  top: 25px;
  background-color: yellow;
}
li:nth-child(3) {
  width: 180px;
  height: 180px;
  animation-duration: 20s;
}
li:nth-child(3) span {
  width: 12px;
  height: 12px;
  top: 48px;
  background-color: blue;
}
li:nth-child(4) {
  width: 240px;
  height: 240px;
  animation-duration: 30s;
}
li:nth-child(4) > span {
  width: 12px;
  height: 12px;
  top: 72px;
  background-color: green;
  animation-name: rotate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 1s;
}
li:nth-child(4) > span span {
  width: 6px;
  height: 6px;
  position: absolute;
  top: 16px;
  background-color: yellow;
}
li:nth-child(5) {
  width: 300px;
  height: 300px;
  animation-duration: 2s;
}
li:nth-child(5) span {
  width: 16px;
  height: 16px;
  top: 90px;
  background-color: red;
}
li:nth-child(6) {
  width: 360px;
  height: 360px;
}
li:nth-child(7) {
  width: 420px;
  height: 420px;
}
li:nth-child(8) {
  width: 480px;
  height: 480px;
}
li:nth-child(9) {
  width: 540px;
  height: 540px;
}
li:nth-child(10) {
  width: 600px;
  height: 600px;
}
/*定義動畫*/
@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
</style>
</head>
<body>
  <ul>
    <li></li>
    <li><span></span></li>
    <li><span></span></li>
    <li>
      <span><span></span></span>
    </li>
    <li><span></span></li>
    <li><span></span></li>
    <li>
      <span><span></span></span>
    </li>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
  </ul>
</body>
</html>

相關文章