纯css实现多个烟花绽放动画效果-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：纯css实现多个烟花绽放动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<style>
body {
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
  font-family: 'Anton', sans-serif;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  -webkit-perspective: 600px;
          perspective: 600px;
}

div {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.camera.-y {
  -webkit-animation: rotate 30s linear infinite;
          animation: rotate 30s linear infinite;
}

.fireworks:nth-child(1) {
  -webkit-transform: translate3d(0, -200px, 100px);
          transform: translate3d(0, -200px, 100px);
  --color: rgb(250, 40, 40);
}
.fireworks:nth-child(2) {
  -webkit-transform: translate3d(160px, -100px, -160px);
          transform: translate3d(160px, -100px, -160px);
  --color: rgb(50, 240, 40);
}
.fireworks:nth-child(2) .line .spark {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}
.fireworks:nth-child(3) {
  -webkit-transform: translate3d(-160px, 0, -160px);
          transform: translate3d(-160px, 0, -160px);
  --color: rgb(50, 80, 250);
}
.fireworks:nth-child(3) .line .spark {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}

.spark {
  position: absolute;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
}

.fire {
  position: absolute;
  left: -3px;
  width: 5px;
  height: 5px;
  background: #fa2828;
}
.fire::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #e6c828;
  -webkit-transform: translateZ(0.1px);
          transform: translateZ(0.1px);
}

