css实现火箭升空动画-html代码-BFW代码库

css实现火箭升空动画

代码语言：html

所属分类：动画

代码描述：css实现火箭升空动画

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  background: #141D39;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

*, *:before, *:after {
  box-sizing: border-box;
}

.window {
  width: 500px;
  height: 500px;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 55%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border: 20px solid #16264B;
  border-radius: 50%;
  background: linear-gradient(to bottom, #1A3864 76.6666666667px, #1B3159 76.6666666667px, #1B3159 153.3333333333px, #1B2C4F 153.3333333333px, #1B2C4F 230px, #182443 230px, #182443 306.6666666667px, #141D39 306.6666666667px, #141D39 383.3333333333px, #1A3863 383.3333333333px);
  overflow: hidden;
}
.window:before, .window:after {
  content: '';
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.window:before {
  box-shadow: 215px 25px 0 0 #fff, 105px -45px 0 0 #fff, 160px -90px 0 0 #fff, 110px -120px 0 -1px #fff, 105px 70px 0 -1px #fff, 145px 105px 0 0 #fff, -190px -85px 0 0 #fff, -150px -50px 0 0 #fff, -160px -130px 0 -1px #fff, -140px 85px 0 0 #fff, -195px 65px 0 0 #fff;
  -webkit-animation: blink 1s ease-in 0s infinite;
          animation: blink 1s ease-in 0s infinite;
}
.window:after {
  box-shadow: 150px 0 0 0 #fff, 200px -65px 0 0 #fff, 130px -170px 0 0 #fff, -160px 20px 0 2px #fff, -215px 5px 0 0 #fff, -110px 15px 0 -1px #fff, -110px -120px 0 0 #fff, -100px -170px 0 0 #fff;
  -webkit-animation: blink 1s ease-in 0.5s infinite;
          animation: blink 1s ease-in 0.5s infinite;
}

.burn {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 60px;
  height: 100px;
  border-radius: 50%;
  background: none;
  bottom: 70px;
  -webkit-animation: flame-spread 0.5s ease-in 0.5s infinite alternate;
          animation: flame-spread 0.5s ease-in 0.5s infinite alternate;
}
.burn:before {
  content: '';
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 40px;
  height: 250px;
  background: -webkit-gradient(linear, left top, right top, color-stop(25%, #FEDA94), color-stop(25%, #FECE5F), color-stop(75%, #FECE5F), color-stop(75%, #FEDA94));
  background: linear-gradient(to right, #FEDA94 25%, #FECE5F 25%, #FECE5F 75%, #FE.........完整代码请登录后点击上方下载按钮下载查看