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;
 .........完整代码请登录后点击上方下载按钮下载查看