单个div+css实现航天飞机发射升空效果代码-html代码-BFW代码库

单个div+css实现航天飞机发射升空效果代码

代码语言：html

代码描述：单个div+css实现航天飞机发射升空效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


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

<head>

  <meta charset="UTF-8">

  
<style>
html {
  min-height: 400px;
  overflow: scroll;
}
body {
  min-height: 400px;
  height: 100vh;
  position: relative;
  background-color: #483d8b;
  overflow: hidden;
}
div {
  position: absolute;
  left: 50%;
  top: 50%;
}
div:before,
div:after {
  display: block;
  content: '';
  position: absolute;
}
@media (max-width: 400px) {
  div:not(.no-scale) {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
#ship {
  width: 20em;
  height: 30em;
  top: auto;
  margin-left: 1em;
  bottom: -1em;
  background-repeat: no-repeat;
  background-image: radial-gradient(circle, white 60%, rgba(255,255,255,0) 61%), radial-gradient(circle, white 60%, rgba(255,255,255,0) 61%), radial-gradient(circle, white 60%, rgba(255,255,255,0) 61%), radial-gradient(circle, white 60%, rgba(255,255,255,0) 61%), linear-gradient(white, white), linear-gradient(40deg, white 56%, rgba(255,255,255,0) 57%), radial-gradient(circle at 0 50%, #7a6ec0 60%, rgba(72,61,139,0) 60.5%);
  background-size: 3em 3em, 4em 4em, 5em 5em, 3.5em 3.5em, 3.5em 1em, 3.5em 3em, 8em 16em;
  background-position: left 5em bottom -1em, left 7em bottom -1em, left 10em bottom -1em, left 14em bottom -1em, left 0 bottom 14.5em, left 0 bottom 15.5em, left -0.8em center;
  border-bottom-left-radius: 50%;
  box-shadow: -1.1em 2em 0 -1em white, -2.3em 4em 0 -2em #dcd9ee, -4.5em 7em 0 -4em #aba4d7, -6.8em 10em 0 -6em #7a6ec0, -7.2em 20em 0 -6em #7a6ec0;
}
@media screen and (max-width: 400px) {
  #ship {
    bottom: -3.5em;
    margin-left: -1.5em;
  }
}
#ship:before {
  width: 100%;
  height: 1.........完整代码请登录后点击上方下载按钮下载查看