效果图：

发光泡泡上升效果 主要是通过 css去对div进行圆角设置 以及 动画 然后在js中 通过for循环去创建 div并插入到元素中 配合动画进行 从而达到的一个效果

html：

紧接着就是通过css对我们的元素 进行一个修饰 达到以上的效果 并且单独给每一个设置好不同的 动画时间以及动画延迟 

* {
  padding: 0;
  margin: 0;
}
body {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(to bottom, #101326 70%, #303344 100%);
}
.fireCont {
  position: absolute;
  bottom: -50px;
  left: 0;
  height: 500px;
  width: 100%;
  display: flex;
  align-items: flex-end;
}
.fire {
  position: relative;
  float: left;
  width: 50px;
  border-radius: 25px;
  height: 100%;
}
.fireCont:nth-child(1) {
  height: 220px;
}
.fireCont:nth-child(1) .fire {
  background: #d21b00;
  box-shadow: 0 0 45px 5px rgba(206, 30, 4, 0.5);
}
.fireCont:nth-child(2) {
  height: 190px;
}
.fireCont:nth-child(2) .fire {
  background: #ff980d;
  box-shadow: 0px 0px 45px 5px rgba(253, 152, 15, 0.5);
}
.fireCont:nth-child(3) {
  height: 150px;
}

.fireCont:nth-child(3) .fire {
  background: #ffe479;
  box-shadow: 0px 0px 45px 5px rgba(253, 227, 123, 0.5);
}

.fireCont:nth-child(4) {
  height: 130px;
}

.fireCont:nth-child(4) .fire {
  background: #fef1d9;
  box-shadow: 0px 0px 45px 5px rgba(254, 241, 217, 0.5);
}
.firetap:nth-child(5) {
  position: absolute;
  bottom: 170px;
  left: 0;
  width: 1920px;
  height: 200px;
  display: flex;
  align-items: flex-end;
}

.firetap:nth-child(6) {
  position: absolute;
  bottom: 130px;
  left: 0;
  width: 1920px;
  height: 200px;
  display: flex;
  align-items: flex-end;
}

.firetap:nth-child(7) {
  position: absolute;
  bottom: 120px;
  left: 0;
  width: 1920px;
  height: 200px;
  display: flex;
  align-items: flex-end;
}

.firetap:nth-child(8) {
  position: absolute;
  bottom: 100px;
  left: 0;
  width: 1920px;
  height: 200px;
  display: flex;
  align-items: flex-end;
}

.firetap:nth-child(5) .firetip {
  width: 50px;
  height: 50px;
  background: #d21b00;
  box-shadow: 0px 0px 45px 5px rgba(206, 30, 4, 0.5);
  border-radius: 25px;
  opacity: 0;
}

.firetap:nth-child(6) .firetip {
  width: 50px;
  height: 50px;
  background: #ff980d;
  box-shadow: 0px 0px 45px 5px rgba(253, 152, 15, 0.5);
  border-radius: 25px;
  opacity: 0;
}

.firetap:nth-child(7) .firetip {
  width: 50px;
  height: 50px;
  background: #ffe479;
  box-shadow: 0px 0px 45px 5px rgba(253, 227, 123, 0.5);
  border-radius: 25px;
  opacity: 0;
}

.firetap:nth-child(8) .firetip {
  width: 50px;
  height: 50px;
  background: #fef1d9;
  box-shadow: 0px 0px 45px 5px rgba(254, 241, 217, 0.5);
  border-radius: 25px;
  opacity: 0;
}
.fireCont:nth-child(1) .fire:nth-child(1) {
  animation: flameone 1s ease-in-out 0.09s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(1) {
  animation: flametwo 2s ease-in 0.09s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(1) {
  animation: flamethree 3s ease 0.09s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(1) {
  animation: flamefour 1s ease-out 0.09s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(1) {
  animation: flameoff 3s ease-in-out 0.09s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(1) {
  animation: flameoff 1s ease-in-out 0.09s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(1) {
  animation: flameoff 1s ease-in-out 0.09s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(1) {
  animation: flameoff 4s ease-in-out 0.09s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(2) {
  animation: flameone 3s ease-in-out 0.18s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(2) {
  animation: flametwo 3s ease-in 0.18s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(2) {
  animation: flamethree 1s ease 0.18s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(2) {
  animation: flamefour 1s ease-out 0.18s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(2) {
  animation: flameoff 1s ease-in-out 0.18s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(2) {
  animation: flameoff 1s ease-in-out 0.18s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(2) {
  animation: flameoff 2s ease-in-out 0.18s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(2) {
  animation: flameoff 1s ease-in-out 0.18s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(3) {
  animation: flameone 1s ease-in-out 0.27s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(3) {
  animation: flametwo 2s ease-in 0.27s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(3) {
  animation: flamethree 3s ease 0.27s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(3) {
  animation: flamefour 1s ease-out 0.27s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(3) {
  animation: flameoff 5s ease-in-out 0.27s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(3) {
  animation: flameoff 3s ease-in-out 0.27s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(3) {
  animation: flameoff 4s ease-in-out 0.27s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(3) {
  animation: flameoff 5s ease-in-out 0.27s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(4) {
  animation: flameone 3s ease-in-out 0.36s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(4) {
  animation: flametwo 1s ease-in 0.36s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(4) {
  animation: flamethree 1s ease 0.36s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(4) {
  animation: flamefour 1s ease-out 0.36s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(4) {
  animation: flameoff 3s ease-in-out 0.36s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(4) {
  animation: flameoff 5s ease-in-out 0.36s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(4) {
  animation: flameoff 4s ease-in-out 0.36s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(4) {
  animation: flameoff 2s ease-in-out 0.36s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(5) {
  animation: flameone 1s ease-in-out 0.45s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(5) {
  animation: flametwo 2s ease-in 0.45s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(5) {
  animation: flamethree 1s ease 0.45s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(5) {
  animation: flamefour 3s ease-out 0.45s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(5) {
  animation: flameoff 3s ease-in-out 0.45s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(5) {
  animation: flameoff 4s ease-in-out 0.45s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(5) {
  animation: flameoff 2s ease-in-out 0.45s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(5) {
  animation: flameoff 1s ease-in-out 0.45s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(6) {
  animation: flameone 3s ease-in-out 0.54s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(6) {
  animation: flametwo 1s ease-in 0.54s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(6) {
  animation: flamethree 3s ease 0.54s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(6) {
  animation: flamefour 1s ease-out 0.54s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(6) {
  animation: flameoff 3s ease-in-out 0.54s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(6) {
  animation: flameoff 3s ease-in-out 0.54s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(6) {
  animation: flameoff 2s ease-in-out 0.54s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(6) {
  animation: flameoff 5s ease-in-out 0.54s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(7) {
  animation: flameone 3s ease-in-out 0.63s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(7) {
  animation: flametwo 2s ease-in 0.63s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(7) {
  animation: flamethree 2s ease 0.63s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(7) {
  animation: flamefour 2s ease-out 0.63s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(7) {
  animation: flameoff 5s ease-in-out 0.63s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(7) {
  animation: flameoff 2s ease-in-out 0.63s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(7) {
  animation: flameoff 2s ease-in-out 0.63s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(7) {
  animation: flameoff 4s ease-in-out 0.63s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(8) {
  animation: flameone 2s ease-in-out 0.72s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(8) {
  animation: flametwo 3s ease-in 0.72s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(8) {
  animation: flamethree 3s ease 0.72s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(8) {
  animation: flamefour 2s ease-out 0.72s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(8) {
  animation: flameoff 4s ease-in-out 0.72s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(8) {
  animation: flameoff 2s ease-in-out 0.72s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(8) {
  animation: flameoff 3s ease-in-out 0.72s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(8) {
  animation: flameoff 2s ease-in-out 0.72s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(9) {
  animation: flameone 1s ease-in-out 0.81s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(9) {
  animation: flametwo 3s ease-in 0.81s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(9) {
  animation: flamethree 2s ease 0.81s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(9) {
  animation: flamefour 1s ease-out 0.81s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(9) {
  animation: flameoff 1s ease-in-out 0.81s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(9) {
  animation: flameoff 3s ease-in-out 0.81s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(9) {
  animation: flameoff 2s ease-in-out 0.81s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(9) {
  animation: flameoff 5s ease-in-out 0.81s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(10) {
  animation: flameone 3s ease-in-out 0.9s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(10) {
  animation: flametwo 1s ease-in 0.9s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(10) {
  animation: flamethree 3s ease 0.9s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(10) {
  animation: flamefour 2s ease-out 0.9s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(10) {
  animation: flameoff 4s ease-in-out 0.9s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(10) {
  animation: flameoff 4s ease-in-out 0.9s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(10) {
  animation: flameoff 4s ease-in-out 0.9s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(10) {
  animation: flameoff 1s ease-in-out 0.9s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(11) {
  animation: flameone 1s ease-in-out 0.99s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(11) {
  animation: flametwo 2s ease-in 0.99s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(11) {
  animation: flamethree 1s ease 0.99s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(11) {
  animation: flamefour 2s ease-out 0.99s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(11) {
  animation: flameoff 2s ease-in-out 0.99s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(11) {
  animation: flameoff 4s ease-in-out 0.99s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(11) {
  animation: flameoff 4s ease-in-out 0.99s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(11) {
  animation: flameoff 1s ease-in-out 0.99s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(12) {
  animation: flameone 3s ease-in-out 1.08s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(12) {
  animation: flametwo 2s ease-in 1.08s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(12) {
  animation: flamethree 1s ease 1.08s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(12) {
  animation: flamefour 3s ease-out 1.08s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(12) {
  animation: flameoff 1s ease-in-out 1.08s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(12) {
  animation: flameoff 1s ease-in-out 1.08s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(12) {
  animation: flameoff 1s ease-in-out 1.08s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(12) {
  animation: flameoff 2s ease-in-out 1.08s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(13) {
  animation: flameone 1s ease-in-out 1.17s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(13) {
  animation: flametwo 2s ease-in 1.17s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(13) {
  animation: flamethree 3s ease 1.17s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(13) {
  animation: flamefour 3s ease-out 1.17s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(13) {
  animation: flameoff 2s ease-in-out 1.17s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(13) {
  animation: flameoff 4s ease-in-out 1.17s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(13) {
  animation: flameoff 2s ease-in-out 1.17s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(13) {
  animation: flameoff 1s ease-in-out 1.17s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(14) {
  animation: flameone 3s ease-in-out 1.26s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(14) {
  animation: flametwo 2s ease-in 1.26s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(14) {
  animation: flamethree 3s ease 1.26s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(14) {
  animation: flamefour 1s ease-out 1.26s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(14) {
  animation: flameoff 4s ease-in-out 1.26s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(14) {
  animation: flameoff 3s ease-in-out 1.26s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(14) {
  animation: flameoff 2s ease-in-out 1.26s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(14) {
  animation: flameoff 5s ease-in-out 1.26s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(15) {
  animation: flameone 2s ease-in-out 1.35s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(15) {
  animation: flametwo 2s ease-in 1.35s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(15) {
  animation: flamethree 1s ease 1.35s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(15) {
  animation: flamefour 2s ease-out 1.35s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(15) {
  animation: flameoff 5s ease-in-out 1.35s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(15) {
  animation: flameoff 4s ease-in-out 1.35s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(15) {
  animation: flameoff 1s ease-in-out 1.35s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(15) {
  animation: flameoff 3s ease-in-out 1.35s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(16) {
  animation: flameone 2s ease-in-out 1.44s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(16) {
  animation: flametwo 2s ease-in 1.44s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(16) {
  animation: flamethree 3s ease 1.44s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(16) {
  animation: flamefour 1s ease-out 1.44s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(16) {
  animation: flameoff 4s ease-in-out 1.44s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(16) {
  animation: flameoff 4s ease-in-out 1.44s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(16) {
  animation: flameoff 3s ease-in-out 1.44s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(16) {
  animation: flameoff 1s ease-in-out 1.44s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(17) {
  animation: flameone 3s ease-in-out 1.53s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(17) {
  animation: flametwo 1s ease-in 1.53s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(17) {
  animation: flamethree 3s ease 1.53s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(17) {
  animation: flamefour 3s ease-out 1.53s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(17) {
  animation: flameoff 1s ease-in-out 1.53s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(17) {
  animation: flameoff 3s ease-in-out 1.53s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(17) {
  animation: flameoff 3s ease-in-out 1.53s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(17) {
  animation: flameoff 5s ease-in-out 1.53s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(18) {
  animation: flameone 3s ease-in-out 1.62s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(18) {
  animation: flametwo 1s ease-in 1.62s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(18) {
  animation: flamethree 2s ease 1.62s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(18) {
  animation: flamefour 3s ease-out 1.62s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(18) {
  animation: flameoff 3s ease-in-out 1.62s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(18) {
  animation: flameoff 5s ease-in-out 1.62s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(18) {
  animation: flameoff 1s ease-in-out 1.62s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(18) {
  animation: flameoff 4s ease-in-out 1.62s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(19) {
  animation: flameone 1s ease-in-out 1.71s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(19) {
  animation: flametwo 3s ease-in 1.71s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(19) {
  animation: flamethree 2s ease 1.71s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(19) {
  animation: flamefour 1s ease-out 1.71s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(19) {
  animation: flameoff 4s ease-in-out 1.71s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(19) {
  animation: flameoff 1s ease-in-out 1.71s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(19) {
  animation: flameoff 1s ease-in-out 1.71s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(19) {
  animation: flameoff 4s ease-in-out 1.71s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(20) {
  animation: flameone 3s ease-in-out 1.8s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(20) {
  animation: flametwo 2s ease-in 1.8s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(20) {
  animation: flamethree 3s ease 1.8s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(20) {
  animation: flamefour 3s ease-out 1.8s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(20) {
  animation: flameoff 3s ease-in-out 1.8s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(20) {
  animation: flameoff 4s ease-in-out 1.8s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(20) {
  animation: flameoff 2s ease-in-out 1.8s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(20) {
  animation: flameoff 4s ease-in-out 1.8s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(21) {
  animation: flameone 1s ease-in-out 1.89s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(21) {
  animation: flametwo 2s ease-in 1.89s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(21) {
  animation: flamethree 3s ease 1.89s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(21) {
  animation: flamefour 1s ease-out 1.89s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(21) {
  animation: flameoff 1s ease-in-out 1.89s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(21) {
  animation: flameoff 1s ease-in-out 1.89s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(21) {
  animation: flameoff 1s ease-in-out 1.89s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(21) {
  animation: flameoff 2s ease-in-out 1.89s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(22) {
  animation: flameone 1s ease-in-out 1.98s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(22) {
  animation: flametwo 3s ease-in 1.98s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(22) {
  animation: flamethree 3s ease 1.98s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(22) {
  animation: flamefour 2s ease-out 1.98s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(22) {
  animation: flameoff 2s ease-in-out 1.98s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(22) {
  animation: flameoff 3s ease-in-out 1.98s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(22) {
  animation: flameoff 5s ease-in-out 1.98s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(22) {
  animation: flameoff 2s ease-in-out 1.98s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(23) {
  animation: flameone 3s ease-in-out 2.07s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(23) {
  animation: flametwo 2s ease-in 2.07s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(23) {
  animation: flamethree 3s ease 2.07s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(23) {
  animation: flamefour 1s ease-out 2.07s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(23) {
  animation: flameoff 2s ease-in-out 2.07s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(23) {
  animation: flameoff 2s ease-in-out 2.07s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(23) {
  animation: flameoff 2s ease-in-out 2.07s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(23) {
  animation: flameoff 1s ease-in-out 2.07s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(24) {
  animation: flameone 1s ease-in-out 2.16s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(24) {
  animation: flametwo 1s ease-in 2.16s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(24) {
  animation: flamethree 2s ease 2.16s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(24) {
  animation: flamefour 3s ease-out 2.16s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(24) {
  animation: flameoff 4s ease-in-out 2.16s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(24) {
  animation: flameoff 1s ease-in-out 2.16s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(24) {
  animation: flameoff 1s ease-in-out 2.16s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(24) {
  animation: flameoff 2s ease-in-out 2.16s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(25) {
  animation: flameone 3s ease-in-out 2.25s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(25) {
  animation: flametwo 3s ease-in 2.25s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(25) {
  animation: flamethree 2s ease 2.25s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(25) {
  animation: flamefour 1s ease-out 2.25s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(25) {
  animation: flameoff 1s ease-in-out 2.25s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(25) {
  animation: flameoff 4s ease-in-out 2.25s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(25) {
  animation: flameoff 1s ease-in-out 2.25s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(25) {
  animation: flameoff 3s ease-in-out 2.25s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(26) {
  animation: flameone 3s ease-in-out 2.34s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(26) {
  animation: flametwo 2s ease-in 2.34s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(26) {
  animation: flamethree 1s ease 2.34s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(26) {
  animation: flamefour 1s ease-out 2.34s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(26) {
  animation: flameoff 3s ease-in-out 2.34s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(26) {
  animation: flameoff 2s ease-in-out 2.34s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(26) {
  animation: flameoff 2s ease-in-out 2.34s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(26) {
  animation: flameoff 4s ease-in-out 2.34s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(27) {
  animation: flameone 3s ease-in-out 2.43s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(27) {
  animation: flametwo 3s ease-in 2.43s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(27) {
  animation: flamethree 3s ease 2.43s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(27) {
  animation: flamefour 1s ease-out 2.43s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(27) {
  animation: flameoff 3s ease-in-out 2.43s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(27) {
  animation: flameoff 4s ease-in-out 2.43s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(27) {
  animation: flameoff 4s ease-in-out 2.43s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(27) {
  animation: flameoff 5s ease-in-out 2.43s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(28) {
  animation: flameone 1s ease-in-out 2.52s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(28) {
  animation: flametwo 3s ease-in 2.52s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(28) {
  animation: flamethree 1s ease 2.52s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(28) {
  animation: flamefour 3s ease-out 2.52s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(28) {
  animation: flameoff 2s ease-in-out 2.52s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(28) {
  animation: flameoff 4s ease-in-out 2.52s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(28) {
  animation: flameoff 1s ease-in-out 2.52s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(28) {
  animation: flameoff 5s ease-in-out 2.52s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(29) {
  animation: flameone 2s ease-in-out 2.61s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(29) {
  animation: flametwo 3s ease-in 2.61s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(29) {
  animation: flamethree 2s ease 2.61s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(29) {
  animation: flamefour 2s ease-out 2.61s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(29) {
  animation: flameoff 3s ease-in-out 2.61s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(29) {
  animation: flameoff 5s ease-in-out 2.61s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(29) {
  animation: flameoff 5s ease-in-out 2.61s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(29) {
  animation: flameoff 3s ease-in-out 2.61s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(30) {
  animation: flameone 3s ease-in-out 2.7s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(30) {
  animation: flametwo 3s ease-in 2.7s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(30) {
  animation: flamethree 1s ease 2.7s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(30) {
  animation: flamefour 2s ease-out 2.7s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(30) {
  animation: flameoff 2s ease-in-out 2.7s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(30) {
  animation: flameoff 5s ease-in-out 2.7s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(30) {
  animation: flameoff 3s ease-in-out 2.7s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(30) {
  animation: flameoff 3s ease-in-out 2.7s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(31) {
  animation: flameone 1s ease-in-out 2.79s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(31) {
  animation: flametwo 3s ease-in 2.79s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(31) {
  animation: flamethree 3s ease 2.79s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(31) {
  animation: flamefour 1s ease-out 2.79s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(31) {
  animation: flameoff 2s ease-in-out 2.79s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(31) {
  animation: flameoff 4s ease-in-out 2.79s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(31) {
  animation: flameoff 4s ease-in-out 2.79s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(31) {
  animation: flameoff 4s ease-in-out 2.79s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(32) {
  animation: flameone 3s ease-in-out 2.88s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(32) {
  animation: flametwo 3s ease-in 2.88s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(32) {
  animation: flamethree 3s ease 2.88s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(32) {
  animation: flamefour 3s ease-out 2.88s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(32) {
  animation: flameoff 4s ease-in-out 2.88s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(32) {
  animation: flameoff 2s ease-in-out 2.88s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(32) {
  animation: flameoff 3s ease-in-out 2.88s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(32) {
  animation: flameoff 5s ease-in-out 2.88s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(33) {
  animation: flameone 2s ease-in-out 2.97s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(33) {
  animation: flametwo 2s ease-in 2.97s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(33) {
  animation: flamethree 1s ease 2.97s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(33) {
  animation: flamefour 3s ease-out 2.97s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(33) {
  animation: flameoff 5s ease-in-out 2.97s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(33) {
  animation: flameoff 5s ease-in-out 2.97s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(33) {
  animation: flameoff 5s ease-in-out 2.97s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(33) {
  animation: flameoff 3s ease-in-out 2.97s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(34) {
  animation: flameone 2s ease-in-out 3.06s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(34) {
  animation: flametwo 3s ease-in 3.06s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(34) {
  animation: flamethree 1s ease 3.06s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(34) {
  animation: flamefour 2s ease-out 3.06s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(34) {
  animation: flameoff 1s ease-in-out 3.06s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(34) {
  animation: flameoff 4s ease-in-out 3.06s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(34) {
  animation: flameoff 3s ease-in-out 3.06s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(34) {
  animation: flameoff 1s ease-in-out 3.06s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(35) {
  animation: flameone 3s ease-in-out 3.15s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(35) {
  animation: flametwo 3s ease-in 3.15s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(35) {
  animation: flamethree 2s ease 3.15s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(35) {
  animation: flamefour 2s ease-out 3.15s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(35) {
  animation: flameoff 3s ease-in-out 3.15s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(35) {
  animation: flameoff 1s ease-in-out 3.15s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(35) {
  animation: flameoff 1s ease-in-out 3.15s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(35) {
  animation: flameoff 5s ease-in-out 3.15s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(36) {
  animation: flameone 1s ease-in-out 3.24s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(36) {
  animation: flametwo 1s ease-in 3.24s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(36) {
  animation: flamethree 1s ease 3.24s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(36) {
  animation: flamefour 2s ease-out 3.24s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(36) {
  animation: flameoff 5s ease-in-out 3.24s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(36) {
  animation: flameoff 3s ease-in-out 3.24s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(36) {
  animation: flameoff 4s ease-in-out 3.24s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(36) {
  animation: flameoff 5s ease-in-out 3.24s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(37) {
  animation: flameone 1s ease-in-out 3.33s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(37) {
  animation: flametwo 2s ease-in 3.33s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(37) {
  animation: flamethree 2s ease 3.33s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(37) {
  animation: flamefour 3s ease-out 3.33s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(37) {
  animation: flameoff 3s ease-in-out 3.33s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(37) {
  animation: flameoff 4s ease-in-out 3.33s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(37) {
  animation: flameoff 4s ease-in-out 3.33s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(37) {
  animation: flameoff 5s ease-in-out 3.33s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(38) {
  animation: flameone 2s ease-in-out 3.42s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(38) {
  animation: flametwo 1s ease-in 3.42s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(38) {
  animation: flamethree 2s ease 3.42s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(38) {
  animation: flamefour 2s ease-out 3.42s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(38) {
  animation: flameoff 1s ease-in-out 3.42s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(38) {
  animation: flameoff 2s ease-in-out 3.42s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(38) {
  animation: flameoff 4s ease-in-out 3.42s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(38) {
  animation: flameoff 5s ease-in-out 3.42s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(39) {
  animation: flameone 1s ease-in-out 3.51s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(39) {
  animation: flametwo 3s ease-in 3.51s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(39) {
  animation: flamethree 1s ease 3.51s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(39) {
  animation: flamefour 2s ease-out 3.51s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(39) {
  animation: flameoff 2s ease-in-out 3.51s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(39) {
  animation: flameoff 5s ease-in-out 3.51s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(39) {
  animation: flameoff 4s ease-in-out 3.51s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(39) {
  animation: flameoff 2s ease-in-out 3.51s infinite;
}

@keyframes flameone {
  to {
    height: 120%;
  }
}
@keyframes flametwo {
  to {
    height: 90%;
  }
}
@keyframes flamethree {
  to {
    height: 110%;
  }
}
@keyframes flamefour {
  to {
    height: 80%;
  }
}
@keyframes flameoff {
  0% {
    opacity: 0;
    transform: translateY(0px) scale(0.7, 0.7);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-100px) scale(0.1, 0.1);
  }
}

最后只需要在js中通过for循环 去生成div并且绑定好对应的class 插入到页面中即可