css实现太空飞船弹射动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css实现太空飞船弹射动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
  margin: 0;
  overflow: hidden;
}

sky {
  display: block;
  background: black;
  width: 100vw;
  height: 100vh;
}

star {
  border-radius: 50%;
  background: white;
  position: absolute;
  -webkit-animation: star linear infinite;
          animation: star linear infinite;
}
star:nth-child(1) {
  width: 4px;
  height: 4px;
  -webkit-animation-duration: 29s;
          animation-duration: 29s;
  -webkit-animation-delay: -14s;
          animation-delay: -14s;
  top: 91vh;
}
star:nth-child(2) {
  width: 6px;
  height: 6px;
  -webkit-animation-duration: 32s;
          animation-duration: 32s;
  -webkit-animation-delay: -19s;
          animation-delay: -19s;
  top: 70vh;
}
star:nth-child(3) {
  width: 8px;
  height: 8px;
  -webkit-animation-duration: 27s;
          animation-duration: 27s;
  -webkit-animation-delay: -14s;
          animation-delay: -14s;
  top: 47vh;
}
star:nth-child(4) {
  width: 5px;
  height: 5px;
  -webkit-animation-duration: 42s;
          animation-duration: 42s;
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
  top: 7vh;
}
star:nth-child(5) {
  width: 6px;
  height: 6px;
  -webkit-animation-duration: 39s;
          animation-duration: 39s;
  -webkit-animation-delay: -8s;
          animation-delay: -8s;
  top: 64vh;
}
star:nth-child(6) {
  width: 9px;
  height: 9px;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
  top: 47vh;
}
star:nth-child(7) {
  width: 10px;
  height: 10px;
  -webkit-animation-duration: 29s;
          animation-duration: 29s;
  -webkit-animation-delay: -20s;
          animation-delay: -20s;
  top: 27vh;
}
star:nth-child(8) {
  width: 9px;
  height: 9px;
  -webkit-animation-duration: 33s;
          animation-duration: 33s;
  -webkit-animation-delay: -15s;
          animation-delay: -15s;
  top: 43vh;
}
star:nth-child(9) {
  width: 7px;
  height: 7px;
  -webkit-animation-duration: 36s;
          animation-duration: 36s;
  -webkit-animation-delay: -29s;
          animation-delay: -29s;
  top: 21vh;
}
star:nth-child(10) {
  width: 9px;
  height: 9px;
  -webkit-animation-duration: 27s;
          animation-duration: 27s;
  -webkit-animation-delay: -21s;
          animation-delay: -21s;
  top: 18vh;
}
star:nth-child(11) {
  width: 10px;
  height: 10px;
  -webkit-animation-duration: 31s;
          animation-duration: 31s;
  -webkit-animation-delay: -36s;
          animation-delay: -36s;
  top: 65vh;
}
star:nth-child(12) {
  width: 7px;
  height: 7px;
  -webkit-animation-duration: 44s;
          animation-duration: 44s;
  -webkit-animation-delay: -16s;
          animation-delay: -16s;
  top: 95vh;
}
star:nth-child(13) {
  width: 9px;
  height: 9px;
  -webkit-animation-duration: 44s;
          animation-duration: 44s;
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
  top: 87vh;
}
star:nth-child(14) {
  width: 9px;
  height: 9px;
  -webkit-animation-duration: 17s;
          animation-duration: 17s;
  -webkit-animation-delay: -9s;
          animation-delay: -9s;
  top: 21vh;
}
star:nth-child(15) {
  width: 4px;
  height: 4px;
  -webkit-animation-duration: 24s;
          animation-duration: 24s;
  -webkit-animation-delay: -35s;
          animation-delay: -35s;
  top: 80vh;
}
star:nth-child(16) {
  width: 8px;
  height: 8px;
  -webkit-animation-duration: 26s;
          animation-duration: 26s;
  -webkit-animation-delay: -11s;
          animation-delay: -11s;
  top: 85vh;
}
star:nth-child(17) {
  width: 5px;
  height: 5px;
  -webkit-animation-duration: 26s;
          animation-duration: 26s;
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
  top: 67vh;
}
star:nth-child(18) {
  width: 4px;
  height: 4px;
  -webkit-animation-duration: 17s;
          animation-duration: 17s;
  -webkit-animation-delay: -22s;
          animation-delay: -22s;
  top: 46vh;
}
star:nth-child(19) {
  width: 9px;
  height: 9px;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
  -webkit-animation-delay: -17s;
          animation-delay: -17s;
  top: 92vh;
}
star:nth-child(20) {
  width: 10px;
  height: 10px;
  -webkit-animation-duration: 16s;
          animation-duration: 16s;
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
  top: 6vh;
}
star:nth-child(21) {
  width: 4px;
  height: 4px;
  -webkit-animation-duration: 22s;
          animation-duration: 22s;
  -webkit-animation-delay: -39s;
          animation-delay: -39s;
  top: 49vh;
}
star:nth-child(22) {
  width: 10px;
  height: 10px;
  -webkit-animation-duration: 24s;
          animation-duration: 24s;
  -webkit-animation-delay: -7s;
          animation-delay: -7s;
  top: 83vh;
}
star:nth-child(23) {
  width: 4px;
  height: 4px;
  -webkit-animation-duration: 18s;
          animation-duration: 18s;
  -webkit-animation-delay: -6s;
          animation-delay: -6s;
  top: 11vh;
}
star:nth-child(24) {
  width: 7px;
  height: 7px;
  -webkit-animation-duration: 45s;
          animation-duration: 45s;
  -webkit-animation-delay: -20s;
          animation-delay: -20s;
  top: 49vh;
}
star:nth-child(25) {
  width: 10px;
  height: 10px;
  -webkit-animation-duration: 27s;
          animation-duration: 27s;
  -webkit-animation-delay: -4s;
          animation-delay: -4s;
  top: 89vh;
}
star:nth-child(26) {
  width: 5px;
  height: 5px;
  -webkit-animation-duration: 30s;
          animation-duration: 30s;
  -webkit-animation-delay: -10s;
          animation-delay: -10s;
  top: 10vh;
}
star:nth-child(27) {
  width: 8px;
  height: 8px;
  -webkit-animation-duration: 28s;
          animation-duration: 28s;
  -webkit-animation-delay: -29s;
          animation-delay: -29s;
  top: 31vh;
}
star:nth-child(28) {
  width: 9px;
  height: 9px;
  -webkit-animation-duration: 39s;
          animation-duration: 39s;
  -webkit-animation-delay: -34s;
          animation-delay: -34s;
  top: 11vh;
}
star:nth-child(29) {
  width: 6px;
  height: 6px;
  -webkit-animation-duration: 35s;
          animation-duration: 35s;
  -webkit-animation-delay: -16s;
          animation-delay: -16s;
  top: 49vh;
}
star:nth-child(30) {
  width: 7px;
  height: 7px;
  -webkit-animation-duration: 30s;
          animation-duration: 30s;
  -webkit-animation-delay: -18s;
          animation-delay: -18s;
  top: 48vh;
}
star:nth-child(31) {
  width: 6px;
  height: 6px;
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
  -webkit-animation-delay: -34s;
          animation-delay: -34s;
  top: 59vh;
}
star:nth-child(32) {
  width: 6px;
  height: 6px;
  -webkit-animation-duration: 22s;
          animation-duration: 22s;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  top: 65vh;
}
star:nth-child(33) {
  width: 5px;
  height: 5px;
  -webkit-animation-duration: 25s;
          animation-duration: 25s;
  -webkit-animation-delay: -25s;
          animation-delay: -25s;
  top: 75vh;
}
star:nth-child(34) {
  width: 4px;
  height: 4px;
  -webkit-animation-duration: 24s;
          animation-duration: 24s;
  -webkit-animation-delay: -16s;
          animation-delay: -16s;
  top: 90vh;
}
star:nth-child(35) {
  width: 7px;
  height: 7px;
  -webkit-animation-duration: 23s;
          animation-duration: 23s;
  -webkit-animation-delay: -17s;
          animation-delay: -17s;
  top: 1vh;
}
star:nth-child(36) {
  width: 5px;
  height: 5px;
  -webkit-animation-duration: 17s;
          animation-duration: 17s;
  -webkit-animation-delay: -37s;
          animation-delay: -37s;
  top: 84vh;
}
star:nth-child(37) {
  width: 6px;
  height: 6px;
  -webkit-animation-duration: 33s;
          animation-duration: 33s;
  -webkit-animation-delay: -17s;
          animation-delay: -17s;
  top: 94vh;
}
star:nth-child(38) {
  width: 4px;
  height: 4px;
  -webkit-animation-duration: 43s;
          animation-duration: 43s;
  -webkit-animation-delay: -19s;
          animation-delay: -19s;
  top: 69vh;
}
star:nth-child(39) {
  width: 7px;
  height: 7px;
  -webkit-animation-duration: 43s;
          animation-duration: 43s;
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
  top: 5vh;
}
star:nth-child(40) {
  width: 4px;
  height: 4px;
  -webkit-animation-duration: 19s;
          animation-duration: 19s;
  -webkit-animation-delay: -17s;
          animation-delay: -17s;
  top: 75vh;
}
star:nth-child(41) {
  width: 8px;
  height: 8px;
  -webkit-animation-duration: 43s;
          animation-duration: 43s;
  -webkit-animation-delay: -35s;
          animation-delay: -35s;
  top: 99vh;
}
star:nth-child(42) {
  width: 10px;
  height: 10px;
  -webkit-animation-duration: 21s;
          animation-duration: 21s;
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
  top: 50vh;
}
star:nth-child(43) {
  width: 8px;
  height: 8px;
  -webkit-animation-duration: 27s;
          animation-duration: 27s;
  -webkit-animation-delay: -6s;
          animation-delay: -6s;
  top: 18vh;
}
star:nth-child(44) {
  width: 6px;
  height: 6px;
  -webkit-animation-duration: 23s;
          animation-duration: 23s;
  -webkit-animation-delay: -10s;
          animation-delay: -10s;
  top: 63vh;
}
star:nth-child(45) {
  width: 7px;
  height: 7px;
  -webkit-animation-duration: 27s;
          animation-duration: 27s;
  -webkit-animation-delay: -25s;
          animation-delay: -25s;
  top: 64vh;
}
star:nth-child(46) {
  width: 7px;
  height: 7px;
  -webkit-animation-duration: 36s;
          animation-duration: 36s;
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
  top: 80vh;
}
star:nth-child(47) {
  width: 4px;
  height: 4px;
  -webkit-animation-duration: 39s;
          animation-duration: 39s;
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
  top: 80vh;
}
star:nth-child(48) {
  width: 7px;
  height: 7px;
  -webkit-animation-duration: 33s;
          animation-duration: 33s;
  -webkit-anima.........完整代码请登录后点击上方下载按钮下载查看