.line:nth-child(1) {
  -webkit-transform: rotateY(190deg);
          transform: rotateY(190deg);
}
.line:nth-child(1) .spark {
  -webkit-animation: spark1 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark1 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(1) .fire {
  -webkit-animation: fire 1694ms -873ms linear infinite;
          animation: fire 1694ms -873ms linear infinite;
}
@-webkit-keyframes spark1 {
  0% {
    -webkit-transform: translateY(510px);
            transform: translateY(510px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(355deg) translateX(180px);
            transform: rotateZ(355deg) translateX(180px);
  }
}
@keyframes spark1 {
  0% {
    -webkit-transform: translateY(510px);
            transform: translateY(510px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(355deg) translateX(180px);
            transform: rotateZ(355deg) translateX(180px);
  }
}
.line:nth-child(2) {
  -webkit-transform: rotateY(1deg);
          transform: rotateY(1deg);
}
.line:nth-child(2) .spark {
  -webkit-animation: spark2 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark2 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(2) .fire {
  -webkit-animation: fire 1110ms -284ms linear infinite;
          animation: fire 1110ms -284ms linear infinite;
}
@-webkit-keyframes spark2 {
  0% {
    -webkit-transform: translateY(551px);
            transform: translateY(551px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(190deg) translateX(271px);
            transform: rotateZ(190deg) translateX(271px);
  }
}
@keyframes spark2 {
  0% {
    -webkit-transform: translateY(551px);
            transform: translateY(551px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(190deg) translateX(271px);
            transform: rotateZ(190deg) translateX(271px);
  }
}
.line:nth-child(3) {
  -webkit-transform: rotateY(107deg);
          transform: rotateY(107deg);
}
.line:nth-child(3) .spark {
  -webkit-animation: spark3 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark3 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(3) .fire {
  -webkit-animation: fire 1221ms -791ms linear infinite;
          animation: fire 1221ms -791ms linear infinite;
}
@-webkit-keyframes spark3 {
  0% {
    -webkit-transform: translateY(638px);
            transform: translateY(638px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(24deg) translateX(171px);
            transform: rotateZ(24deg) translateX(171px);
  }
}
@keyframes spark3 {
  0% {
    -webkit-transform: translateY(638px);
            transform: translateY(638px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(24deg) translateX(171px);
            transform: rotateZ(24deg) translateX(171px);
  }
}
.line:nth-child(4) {
  -webkit-transform: rotateY(72deg);
          transform: rotateY(72deg);
}
.line:nth-child(4) .spark {
  -webkit-animation: spark4 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark4 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(4) .fire {
  -webkit-animation: fire 1925ms -9ms linear infinite;
          animation: fire 1925ms -9ms linear infinite;
}
@-webkit-keyframes spark4 {
  0% {
    -webkit-transform: translateY(650px);
            transform: translateY(650px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(136deg) translateX(166px);
            transform: rotateZ(136deg) translateX(166px);
  }
}
@keyframes spark4 {
  0% {
    -webkit-transform: translateY(650px);
            transform: translateY(650px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(136deg) translateX(166px);
            transform: rotateZ(136deg) translateX(166px);
  }
}
.line:nth-child(5) {
  -webkit-transform: rotateY(319deg);
          transform: rotateY(319deg);
}
.line:nth-child(5) .spark {
  -webkit-animation: spark5 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark5 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(5) .fire {
  -webkit-animation: fire 1699ms -132ms linear infinite;
          animation: fire 1699ms -132ms linear infinite;
}
@-webkit-keyframes spark5 {
  0% {
    -webkit-transform: translateY(580px);
            transform: translateY(580px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(141deg) translateX(111px);
            transform: rotateZ(141deg) translateX(111px);
  }
}
@keyframes spark5 {
  0% {
    -webkit-transform: translateY(580px);
            transform: translateY(580px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(141deg) translateX(111px);
            transform: rotateZ(141deg) translateX(111px);
  }
}
.line:nth-child(6) {
  -webkit-transform: rotateY(25deg);
          transform: rotateY(25deg);
}
.line:nth-child(6) .spark {
  -webkit-animation: spark6 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark6 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(6) .fire {
  -webkit-animation: fire 1416ms -145ms linear infinite;
          animation: fire 1416ms -145ms linear infinite;
}
@-webkit-keyframes spark6 {
  0% {
    -webkit-transform: translateY(580px);
            transform: translateY(580px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(110deg) translateX(174px);
            transform: rotateZ(110deg) translateX(174px);
  }
}
@keyframes spark6 {
  0% {
    -webkit-transform: translateY(580px);
            transform: translateY(580px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(110deg) translateX(174px);
            transform: rotateZ(110deg) translateX(174px);
  }
}
.line:nth-child(7) {
  -webkit-transform: rotateY(228deg);
          transform: rotateY(228deg);
}
.line:nth-child(7) .spark {
  -webkit-animation: spark7 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark7 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(7) .fire {
  -webkit-animation: fire 1830ms -74ms linear infinite;
          animation: fire 1830ms -74ms linear infinite;
}
@-webkit-keyframes spark7 {
  0% {
    -webkit-transform: translateY(624px);
            transform: translateY(624px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(149deg) translateX(281px);
            transform: rotateZ(149deg) translateX(281px);
  }
}
@keyframes spark7 {
  0% {
    -webkit-transform: translateY(624px);
            transform: translateY(624px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(149deg) translateX(281px);
            transform: rotateZ(149deg) translateX(281px);
  }
}
.line:nth-child(8) {
  -webkit-transform: rotateY(285deg);
          transform: rotateY(285deg);
}
.line:nth-child(8) .spark {
  -webkit-animation: spark8 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark8 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(8) .fire {
  -webkit-animation: fire 1714ms -435ms linear infinite;
          animation: fire 1714ms -435ms linear infinite;
}
@-webkit-keyframes spark8 {
  0% {
    -webkit-transform: translateY(526px);
            transform: translateY(526px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(160deg) translateX(282px);
            transform: rotateZ(160deg) translateX(282px);
  }
}
@keyframes spark8 {
  0% {
    -webkit-transform: translateY(526px);
            transform: translateY(526px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(160deg) translateX(282px);
            transform: rotateZ(160deg) translateX(282px);
  }
}
.line:nth-child(9) {
  -webkit-transform: rotateY(325deg);
          transform: rotateY(325deg);
}
.line:nth-child(9) .spark {
  -webkit-animation: spark9 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark9 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(9) .fire {
  -webkit-animation: fire 1800ms -572ms linear infinite;
          animation: fire 1800ms -572ms linear infinite;
}
@-webkit-keyframes spark9 {
  0% {
    -webkit-transform: translateY(546px);
            transform: translateY(546px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(357deg) translateX(190px);
            transform: rotateZ(357deg) translateX(190px);
  }
}
@keyframes spark9 {
  0% {
    -webkit-transform: translateY(546px);
            transform: translateY(546px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(357deg) translateX(190px);
            transform: rotateZ(357deg) translateX(190px);
  }
}
.line:nth-child(10) {
  -webkit-transform: rotateY(12deg);
          transform: rotateY(12deg);
}
.line:nth-child(10) .spark {
  -webkit-animation: spark10 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark10 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(10) .fire {
  -webkit-animation: fire 1785ms -362ms linear infinite;
          animation: fire 1785ms -362ms linear infinite;
}
@-webkit-keyframes spark10 {
  0% {
    -webkit-transform: translateY(540px);
            transform: translateY(540px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(346deg) translateX(138px);
            transform: rotateZ(346deg) translateX(138px);
  }
}
@keyframes spark10 {
  0% {
    -webkit-transform: translateY(540px);
            transform: translateY(540px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(346deg) translateX(138px);
            transform: rotateZ(346deg) translateX(138px);
  }
}
.line:nth-child(11) {
  -webkit-transform: rotateY(1deg);
          transform: rotateY(1deg);
}
.line:nth-child(11) .spark {
  -webkit-animation: spark11 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark11 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(11) .fire {
  -webkit-animation: fire 1011ms -531ms linear infinite;
          animation: fire 1011ms -531ms linear infinite;
}
@-webkit-keyframes spark11 {
  0% {
    -webkit-transform: translateY(540px);
            transform: translateY(540px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(8deg) translateX(128px);
            transform: rotateZ(8deg) translateX(128px);
  }
}
@keyframes spark11 {
  0% {
    -webkit-transform: translateY(540px);
            transform: translateY(540px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(8deg) translateX(128px);
            transform: rotateZ(8deg) translateX(128px);
  }
}
.line:nth-child(12) {
  -webkit-transform: rotateY(114deg);
          transform: rotateY(114deg);
}
.line:nth-child(12) .spark {
  -webkit-animation: spark12 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark12 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(12) .fire {
  -webkit-animation: fire 1671ms -994ms linear infinite;
          animation: fire 1671ms -994ms linear infinite;
}
@-webkit-keyframes spark12 {
  0% {
    -webkit-transform: translateY(640px);
            transform: translateY(640px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(302deg) translateX(286px);
            transform: rotateZ(302deg) translateX(286px);
  }
}
@keyframes spark12 {
  0% {
    -webkit-transform: translateY(640px);
            transform: translateY(640px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(302deg) translateX(286px);
            transform: rotateZ(302deg) translateX(286px);
  }
}
.line:nth-child(13) {
  -webkit-transform: rotateY(310deg);
          transform: rotateY(310deg);
}
.line:nth-child(13) .spark {
  -webkit-animation: spark13 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark13 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(13) .fire {
  -webkit-animation: fire 1853ms -371ms linear infinite;
          animation: fire 1853ms -371ms linear infinite;
}
@-webkit-keyframes spark13 {
  0% {
    -webkit-transform: translateY(563px);
            transform: translateY(563px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(53deg) translateX(250px);
            transform: rotateZ(53deg) translateX(250px);
  }
}
@keyframes spark13 {
  0% {
    -webkit-transform: translateY(563px);
            transform: translateY(563px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(53deg) translateX(250px);
            transform: rotateZ(53deg) translateX(250px);
  }
}
.line:nth-child(14) {
  -webkit-transform: rotateY(290deg);
          transform: rotateY(290deg);
}
.line:nth-child(14) .spark {
  -webkit-animation: spark14 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark14 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(14) .fire {
  -webkit-animation: fire 1476ms -917ms linear infinite;
          animation: fire 1476ms -917ms linear infinite;
}
@-webkit-keyframes spark14 {
  0% {
    -webkit-transform: translateY(625px);
            transform: translateY(625px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(34deg) translateX(200px);
            transform: rotateZ(34deg) translateX(200px);
  }
}
@keyframes spark14 {
  0% {
    -webkit-transform: translateY(625px);
            transform: translateY(625px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(34deg) translateX(200px);
            transform: rotateZ(34deg) translateX(200px);
  }
}
.line:nth-child(15) {
  -webkit-transform: rotateY(145deg);
          transform: rotateY(145deg);
}
.line:nth-child(15) .spark {
  -webkit-animation: spark15 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark15 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(15) .fire {
  -webkit-animation: fire 1244ms -765ms linear infinite;
          animation: fire 1244ms -765ms linear infinite;
}
@-webkit-keyframes spark15 {
  0% {
    -webkit-transform: translateY(639px);
            transform: translateY(639px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(352deg) translateX(292px);
            transform: rotateZ(352deg) translateX(292px);
  }
}
@keyframes spark15 {
  0% {
    -webkit-transform: translateY(639px);
            transform: translateY(639px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(352deg) translateX(292px);
            transform: rotateZ(352deg) translateX(292px);
  }
}
.line:nth-child(16) {
  -webkit-transform: rotateY(158deg);
          transform: rotateY(158deg);
}
.line:nth-child(16) .spark {
  -webkit-animation: spark16 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark16 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(16) .fire {
  -webkit-animation: fire 1851ms -590ms linear infinite;
          animation: fire 1851ms -590ms linear infinite;
}
@-webkit-keyframes spark16 {
  0% {
    -webkit-transform: translateY(531px);
            transform: translateY(531px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(310deg) translateX(113px);
            transform: rotateZ(310deg) translateX(113px);
  }
}
@keyframes spark16 {
  0% {
    -webkit-transform: translateY(531px);
            transform: translateY(531px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(310deg) translateX(113px);
            transform: rotateZ(310deg) translateX(113px);
  }
}
.line:nth-child(17) {
  -webkit-transform: rotateY(211deg);
          transform: rotateY(211deg);
}
.line:nth-child(17) .spark {
  -webkit-animation: spark17 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark17 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(17) .fire {
  -webkit-animation: fire 1466ms -473ms linear infinite;
          animation: fire 1466ms -473ms linear infinite;
}
@-webkit-keyframes spark17 {
  0% {
    -webkit-transform: translateY(502px);
            transform: translateY(502px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(138deg) translateX(214px);
            transform: rotateZ(138deg) translateX(214px);
  }
}
@keyframes spark17 {
  0% {
    -webkit-transform: translateY(502px);
            transform: translateY(502px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(138deg) translateX(214px);
            transform: rotateZ(138deg) translateX(214px);
  }
}
.line:nth-child(18) {
  -webkit-transform: rotateY(351deg);
          transform: rotateY(351deg);
}
.line:nth-child(18) .spark {
  -webkit-animation: spark18 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark18 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(18) .fire {
  -webkit-animation: fire 1801ms -50ms linear infinite;
          animation: fire 1801ms -50ms linear infinite;
}
@-webkit-keyframes spark18 {
  0% {
    -webkit-transform: translateY(551px);
            transform: translateY(551px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(225deg) translateX(161px);
            transform: rotateZ(225deg) translateX(161px);
  }
}
@keyframes spark18 {
  0% {
    -webkit-transform: translateY(551px);
            transform: translateY(551px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(225deg) translateX(161px);
            transform: rotateZ(225deg) translateX(161px);
  }
}
.line:nth-child(19) {
  -webkit-transform: rotateY(228deg);
          transform: rotateY(228deg);
}
.line:nth-child(19) .spark {
  -webkit-animation: spark19 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark19 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(19) .fire {
  -webkit-animation: fire 1362ms -991ms linear infinite;
          animation: fire 1362ms -991ms linear infinite;
}
@-webkit-keyframes spark19 {
  0% {
    -webkit-transform: translateY(586px);
            transform: translateY(586px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(168deg) translateX(114px);
            transform: rotateZ(168deg) translateX(114px);
  }
}
@keyframes spark19 {
  0% {
    -webkit-transform: translateY(586px);
            transform: translateY(586px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(168deg) translateX(114px);
            transform: rotateZ(168deg) translateX(114px);
  }
}
.line:nth-child(20) {
  -webkit-transform: rotateY(58deg);
          transform: rotateY(58deg);
}
.line:nth-child(20) .spark {
  -webkit-animation: spark20 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark20 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(20) .fire {
  -webkit-animation: fire 1364ms -636ms linear infinite;
          animation: fire 1364ms -636ms linear infinite;
}
@-webkit-keyframes spark20 {
  0% {
    -webkit-transform: translateY(538px);
            transform: translateY(538px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(97deg) translateX(231px);
            transform: rotateZ(97deg) translateX(231px);
  }
}
@keyframes spark20 {
  0% {
    -webkit-transform: translateY(538px);
            transform: translateY(538px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(97deg) translateX(231px);
            transform: rotateZ(97deg) translateX(231px);
  }
}
.line:nth-child(21) {
  -webkit-transform: rotateY(267deg);
          transform: rotateY(267deg);
}
.line:nth-child(21) .spark {
  -webkit-animation: spark21 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark21 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(21) .fire {
  -webkit-animation: fire 1740ms -798ms linear infinite;
          animation: fire 1740ms -798ms linear infinite;
}
@-webkit-keyframes spark21 {
  0% {
    -webkit-transform: translateY(629px);
            transform: translateY(629px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(357deg) translateX(169px);
            transform: rotateZ(357deg) translateX(169px);
  }
}
@keyframes spark21 {
  0% {
    -webkit-transform: translateY(629px);
            transform: translateY(629px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(357deg) translateX(169px);
            transform: rotateZ(357deg) translateX(169px);
  }
}
.line:nth-child(22) {
  -webkit-transform: rotateY(188deg);
          transform: rotateY(188deg);
}
.line:nth-child(22) .spark {
  -webkit-animation: spark22 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark22 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(22) .fire {
  -webkit-animation: fire 1132ms -81ms linear infinite;
          animation: fire 1132ms -81ms linear infinite;
}
@-webkit-keyframes spark22 {
  0% {
    -webkit-transform: translateY(633px);
            transform: translateY(633px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(253deg) translateX(253px);
            transform: rotateZ(253deg) translateX(253px);
  }
}
@keyframes spark22 {
  0% {
    -webkit-transform: translateY(633px);
            transform: translateY(633px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(253deg) translateX(253px);
            transform: rotateZ(253deg) translateX(253px);
  }
}
.line:nth-child(23) {
  -webkit-transform: rotateY(194deg);
          transform: rotateY(194deg);
}
.line:nth-child(23) .spark {
  -webkit-animation: spark23 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark23 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(23) .fire {
  -webkit-animation: fire 1562ms -518ms linear infinite;
          animation: fire 1562ms -518ms linear infinite;
}
@-webkit-keyframes spark23 {
  0% {
    -webkit-transform: translateY(625px);
            transform: translateY(625px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(324deg) translateX(212px);
            transform: rotateZ(324deg) translateX(212px);
  }
}
@keyframes spark23 {
  0% {
    -webkit-transform: translateY(625px);
            transform: translateY(625px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(324deg) translateX(212px);
            transform: rotateZ(324deg) translateX(212px);
  }
}
.line:nth-child(24) {
  -webkit-transform: rotateY(276deg);
          transform: rotateY(276deg);
}
.line:nth-child(24) .spark {
  -webkit-animation: spark24 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark24 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(24) .fire {
  -webkit-animation: fire 1759ms -563ms linear infinite;
          animation: fire 1759ms -563ms linear infinite;
}
@-webkit-keyframes spark24 {
  0% {
    -webkit-transform: translateY(647px);
            transform: translateY(647px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(193deg) translateX(157px);
            transform: rotateZ(193deg) translateX(157px);
  }
}
@keyframes spark24 {
  0% {
    -webkit-transform: translateY(647px);
            transform: translateY(647px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(193deg) translateX(157px);
            transform: rotateZ(193deg) translateX(157px);
  }
}
.line:nth-child(25) {
  -webkit-transform: rotateY(216deg);
          transform: rotateY(216deg);
}
.line:nth-child(25) .spark {
  -webkit-animation: spark25 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark25 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(25) .fire {
  -webkit-animation: fire 1209ms -963ms linear infinite;
          animation: fire 1209ms -963ms linear infinite;
}
@-webkit-keyframes spark25 {
  0% {
    -webkit-transform: translateY(507px);
            transform: translateY(507px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(166deg) translateX(196px);
            transform: rotateZ(166deg) translateX(196px);
  }
}
@keyframes spark25 {
  0% {
    -webkit-transform: translateY(507px);
            transform: translateY(507px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(166deg) translateX(196px);
            transform: rotateZ(166deg) translateX(196px);
  }
}
.line:nth-child(26) {
  -webkit-transform: rotateY(116deg);
          transform: rotateY(116deg);
}
.line:nth-child(26) .spark {
  -webkit-animation: spark26 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark26 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(26) .fire {
  -webkit-animation: fire 1624ms -551ms linear infinite;
          animation: fire 1624ms -551ms linear infinite;
}
@-webkit-keyframes spark26 {
  0% {
    -webkit-transform: translateY(571px);
            transform: translateY(571px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(41deg) translateX(238px);
            transform: rotateZ(41deg) translateX(238px);
  }
}
@keyframes spark26 {
  0% {
    -webkit-transform: translateY(571px);
            transform: translateY(571px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(41deg) translateX(238px);
            transform: rotateZ(41deg) translateX(238px);
  }
}
.line:nth-child(27) {
  -webkit-transform: rotateY(208deg);
          transform: rotateY(208deg);
}
.line:nth-child(27) .spark {
  -webkit-animation: spark27 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark27 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(27) .fire {
  -webkit-animation: fire 1349ms -948ms linear infinite;
          animation: fire 1349ms -948ms linear infinite;
}
@-webkit-keyframes spark27 {
  0% {
    -webkit-transform: translateY(624px);
            transform: translateY(624px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(64deg) translateX(218px);
            transform: rotateZ(64deg) translateX(218px);
  }
}
@keyframes spark27 {
  0% {
    -webkit-transform: translateY(624px);
            transform: translateY(624px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(64deg) translateX(218px);
            transform: rotateZ(64deg) translateX(218px);
  }
}
.line:nth-child(28) {
  -webkit-transform: rotateY(56deg);
          transform: rotateY(56deg);
}
.line:nth-child(28) .spark {
  -webkit-animation: spark28 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark28 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(28) .fire {
  -webkit-animation: fire 1607ms -784ms linear infinite;
          animation: fire 1607ms -784ms linear infinite;
}
@-webkit-keyframes spark28 {
  0% {
    -webkit-transform: translateY(552px);
            transform: translateY(552px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(67deg) translateX(268px);
            transform: rotateZ(67deg) translateX(268px);
  }
}
@keyframes spark28 {
  0% {
    -webkit-transform: translateY(552px);
            transform: translateY(552px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(67deg) translateX(268px);
            transform: rotateZ(67deg) translateX(268px);
  }
}
.line:nth-child(29) {
  -webkit-transform: rotateY(49deg);
          transform: rotateY(49deg);
}
.line:nth-child(29) .spark {
  -webkit-animation: spark29 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark29 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(29) .fire {
  -webkit-animation: fire 1612ms -611ms linear infinite;
          animation: fire 1612ms -611ms linear infinite;
}
@-webkit-keyframes spark29 {
  0% {
    -webkit-transform: translateY(583px);
            transform: translateY(583px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(315deg) translateX(284px);
            transform: rotateZ(315deg) translateX(284px);
  }
}
@keyframes spark29 {
  0% {
    -webkit-transform: translateY(583px);
            transform: translateY(583px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(315deg) translateX(284px);
            transform: rotateZ(315deg) translateX(284px);
  }
}
.line:nth-child(30) {
  -webkit-transform: rotateY(138deg);
          transform: rotateY(138deg);
}
.line:nth-child(30) .spark {
  -webkit-animation: spark30 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark30 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(30) .fire {
  -webkit-animation: fire 1670ms -996ms linear infinite;
          animation: fire 1670ms -996ms linear infinite;
}
@-webkit-keyframes spark30 {
  0% {
    -webkit-transform: translateY(538px);
            transform: translateY(538px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(269deg) translateX(168px);
            transform: rotateZ(269deg) translateX(168px);
  }
}
@keyframes spark30 {
  0% {
    -webkit-transform: translateY(538px);
            transform: translateY(538px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(269deg) translateX(168px);
            transform: rotateZ(269deg) translateX(168px);
  }
}
.line:nth-child(31) {
  -webkit-transform: rotateY(32deg);
          transform: rotateY(32deg);
}
.line:nth-child(31) .spark {
  -webkit-animation: spark31 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark31 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(31) .fire {
  -webkit-animation: fire 1391ms -931ms linear infinite;
          animation: fire 1391ms -931ms linear infinite;
}
@-webkit-keyframes spark31 {
  0% {
    -webkit-transform: translateY(646px);
            transform: translateY(646px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(283deg) translateX(275px);
            transform: rotateZ(283deg) translateX(275px);
  }
}
@keyframes spark31 {
  0% {
    -webkit-transform: translateY(646px);
            transform: translateY(646px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(283deg) translateX(275px);
            transform: rotateZ(283deg) translateX(275px);
  }
}
.line:nth-child(32) {
  -webkit-transform: rotateY(351deg);
          transform: rotateY(351deg);
}
.line:nth-child(32) .spark {
  -webkit-animation: spark32 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark32 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(32) .fire {
  -webkit-animation: fire 1007ms -934ms linear infinite;
          animation: fire 1007ms -934ms linear infinite;
}
@-webkit-keyframes spark32 {
  0% {
    -webkit-transform: translateY(648px);
            transform: translateY(648px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(155deg) translateX(239px);
            transform: rotateZ(155deg) translateX(239px);
  }
}
@keyframes spark32 {
  0% {
    -webkit-transform: translateY(648px);
            transform: translateY(648px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(155deg) translateX(239px);
            transform: rotateZ(155deg) translateX(239px);
  }
}
.line:nth-child(33) {
  -webkit-transform: rotateY(164deg);
          transform: rotateY(164deg);
}
.line:nth-child(33) .spark {
  -webkit-animation: spark33 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark33 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(33) .fire {
  -webkit-animation: fire 1797ms -116ms linear infinite;
          animation: fire 1797ms -116ms linear infinite;
}
@-webkit-keyframes spark33 {
  0% {
    -webkit-transform: translateY(595px);
            transform: translateY(595px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(246deg) translateX(237px);
            transform: rotateZ(246deg) translateX(237px);
  }
}
@keyframes spark33 {
  0% {
    -webkit-transform: translateY(595px);
            transform: translateY(595px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(246deg) translateX(237px);
            transform: rotateZ(246deg) translateX(237px);
  }
}
.line:nth-child(34) {
  -webkit-transform: rotateY(153deg);
          transform: rotateY(153deg);
}
.line:nth-child(34) .spark {
  -webkit-animation: spark34 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark34 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(34) .fire {
  -webkit-animation: fire 1396ms -425ms linear infinite;
          animation: fire 1396ms -425ms linear infinite;
}
@-webkit-keyframes spark34 {
  0% {
    -webkit-transform: translateY(517px);
            transform: translateY(517px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(259deg) translateX(225px);
            transform: rotateZ(259deg) translateX(225px);
  }
}
@keyframes spark34 {
  0% {
    -webkit-transform: translateY(517px);
            transform: translateY(517px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(259deg) translateX(225px);
            transform: rotateZ(259deg) translateX(225px);
  }
}
.line:nth-child(35) {
  -webkit-transform: rotateY(96deg);
          transform: rotateY(96deg);
}
.line:nth-child(35) .spark {
  -webkit-animation: spark35 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark35 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(35) .fire {
  -webkit-animation: fire 1673ms -878ms linear infinite;
          animation: fire 1673ms -878ms linear infinite;
}
@-webkit-keyframes spark35 {
  0% {
    -webkit-transform: translateY(621px);
            transform: translateY(621px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(199deg) translateX(255px);
            transform: rotateZ(199deg) translateX(255px);
  }
}
@keyframes spark35 {
  0% {
    -webkit-transform: translateY(621px);
            transform: translateY(621px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(199deg) translateX(255px);
            transform: rotateZ(199deg) translateX(255px);
  }
}
.line:nth-child(36) {
  -webkit-transform: rotateY(36deg);
          transform: rotateY(36deg);
}
.line:nth-child(36) .spark {
  -webkit-animation: spark36 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark36 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(36) .fire {
  -webkit-animation: fire 1597ms -958ms linear infinite;
          animation: fire 1597ms -958ms linear infinite;
}
@-webkit-keyframes spark36 {
  0% {
    -webkit-transform: translateY(583px);
            transform: translateY(583px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(82deg) translateX(125px);
            transform: rotateZ(82deg) translateX(125px);
  }
}
@keyframes spark36 {
  0% {
    -webkit-transform: translateY(583px);
            transform: translateY(583px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(82deg) translateX(125px);
            transform: rotateZ(82deg) translateX(125px);
  }
}
.line:nth-child(37) {
  -webkit-transform: rotateY(161deg);
          transform: rotateY(161deg);
}
.line:nth-child(37) .spark {
  -webkit-animation: spark37 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark37 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(37) .fire {
  -webkit-animation: fire 1884ms -947ms linear infinite;
          animation: fire 1884ms -947ms linear infinite;
}
@-webkit-keyframes spark37 {
  0% {
    -webkit-transform: translateY(560px);
            transform: translateY(560px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(294deg) translateX(148px);
            transform: rotateZ(294deg) translateX(148px);
  }
}
@keyframes spark37 {
  0% {
    -webkit-transform: translateY(560px);
            transform: translateY(560px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(294deg) translateX(148px);
            transform: rotateZ(294deg) translateX(148px);
  }
}
.line:nth-child(38) {
  -webkit-transform: rotateY(139deg);
          transform: rotateY(139deg);
}
.line:nth-child(38) .spark {
  -webkit-animation: spark38 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark38 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(38) .fire {
  -webkit-animation: fire 1941ms -473ms linear infinite;
          animation: fire 1941ms -473ms linear infinite;
}
@-webkit-keyframes spark38 {
  0% {
    -webkit-transform: translateY(595px);
            transform: translateY(595px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(44deg) translateX(229px);
            transform: rotateZ(44deg) translateX(229px);
  }
}
@keyframes spark38 {
  0% {
    -webkit-transform: translateY(595px);
            transform: translateY(595px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(44deg) translateX(229px);
            transform: rotateZ(44deg) translateX(229px);
  }
}
.line:nth-child(39) {
  -webkit-transform: rotateY(300deg);
          transform: rotateY(300deg);
}
.line:nth-child(39) .spark {
  -webkit-animation: spark39 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark39 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(39) .fire {
  -webkit-animation: fire 1742ms -918ms linear infinite;
          animation: fire 1742ms -918ms linear infinite;
}
@-webkit-keyframes spark39 {
  0% {
    -webkit-transform: translateY(595px);
            transform: translateY(595px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(168deg) translateX(203px);
            transform: rotateZ(168deg) translateX(203px);
  }
}
@keyframes spark39 {
  0% {
    -webkit-transform: translateY(595px);
            transform: translateY(595px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(168deg) translateX(203px);
            transform: rotateZ(168deg) translateX(203px);
  }
}
.line:nth-child(40) {
  -webkit-transform: rotateY(19deg);
          transform: rotateY(19deg);
}
.line:nth-child(40) .spark {
  -webkit-animation: spark40 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark40 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(40) .fire {
  -webkit-animation: fire 1620ms -970ms linear infinite;
          animation: fire 1620ms -970ms linear infinite;
}
@-webkit-keyframes spark40 {
  0% {
    -webkit-transform: translateY(553px);
            transform: translateY(553px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(259deg) translateX(237px);
            transform: rotateZ(259deg) translateX(237px);
  }
}
@keyframes spark40 {
  0% {
    -webkit-transform: translateY(553px);
            transform: translateY(553px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(259deg) translateX(237px);
            transform: rotateZ(259deg) translateX(237px);
  }
}
.line:nth-child(41) {
  -webkit-transform: rotateY(38deg);
          transform: rotateY(38deg);
}
.line:nth-child(41) .spark {
  -webkit-animation: spark41 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark41 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(41) .fire {
  -webkit-animation: fire 1291ms -263ms linear infinite;
          animation: fire 1291ms -263ms linear infinite;
}
@-webkit-keyframes spark41 {
  0% {
    -webkit-transform: translateY(611px);
            transform: translateY(611px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(150deg) translateX(225px);
            transform: rotateZ(150deg) translateX(225px);
  }
}
@keyframes spark41 {
  0% {
    -webkit-transform: translateY(611px);
            transform: translateY(611px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(150deg) translateX(225px);
            transform: rotateZ(150deg) translateX(225px);
  }
}
.line:nth-child(42) {
  -webkit-transform: rotateY(27deg);
          transform: rotateY(27deg);
}
.line:nth-child(42) .spark {
  -webkit-animation: spark42 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
          animation: spark42 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(42) .fire {
  -webkit-animation: fire 1915ms -721ms linear infinite;
          animation: fire 1915ms -721ms linear infinite;
}
@-webkit-keyframes spark42 {
  0% {
    -webkit-transform: translateY(568px);
            transform: translateY(568px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: rotateZ(290deg) translateX(203px);
            transform: rotateZ(290deg) transla.........完整代码请登录后点击上方下载按钮下载查看