仪表板动效元素：浪漫烟花

收藏

在仪表板设计时，经常需要添加一些动效来提升视觉冲击力，这个帖子主要介浪漫烟花。

实现步骤：
1、在仪表板中添加外部扩展
image.png166349181.png

2、将以下代码粘贴到外部扩展的Html视图中，点击确定
image.png371340331.png

<html>
<head>
<style>
body {
height: 100vh;
overflow: hidden;
display: flex;
font-family: "Anton", sans-serif;
justify-content: center;
align-items: center;
perspective: 600px;
}
div {
transform-style: preserve-3d;
}
.camera.-y {
-webkit-animation: rotate 30s linear infinite;
animation: rotate 30s linear infinite;
}
.fireworks {
transform: translateY(-100px);
}
.spark {
position: absolute;
width: 400px;
height: 400px;
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;
transform: translateZ(0.1px);
}
.line:nth-child(1) {
transform: rotateY(198deg);
}
.line:nth-child(1) .spark {
width: 328px;
height: 312px;
-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 1559ms -961ms linear infinite;
animation: fire 1559ms -961ms linear infinite;
}
@-webkit-keyframes spark1 {
0% {
transform: translateY(607px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(179deg) translateX(120px);
}
}
@keyframes spark1 {
0% {
transform: translateY(607px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(179deg) translateX(120px);
}
}
.line:nth-child(2) {
transform: rotateY(189deg);
}
.line:nth-child(2) .spark {
width: 293px;
height: 271px;
-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 1449ms -987ms linear infinite;
animation: fire 1449ms -987ms linear infinite;
}
@-webkit-keyframes spark2 {
0% {
transform: translateY(555px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(302deg) translateX(163px);
}
}
@keyframes spark2 {
0% {
transform: translateY(555px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(302deg) translateX(163px);
}
}
.line:nth-child(3) {
transform: rotateY(146deg);
}
.line:nth-child(3) .spark {
width: 230px;
height: 261px;
-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 1202ms -86ms linear infinite;
animation: fire 1202ms -86ms linear infinite;
}
@-webkit-keyframes spark3 {
0% {
transform: translateY(537px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(6deg) translateX(238px);
}
}
@keyframes spark3 {
0% {
transform: translateY(537px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(6deg) translateX(238px);
}
}
.line:nth-child(4) {
transform: rotateY(144deg);
}
.line:nth-child(4) .spark {
width: 257px;
height: 282px;
-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 1694ms -461ms linear infinite;
animation: fire 1694ms -461ms linear infinite;
}
@-webkit-keyframes spark4 {
0% {
transform: translateY(650px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(229deg) translateX(269px);
}
}
@keyframes spark4 {
0% {
transform: translateY(650px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(229deg) translateX(269px);
}
}
.line:nth-child(5) {
transform: rotateY(200deg);
}
.line:nth-child(5) .spark {
width: 358px;
height: 302px;
-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 1963ms -771ms linear infinite;
animation: fire 1963ms -771ms linear infinite;
}
@-webkit-keyframes spark5 {
0% {
transform: translateY(506px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(282deg) translateX(173px);
}
}
@keyframes spark5 {
0% {
transform: translateY(506px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(282deg) translateX(173px);
}
}
.line:nth-child(6) {
transform: rotateY(127deg);
}
.line:nth-child(6) .spark {
width: 230px;
height: 218px;
-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 1766ms -670ms linear infinite;
animation: fire 1766ms -670ms linear infinite;
}
@-webkit-keyframes spark6 {
0% {
transform: translateY(590px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(180deg) translateX(220px);
}
}
@keyframes spark6 {
0% {
transform: translateY(590px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(180deg) translateX(220px);
}
}
.line:nth-child(7) {
transform: rotateY(183deg);
}
.line:nth-child(7) .spark {
width: 316px;
height: 318px;
-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 1819ms -60ms linear infinite;
animation: fire 1819ms -60ms linear infinite;
}
@-webkit-keyframes spark7 {
0% {
transform: translateY(616px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(216deg) translateX(220px);
}
}
@keyframes spark7 {
0% {
transform: translateY(616px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(216deg) translateX(220px);
}
}
.line:nth-child(8) {
transform: rotateY(94deg);
}
.line:nth-child(8) .spark {
width: 270px;
height: 275px;
-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 1627ms -323ms linear infinite;
animation: fire 1627ms -323ms linear infinite;
}
@-webkit-keyframes spark8 {
0% {
transform: translateY(520px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(70deg) translateX(286px);
}
}
@keyframes spark8 {
0% {
transform: translateY(520px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(70deg) translateX(286px);
}
}
.line:nth-child(9) {
transform: rotateY(102deg);
}
.line:nth-child(9) .spark {
width: 396px;
height: 223px;
-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 1144ms -914ms linear infinite;
animation: fire 1144ms -914ms linear infinite;
}
@-webkit-keyframes spark9 {
0% {
transform: translateY(631px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(167deg) translateX(144px);
}
}
@keyframes spark9 {
0% {
transform: translateY(631px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(167deg) translateX(144px);
}
}
.line:nth-child(10) {
transform: rotateY(178deg);
}
.line:nth-child(10) .spark {
width: 338px;
height: 355px;
-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 1612ms -138ms linear infinite;
animation: fire 1612ms -138ms linear infinite;
}
@-webkit-keyframes spark10 {
0% {
transform: translateY(640px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(218deg) translateX(267px);
}
}
@keyframes spark10 {
0% {
transform: translateY(640px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(218deg) translateX(267px);
}
}
.line:nth-child(11) {
transform: rotateY(183deg);
}
.line:nth-child(11) .spark {
width: 351px;
height: 213px;
-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 1752ms -804ms linear infinite;
animation: fire 1752ms -804ms linear infinite;
}
@-webkit-keyframes spark11 {
0% {
transform: translateY(639px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(170deg) translateX(284px);
}
}
@keyframes spark11 {
0% {
transform: translateY(639px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(170deg) translateX(284px);
}
}
.line:nth-child(12) {
transform: rotateY(260deg);
}
.line:nth-child(12) .spark {
width: 204px;
height: 224px;
-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 1143ms -189ms linear infinite;
animation: fire 1143ms -189ms linear infinite;
}
@-webkit-keyframes spark12 {
0% {
transform: translateY(588px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(351deg) translateX(153px);
}
}
@keyframes spark12 {
0% {
transform: translateY(588px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(351deg) translateX(153px);
}
}
.line:nth-child(13) {
transform: rotateY(110deg);
}
.line:nth-child(13) .spark {
width: 214px;
height: 288px;
-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 2000ms -259ms linear infinite;
animation: fire 2000ms -259ms linear infinite;
}
@-webkit-keyframes spark13 {
0% {
transform: translateY(595px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(74deg) translateX(173px);
}
}
@keyframes spark13 {
0% {
transform: translateY(595px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(74deg) translateX(173px);
}
}
.line:nth-child(14) {
transform: rotateY(58deg);
}
.line:nth-child(14) .spark {
width: 225px;
height: 278px;
-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 1727ms -904ms linear infinite;
animation: fire 1727ms -904ms linear infinite;
}
@-webkit-keyframes spark14 {
0% {
transform: translateY(606px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(61deg) translateX(243px);
}
}
@keyframes spark14 {
0% {
transform: translateY(606px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(61deg) translateX(243px);
}
}
.line:nth-child(15) {
transform: rotateY(22deg);
}
.line:nth-child(15) .spark {
width: 276px;
height: 229px;
-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 1135ms -677ms linear infinite;
animation: fire 1135ms -677ms linear infinite;
}
@-webkit-keyframes spark15 {
0% {
transform: translateY(517px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(278deg) translateX(272px);
}
}
@keyframes spark15 {
0% {
transform: translateY(517px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(278deg) translateX(272px);
}
}
.line:nth-child(16) {
transform: rotateY(23deg);
}
.line:nth-child(16) .spark {
width: 229px;
height: 222px;
-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 1912ms -112ms linear infinite;
animation: fire 1912ms -112ms linear infinite;
}
@-webkit-keyframes spark16 {
0% {
transform: translateY(533px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(315deg) translateX(157px);
}
}
@keyframes spark16 {
0% {
transform: translateY(533px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(315deg) translateX(157px);
}
}
.line:nth-child(17) {
transform: rotateY(57deg);
}
.line:nth-child(17) .spark {
width: 260px;
height: 204px;
-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 1678ms -376ms linear infinite;
animation: fire 1678ms -376ms linear infinite;
}
@-webkit-keyframes spark17 {
0% {
transform: translateY(612px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(313deg) translateX(242px);
}
}
@keyframes spark17 {
0% {
transform: translateY(612px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(313deg) translateX(242px);
}
}
.line:nth-child(18) {
transform: rotateY(152deg);
}
.line:nth-child(18) .spark {
width: 351px;
height: 295px;
-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 1579ms -118ms linear infinite;
animation: fire 1579ms -118ms linear infinite;
}
@-webkit-keyframes spark18 {
0% {
transform: translateY(586px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(34deg) translateX(121px);
}
}
@keyframes spark18 {
0% {
transform: translateY(586px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(34deg) translateX(121px);
}
}
.line:nth-child(19) {
transform: rotateY(69deg);
}
.line:nth-child(19) .spark {
width: 334px;
height: 279px;
-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 1797ms -762ms linear infinite;
animation: fire 1797ms -762ms linear infinite;
}
@-webkit-keyframes spark19 {
0% {
transform: translateY(604px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(290deg) translateX(247px);
}
}
@keyframes spark19 {
0% {
transform: translateY(604px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(290deg) translateX(247px);
}
}
.line:nth-child(20) {
transform: rotateY(159deg);
}
.line:nth-child(20) .spark {
width: 386px;
height: 273px;
-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 1327ms -224ms linear infinite;
animation: fire 1327ms -224ms linear infinite;
}
@-webkit-keyframes spark20 {
0% {
transform: translateY(614px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(88deg) translateX(147px);
}
}
@keyframes spark20 {
0% {
transform: translateY(614px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(88deg) translateX(147px);
}
}
.line:nth-child(21) {
transform: rotateY(29deg);
}
.line:nth-child(21) .spark {
width: 355px;
height: 380px;
-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 1162ms -148ms linear infinite;
animation: fire 1162ms -148ms linear infinite;
}
@-webkit-keyframes spark21 {
0% {
transform: translateY(550px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(215deg) translateX(299px);
}
}
@keyframes spark21 {
0% {
transform: translateY(550px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(215deg) translateX(299px);
}
}
.line:nth-child(22) {
transform: rotateY(197deg);
}
.line:nth-child(22) .spark {
width: 345px;
height: 388px;
-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 1831ms -693ms linear infinite;
animation: fire 1831ms -693ms linear infinite;
}
@-webkit-keyframes spark22 {
0% {
transform: translateY(592px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(262deg) translateX(164px);
}
}
@keyframes spark22 {
0% {
transform: translateY(592px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(262deg) translateX(164px);
}
}
.line:nth-child(23) {
transform: rotateY(178deg);
}
.line:nth-child(23) .spark {
width: 226px;
height: 344px;
-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 1296ms -278ms linear infinite;
animation: fire 1296ms -278ms linear infinite;
}
@-webkit-keyframes spark23 {
0% {
transform: translateY(513px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(62deg) translateX(153px);
}
}
@keyframes spark23 {
0% {
transform: translateY(513px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(62deg) translateX(153px);
}
}
.line:nth-child(24) {
transform: rotateY(256deg);
}
.line:nth-child(24) .spark {
width: 348px;
height: 278px;
-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 1076ms -519ms linear infinite;
animation: fire 1076ms -519ms linear infinite;
}
@-webkit-keyframes spark24 {
0% {
transform: translateY(553px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(39deg) translateX(276px);
}
}
@keyframes spark24 {
0% {
transform: translateY(553px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(39deg) translateX(276px);
}
}
.line:nth-child(25) {
transform: rotateY(235deg);
}
.line:nth-child(25) .spark {
width: 241px;
height: 305px;
-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 1769ms -89ms linear infinite;
animation: fire 1769ms -89ms linear infinite;
}
@-webkit-keyframes spark25 {
0% {
transform: translateY(621px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(291deg) translateX(192px);
}
}
@keyframes spark25 {
0% {
transform: translateY(621px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(291deg) translateX(192px);
}
}
.line:nth-child(26) {
transform: rotateY(131deg);
}
.line:nth-child(26) .spark {
width: 298px;
height: 223px;
-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 1505ms -694ms linear infinite;
animation: fire 1505ms -694ms linear infinite;
}
@-webkit-keyframes spark26 {
0% {
transform: translateY(563px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(144deg) translateX(257px);
}
}
@keyframes spark26 {
0% {
transform: translateY(563px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(144deg) translateX(257px);
}
}
.line:nth-child(27) {
transform: rotateY(188deg);
}
.line:nth-child(27) .spark {
width: 224px;
height: 285px;
-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 1319ms -93ms linear infinite;
animation: fire 1319ms -93ms linear infinite;
}
@-webkit-keyframes spark27 {
0% {
transform: translateY(626px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(71deg) translateX(168px);
}
}
@keyframes spark27 {
0% {
transform: translateY(626px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(71deg) translateX(168px);
}
}
.line:nth-child(28) {
transform: rotateY(183deg);
}
.line:nth-child(28) .spark {
width: 332px;
height: 325px;
-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 1484ms -967ms linear infinite;
animation: fire 1484ms -967ms linear infinite;
}
@-webkit-keyframes spark28 {
0% {
transform: translateY(607px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(358deg) translateX(131px);
}
}
@keyframes spark28 {
0% {
transform: translateY(607px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(358deg) translateX(131px);
}
}
.line:nth-child(29) {
transform: rotateY(198deg);
}
.line:nth-child(29) .spark {
width: 344px;
height: 326px;
-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 1379ms -826ms linear infinite;
animation: fire 1379ms -826ms linear infinite;
}
@-webkit-keyframes spark29 {
0% {
transform: translateY(639px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(186deg) translateX(224px);
}
}
@keyframes spark29 {
0% {
transform: translateY(639px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(186deg) translateX(224px);
}
}
.line:nth-child(30) {
transform: rotateY(343deg);
}
.line:nth-child(30) .spark {
width: 267px;
height: 393px;
-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 1517ms -778ms linear infinite;
animation: fire 1517ms -778ms linear infinite;
}
@-webkit-keyframes spark30 {
0% {
transform: translateY(610px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(51deg) translateX(233px);
}
}
@keyframes spark30 {
0% {
transform: translateY(610px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(51deg) translateX(233px);
}
}
.line:nth-child(31) {
transform: rotateY(64deg);
}
.line:nth-child(31) .spark {
width: 311px;
height: 284px;
-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 1791ms -378ms linear infinite;
animation: fire 1791ms -378ms linear infinite;
}
@-webkit-keyframes spark31 {
0% {
transform: translateY(550px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(84deg) translateX(128px);
}
}
@keyframes spark31 {
0% {
transform: translateY(550px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(84deg) translateX(128px);
}
}
.line:nth-child(32) {
transform: rotateY(263deg);
}
.line:nth-child(32) .spark {
width: 384px;
height: 301px;
-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 1210ms -693ms linear infinite;
animation: fire 1210ms -693ms linear infinite;
}
@-webkit-keyframes spark32 {
0% {
transform: translateY(640px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(325deg) translateX(252px);
}
}
@keyframes spark32 {
0% {
transform: translateY(640px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(325deg) translateX(252px);
}
}
.line:nth-child(33) {
transform: rotateY(150deg);
}
.line:nth-child(33) .spark {
width: 204px;
height: 267px;
-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 1887ms -876ms linear infinite;
animation: fire 1887ms -876ms linear infinite;
}
@-webkit-keyframes spark33 {
0% {
transform: translateY(519px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(355deg) translateX(210px);
}
}
@keyframes spark33 {
0% {
transform: translateY(519px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(355deg) translateX(210px);
}
}
.line:nth-child(34) {
transform: rotateY(96deg);
}
.line:nth-child(34) .spark {
width: 369px;
height: 380px;
-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 1944ms -666ms linear infinite;
animation: fire 1944ms -666ms linear infinite;
}
@-webkit-keyframes spark34 {
0% {
transform: translateY(517px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(347deg) translateX(130px);
}
}
@keyframes spark34 {
0% {
transform: translateY(517px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(347deg) translateX(130px);
}
}
.line:nth-child(35) {
transform: rotateY(153deg);
}
.line:nth-child(35) .spark {
width: 275px;
height: 269px;
-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 1752ms -928ms linear infinite;
animation: fire 1752ms -928ms linear infinite;
}
@-webkit-keyframes spark35 {
0% {
transform: translateY(572px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(261deg) translateX(142px);
}
}
@keyframes spark35 {
0% {
transform: translateY(572px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(261deg) translateX(142px);
}
}
.line:nth-child(36) {
transform: rotateY(41deg);
}
.line:nth-child(36) .spark {
width: 231px;
height: 383px;
-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 1189ms -198ms linear infinite;
animation: fire 1189ms -198ms linear infinite;
}
@-webkit-keyframes spark36 {
0% {
transform: translateY(649px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(64deg) translateX(270px);
}
}
@keyframes spark36 {
0% {
transform: translateY(649px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(64deg) translateX(270px);
}
}
.line:nth-child(37) {
transform: rotateY(28deg);
}
.line:nth-child(37) .spark {
width: 216px;
height: 319px;
-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 1716ms -337ms linear infinite;
animation: fire 1716ms -337ms linear infinite;
}
@-webkit-keyframes spark37 {
0% {
transform: translateY(576px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(75deg) translateX(159px);
}
}
@keyframes spark37 {
0% {
transform: translateY(576px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(75deg) translateX(159px);
}
}
.line:nth-child(38) {
transform: rotateY(220deg);
}
.line:nth-child(38) .spark {
width: 316px;
height: 214px;
-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 1171ms -878ms linear infinite;
animation: fire 1171ms -878ms linear infinite;
}
@-webkit-keyframes spark38 {
0% {
transform: translateY(543px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(67deg) translateX(180px);
}
}
@keyframes spark38 {
0% {
transform: translateY(543px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(67deg) translateX(180px);
}
}
.line:nth-child(39) {
transform: rotateY(212deg);
}
.line:nth-child(39) .spark {
width: 300px;
height: 294px;
-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 1449ms -635ms linear infinite;
animation: fire 1449ms -635ms linear infinite;
}
@-webkit-keyframes spark39 {
0% {
transform: translateY(578px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(94deg) translateX(234px);
}
}
@keyframes spark39 {
0% {
transform: translateY(578px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(94deg) translateX(234px);
}
}
.line:nth-child(40) {
transform: rotateY(176deg);
}
.line:nth-child(40) .spark {
width: 384px;
height: 348px;
-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 1668ms -810ms linear infinite;
animation: fire 1668ms -810ms linear infinite;
}
@-webkit-keyframes spark40 {
0% {
transform: translateY(641px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(342deg) translateX(113px);
}
}
@keyframes spark40 {
0% {
transform: translateY(641px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(342deg) translateX(113px);
}
}
.line:nth-child(41) {
transform: rotateY(237deg);
}
.line:nth-child(41) .spark {
width: 276px;
height: 373px;
-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 1619ms -907ms linear infinite;
animation: fire 1619ms -907ms linear infinite;
}
@-webkit-keyframes spark41 {
0% {
transform: translateY(571px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(348deg) translateX(292px);
}
}
@keyframes spark41 {
0% {
transform: translateY(571px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(348deg) translateX(292px);
}
}
.line:nth-child(42) {
transform: rotateY(351deg);
}
.line:nth-child(42) .spark {
width: 253px;
height: 352px;
-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 1319ms -655ms linear infinite;
animation: fire 1319ms -655ms linear infinite;
}
@-webkit-keyframes spark42 {
0% {
transform: translateY(628px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(100deg) translateX(152px);
}
}
@keyframes spark42 {
0% {
transform: translateY(628px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(100deg) translateX(152px);
}
}
.line:nth-child(43) {
transform: rotateY(189deg);
}
.line:nth-child(43) .spark {
width: 400px;
height: 292px;
-webkit-animation: spark43 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark43 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(43) .fire {
-webkit-animation: fire 1764ms -553ms linear infinite;
animation: fire 1764ms -553ms linear infinite;
}
@-webkit-keyframes spark43 {
0% {
transform: translateY(508px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(330deg) translateX(128px);
}
}
@keyframes spark43 {
0% {
transform: translateY(508px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(330deg) translateX(128px);
}
}
.line:nth-child(44) {
transform: rotateY(81deg);
}
.line:nth-child(44) .spark {
width: 212px;
height: 285px;
-webkit-animation: spark44 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark44 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(44) .fire {
-webkit-animation: fire 1647ms -141ms linear infinite;
animation: fire 1647ms -141ms linear infinite;
}
@-webkit-keyframes spark44 {
0% {
transform: translateY(615px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(2deg) translateX(173px);
}
}
@keyframes spark44 {
0% {
transform: translateY(615px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(2deg) translateX(173px);
}
}
.line:nth-child(45) {
transform: rotateY(45deg);
}
.line:nth-child(45) .spark {
width: 272px;
height: 303px;
-webkit-animation: spark45 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark45 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(45) .fire {
-webkit-animation: fire 1782ms -504ms linear infinite;
animation: fire 1782ms -504ms linear infinite;
}
@-webkit-keyframes spark45 {
0% {
transform: translateY(580px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(171deg) translateX(283px);
}
}
@keyframes spark45 {
0% {
transform: translateY(580px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(171deg) translateX(283px);
}
}
.line:nth-child(46) {
transform: rotateY(274deg);
}
.line:nth-child(46) .spark {
width: 256px;
height: 238px;
-webkit-animation: spark46 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark46 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(46) .fire {
-webkit-animation: fire 1390ms -631ms linear infinite;
animation: fire 1390ms -631ms linear infinite;
}
@-webkit-keyframes spark46 {
0% {
transform: translateY(519px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(86deg) translateX(188px);
}
}
@keyframes spark46 {
0% {
transform: translateY(519px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(86deg) translateX(188px);
}
}
.line:nth-child(47) {
transform: rotateY(194deg);
}
.line:nth-child(47) .spark {
width: 367px;
height: 341px;
-webkit-animation: spark47 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark47 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(47) .fire {
-webkit-animation: fire 1080ms -319ms linear infinite;
animation: fire 1080ms -319ms linear infinite;
}
@-webkit-keyframes spark47 {
0% {
transform: translateY(590px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(137deg) translateX(243px);
}
}
@keyframes spark47 {
0% {
transform: translateY(590px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(137deg) translateX(243px);
}
}
.line:nth-child(48) {
transform: rotateY(60deg);
}
.line:nth-child(48) .spark {
width: 204px;
height: 392px;
-webkit-animation: spark48 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark48 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(48) .fire {
-webkit-animation: fire 1143ms -494ms linear infinite;
animation: fire 1143ms -494ms linear infinite;
}
@-webkit-keyframes spark48 {
0% {
transform: translateY(547px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(67deg) translateX(183px);
}
}
@keyframes spark48 {
0% {
transform: translateY(547px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(67deg) translateX(183px);
}
}
.line:nth-child(49) {
transform: rotateY(83deg);
}
.line:nth-child(49) .spark {
width: 228px;
height: 248px;
-webkit-animation: spark49 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark49 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(49) .fire {
-webkit-animation: fire 1288ms -376ms linear infinite;
animation: fire 1288ms -376ms linear infinite;
}
@-webkit-keyframes spark49 {
0% {
transform: translateY(585px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(331deg) translateX(158px);
}
}
@keyframes spark49 {
0% {
transform: translateY(585px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(331deg) translateX(158px);
}
}
.line:nth-child(50) {
transform: rotateY(345deg);
}
.line:nth-child(50) .spark {
width: 364px;
height: 307px;
-webkit-animation: spark50 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark50 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(50) .fire {
-webkit-animation: fire 1897ms -196ms linear infinite;
animation: fire 1897ms -196ms linear infinite;
}
@-webkit-keyframes spark50 {
0% {
transform: translateY(505px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(96deg) translateX(179px);
}
}
@keyframes spark50 {
0% {
transform: translateY(505px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(96deg) translateX(179px);
}
}
.line:nth-child(51) {
transform: rotateY(167deg);
}
.line:nth-child(51) .spark {
width: 321px;
height: 392px;
-webkit-animation: spark51 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark51 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(51) .fire {
-webkit-animation: fire 1431ms -826ms linear infinite;
animation: fire 1431ms -826ms linear infinite;
}
@-webkit-keyframes spark51 {
0% {
transform: translateY(556px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(23deg) translateX(232px);
}
}
@keyframes spark51 {
0% {
transform: translateY(556px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(23deg) translateX(232px);
}
}
.line:nth-child(52) {
transform: rotateY(166deg);
}
.line:nth-child(52) .spark {
width: 263px;
height: 338px;
-webkit-animation: spark52 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark52 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(52) .fire {
-webkit-animation: fire 1685ms -931ms linear infinite;
animation: fire 1685ms -931ms linear infinite;
}
@-webkit-keyframes spark52 {
0% {
transform: translateY(554px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(182deg) translateX(140px);
}
}
@keyframes spark52 {
0% {
transform: translateY(554px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(182deg) translateX(140px);
}
}
.line:nth-child(53) {
transform: rotateY(166deg);
}
.line:nth-child(53) .spark {
width: 296px;
height: 228px;
-webkit-animation: spark53 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark53 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(53) .fire {
-webkit-animation: fire 1513ms -537ms linear infinite;
animation: fire 1513ms -537ms linear infinite;
}
@-webkit-keyframes spark53 {
0% {
transform: translateY(578px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(181deg) translateX(288px);
}
}
@keyframes spark53 {
0% {
transform: translateY(578px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(181deg) translateX(288px);
}
}
.line:nth-child(54) {
transform: rotateY(336deg);
}
.line:nth-child(54) .spark {
width: 362px;
height: 213px;
-webkit-animation: spark54 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark54 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(54) .fire {
-webkit-animation: fire 1062ms -681ms linear infinite;
animation: fire 1062ms -681ms linear infinite;
}
@-webkit-keyframes spark54 {
0% {
transform: translateY(570px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(325deg) translateX(200px);
}
}
@keyframes spark54 {
0% {
transform: translateY(570px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(325deg) translateX(200px);
}
}
.line:nth-child(55) {
transform: rotateY(112deg);
}
.line:nth-child(55) .spark {
width: 400px;
height: 251px;
-webkit-animation: spark55 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark55 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(55) .fire {
-webkit-animation: fire 1604ms -775ms linear infinite;
animation: fire 1604ms -775ms linear infinite;
}
@-webkit-keyframes spark55 {
0% {
transform: translateY(646px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(43deg) translateX(202px);
}
}
@keyframes spark55 {
0% {
transform: translateY(646px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(43deg) translateX(202px);
}
}
.line:nth-child(56) {
transform: rotateY(184deg);
}
.line:nth-child(56) .spark {
width: 306px;
height: 202px;
-webkit-animation: spark56 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark56 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(56) .fire {
-webkit-animation: fire 1326ms -129ms linear infinite;
animation: fire 1326ms -129ms linear infinite;
}
@-webkit-keyframes spark56 {
0% {
transform: translateY(519px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(29deg) translateX(161px);
}
}
@keyframes spark56 {
0% {
transform: translateY(519px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(29deg) translateX(161px);
}
}
.line:nth-child(57) {
transform: rotateY(134deg);
}
.line:nth-child(57) .spark {
width: 229px;
height: 345px;
-webkit-animation: spark57 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark57 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(57) .fire {
-webkit-animation: fire 1539ms -731ms linear infinite;
animation: fire 1539ms -731ms linear infinite;
}
@-webkit-keyframes spark57 {
0% {
transform: translateY(595px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(325deg) translateX(121px);
}
}
@keyframes spark57 {
0% {
transform: translateY(595px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(325deg) translateX(121px);
}
}
.line:nth-child(58) {
transform: rotateY(270deg);
}
.line:nth-child(58) .spark {
width: 390px;
height: 284px;
-webkit-animation: spark58 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark58 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(58) .fire {
-webkit-animation: fire 1086ms -367ms linear infinite;
animation: fire 1086ms -367ms linear infinite;
}
@-webkit-keyframes spark58 {
0% {
transform: translateY(622px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(118deg) translateX(120px);
}
}
@keyframes spark58 {
0% {
transform: translateY(622px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(118deg) translateX(120px);
}
}
.line:nth-child(59) {
transform: rotateY(341deg);
}
.line:nth-child(59) .spark {
width: 218px;
height: 399px;
-webkit-animation: spark59 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark59 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(59) .fire {
-webkit-animation: fire 1886ms -83ms linear infinite;
animation: fire 1886ms -83ms linear infinite;
}
@-webkit-keyframes spark59 {
0% {
transform: translateY(548px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(207deg) translateX(184px);
}
}
@keyframes spark59 {
0% {
transform: translateY(548px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(207deg) translateX(184px);
}
}
.line:nth-child(60) {
transform: rotateY(23deg);
}
.line:nth-child(60) .spark {
width: 318px;
height: 366px;
-webkit-animation: spark60 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark60 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(60) .fire {
-webkit-animation: fire 1830ms -370ms linear infinite;
animation: fire 1830ms -370ms linear infinite;
}
@-webkit-keyframes spark60 {
0% {
transform: translateY(503px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(338deg) translateX(117px);
}
}
@keyframes spark60 {
0% {
transform: translateY(503px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(338deg) translateX(117px);
}
}
.line:nth-child(61) {
transform: rotateY(134deg);
}
.line:nth-child(61) .spark {
width: 329px;
height: 288px;
-webkit-animation: spark61 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark61 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(61) .fire {
-webkit-animation: fire 1056ms -478ms linear infinite;
animation: fire 1056ms -478ms linear infinite;
}
@-webkit-keyframes spark61 {
0% {
transform: translateY(617px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(284deg) translateX(134px);
}
}
@keyframes spark61 {
0% {
transform: translateY(617px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(284deg) translateX(134px);
}
}
.line:nth-child(62) {
transform: rotateY(160deg);
}
.line:nth-child(62) .spark {
width: 209px;
height: 242px;
-webkit-animation: spark62 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark62 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(62) .fire {
-webkit-animation: fire 1152ms -340ms linear infinite;
animation: fire 1152ms -340ms linear infinite;
}
@-webkit-keyframes spark62 {
0% {
transform: translateY(536px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(188deg) translateX(233px);
}
}
@keyframes spark62 {
0% {
transform: translateY(536px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(188deg) translateX(233px);
}
}
.line:nth-child(63) {
transform: rotateY(262deg);
}
.line:nth-child(63) .spark {
width: 365px;
height: 327px;
-webkit-animation: spark63 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark63 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(63) .fire {
-webkit-animation: fire 1249ms -86ms linear infinite;
animation: fire 1249ms -86ms linear infinite;
}
@-webkit-keyframes spark63 {
0% {
transform: translateY(530px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(53deg) translateX(292px);
}
}
@keyframes spark63 {
0% {
transform: translateY(530px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(53deg) translateX(292px);
}
}
.line:nth-child(64) {
transform: rotateY(264deg);
}
.line:nth-child(64) .spark {
width: 335px;
height: 362px;
-webkit-animation: spark64 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark64 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(64) .fire {
-webkit-animation: fire 1350ms -594ms linear infinite;
animation: fire 1350ms -594ms linear infinite;
}
@-webkit-keyframes spark64 {
0% {
transform: translateY(542px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(138deg) translateX(279px);
}
}
@keyframes spark64 {
0% {
transform: translateY(542px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(138deg) translateX(279px);
}
}
.line:nth-child(65) {
transform: rotateY(341deg);
}
.line:nth-child(65) .spark {
width: 358px;
height: 274px;
-webkit-animation: spark65 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark65 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(65) .fire {
-webkit-animation: fire 1829ms -720ms linear infinite;
animation: fire 1829ms -720ms linear infinite;
}
@-webkit-keyframes spark65 {
0% {
transform: translateY(559px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(262deg) translateX(253px);
}
}
@keyframes spark65 {
0% {
transform: translateY(559px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(262deg) translateX(253px);
}
}
.line:nth-child(66) {
transform: rotateY(275deg);
}
.line:nth-child(66) .spark {
width: 287px;
height: 271px;
-webkit-animation: spark66 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark66 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(66) .fire {
-webkit-animation: fire 1393ms -710ms linear infinite;
animation: fire 1393ms -710ms linear infinite;
}
@-webkit-keyframes spark66 {
0% {
transform: translateY(650px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(299deg) translateX(155px);
}
}
@keyframes spark66 {
0% {
transform: translateY(650px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(299deg) translateX(155px);
}
}
.line:nth-child(67) {
transform: rotateY(121deg);
}
.line:nth-child(67) .spark {
width: 248px;
height: 312px;
-webkit-animation: spark67 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark67 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(67) .fire {
-webkit-animation: fire 1345ms -849ms linear infinite;
animation: fire 1345ms -849ms linear infinite;
}
@-webkit-keyframes spark67 {
0% {
transform: translateY(581px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(209deg) translateX(153px);
}
}
@keyframes spark67 {
0% {
transform: translateY(581px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(209deg) translateX(153px);
}
}
.line:nth-child(68) {
transform: rotateY(333deg);
}
.line:nth-child(68) .spark {
width: 332px;
height: 294px;
-webkit-animation: spark68 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark68 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(68) .fire {
-webkit-animation: fire 1119ms -413ms linear infinite;
animation: fire 1119ms -413ms linear infinite;
}
@-webkit-keyframes spark68 {
0% {
transform: translateY(626px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(224deg) translateX(271px);
}
}
@keyframes spark68 {
0% {
transform: translateY(626px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(224deg) translateX(271px);
}
}
.line:nth-child(69) {
transform: rotateY(9deg);
}
.line:nth-child(69) .spark {
width: 207px;
height: 262px;
-webkit-animation: spark69 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark69 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(69) .fire {
-webkit-animation: fire 1809ms -801ms linear infinite;
animation: fire 1809ms -801ms linear infinite;
}
@-webkit-keyframes spark69 {
0% {
transform: translateY(634px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(329deg) translateX(204px);
}
}
@keyframes spark69 {
0% {
transform: translateY(634px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(329deg) translateX(204px);
}
}
.line:nth-child(70) {
transform: rotateY(150deg);
}
.line:nth-child(70) .spark {
width: 307px;
height: 394px;
-webkit-animation: spark70 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark70 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(70) .fire {
-webkit-animation: fire 1226ms -881ms linear infinite;
animation: fire 1226ms -881ms linear infinite;
}
@-webkit-keyframes spark70 {
0% {
transform: translateY(545px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(151deg) translateX(276px);
}
}
@keyframes spark70 {
0% {
transform: translateY(545px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(151deg) translateX(276px);
}
}
.line:nth-child(71) {
transform: rotateY(239deg);
}
.line:nth-child(71) .spark {
width: 250px;
height: 356px;
-webkit-animation: spark71 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark71 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(71) .fire {
-webkit-animation: fire 1244ms -998ms linear infinite;
animation: fire 1244ms -998ms linear infinite;
}
@-webkit-keyframes spark71 {
0% {
transform: translateY(579px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(174deg) translateX(295px);
}
}
@keyframes spark71 {
0% {
transform: translateY(579px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(174deg) translateX(295px);
}
}
.line:nth-child(72) {
transform: rotateY(223deg);
}
.line:nth-child(72) .spark {
width: 321px;
height: 366px;
-webkit-animation: spark72 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark72 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(72) .fire {
-webkit-animation: fire 1152ms -706ms linear infinite;
animation: fire 1152ms -706ms linear infinite;
}
@-webkit-keyframes spark72 {
0% {
transform: translateY(561px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(184deg) translateX(142px);
}
}
@keyframes spark72 {
0% {
transform: translateY(561px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(184deg) translateX(142px);
}
}
.line:nth-child(73) {
transform: rotateY(101deg);
}
.line:nth-child(73) .spark {
width: 206px;
height: 214px;
-webkit-animation: spark73 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark73 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(73) .fire {
-webkit-animation: fire 1129ms -398ms linear infinite;
animation: fire 1129ms -398ms linear infinite;
}
@-webkit-keyframes spark73 {
0% {
transform: translateY(587px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(20deg) translateX(181px);
}
}
@keyframes spark73 {
0% {
transform: translateY(587px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(20deg) translateX(181px);
}
}
.line:nth-child(74) {
transform: rotateY(23deg);
}
.line:nth-child(74) .spark {
width: 368px;
height: 398px;
-webkit-animation: spark74 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark74 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(74) .fire {
-webkit-animation: fire 1463ms -91ms linear infinite;
animation: fire 1463ms -91ms linear infinite;
}
@-webkit-keyframes spark74 {
0% {
transform: translateY(534px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(234deg) translateX(219px);
}
}
@keyframes spark74 {
0% {
transform: translateY(534px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(234deg) translateX(219px);
}
}
.line:nth-child(75) {
transform: rotateY(195deg);
}
.line:nth-child(75) .spark {
width: 228px;
height: 352px;
-webkit-animation: spark75 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark75 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(75) .fire {
-webkit-animation: fire 1245ms -945ms linear infinite;
animation: fire 1245ms -945ms linear infinite;
}
@-webkit-keyframes spark75 {
0% {
transform: translateY(552px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(247deg) translateX(158px);
}
}
@keyframes spark75 {
0% {
transform: translateY(552px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(247deg) translateX(158px);
}
}
.line:nth-child(76) {
transform: rotateY(203deg);
}
.line:nth-child(76) .spark {
width: 275px;
height: 396px;
-webkit-animation: spark76 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark76 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(76) .fire {
-webkit-animation: fire 1143ms -858ms linear infinite;
animation: fire 1143ms -858ms linear infinite;
}
@-webkit-keyframes spark76 {
0% {
transform: translateY(532px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(255deg) translateX(214px);
}
}
@keyframes spark76 {
0% {
transform: translateY(532px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(255deg) translateX(214px);
}
}
.line:nth-child(77) {
transform: rotateY(281deg);
}
.line:nth-child(77) .spark {
width: 250px;
height: 249px;
-webkit-animation: spark77 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark77 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(77) .fire {
-webkit-animation: fire 1130ms -199ms linear infinite;
animation: fire 1130ms -199ms linear infinite;
}
@-webkit-keyframes spark77 {
0% {
transform: translateY(573px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(266deg) translateX(262px);
}
}
@keyframes spark77 {
0% {
transform: translateY(573px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(266deg) translateX(262px);
}
}
.line:nth-child(78) {
transform: rotateY(342deg);
}
.line:nth-child(78) .spark {
width: 342px;
height: 331px;
-webkit-animation: spark78 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark78 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(78) .fire {
-webkit-animation: fire 1332ms -184ms linear infinite;
animation: fire 1332ms -184ms linear infinite;
}
@-webkit-keyframes spark78 {
0% {
transform: translateY(593px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(168deg) translateX(247px);
}
}
@keyframes spark78 {
0% {
transform: translateY(593px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(168deg) translateX(247px);
}
}
.line:nth-child(79) {
transform: rotateY(204deg);
}
.line:nth-child(79) .spark {
width: 361px;
height: 214px;
-webkit-animation: spark79 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark79 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(79) .fire {
-webkit-animation: fire 1549ms -283ms linear infinite;
animation: fire 1549ms -283ms linear infinite;
}
@-webkit-keyframes spark79 {
0% {
transform: translateY(612px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(328deg) translateX(120px);
}
}
@keyframes spark79 {
0% {
transform: translateY(612px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(328deg) translateX(120px);
}
}
.line:nth-child(80) {
transform: rotateY(156deg);
}
.line:nth-child(80) .spark {
width: 220px;
height: 233px;
-webkit-animation: spark80 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark80 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(80) .fire {
-webkit-animation: fire 1125ms -115ms linear infinite;
animation: fire 1125ms -115ms linear infinite;
}
@-webkit-keyframes spark80 {
0% {
transform: translateY(501px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(176deg) translateX(155px);
}
}
@keyframes spark80 {
0% {
transform: translateY(501px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(176deg) translateX(155px);
}
}
.line:nth-child(81) {
transform: rotateY(185deg);
}
.line:nth-child(81) .spark {
width: 367px;
height: 397px;
-webkit-animation: spark81 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark81 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(81) .fire {
-webkit-animation: fire 1469ms -171ms linear infinite;
animation: fire 1469ms -171ms linear infinite;
}
@-webkit-keyframes spark81 {
0% {
transform: translateY(633px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(203deg) translateX(223px);
}
}
@keyframes spark81 {
0% {
transform: translateY(633px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(203deg) translateX(223px);
}
}
.line:nth-child(82) {
transform: rotateY(90deg);
}
.line:nth-child(82) .spark {
width: 341px;
height: 365px;
-webkit-animation: spark82 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark82 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(82) .fire {
-webkit-animation: fire 1537ms -733ms linear infinite;
animation: fire 1537ms -733ms linear infinite;
}
@-webkit-keyframes spark82 {
0% {
transform: translateY(620px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(332deg) translateX(167px);
}
}
@keyframes spark82 {
0% {
transform: translateY(620px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(332deg) translateX(167px);
}
}
.line:nth-child(83) {
transform: rotateY(196deg);
}
.line:nth-child(83) .spark {
width: 212px;
height: 210px;
-webkit-animation: spark83 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark83 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(83) .fire {
-webkit-animation: fire 1129ms -564ms linear infinite;
animation: fire 1129ms -564ms linear infinite;
}
@-webkit-keyframes spark83 {
0% {
transform: translateY(635px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(103deg) translateX(269px);
}
}
@keyframes spark83 {
0% {
transform: translateY(635px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(103deg) translateX(269px);
}
}
.line:nth-child(84) {
transform: rotateY(14deg);
}
.line:nth-child(84) .spark {
width: 389px;
height: 375px;
-webkit-animation: spark84 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark84 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(84) .fire {
-webkit-animation: fire 1016ms -341ms linear infinite;
animation: fire 1016ms -341ms linear infinite;
}
@-webkit-keyframes spark84 {
0% {
transform: translateY(640px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(201deg) translateX(142px);
}
}
@keyframes spark84 {
0% {
transform: translateY(640px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(201deg) translateX(142px);
}
}
.line:nth-child(85) {
transform: rotateY(162deg);
}
.line:nth-child(85) .spark {
width: 260px;
height: 233px;
-webkit-animation: spark85 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark85 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(85) .fire {
-webkit-animation: fire 1894ms -419ms linear infinite;
animation: fire 1894ms -419ms linear infinite;
}
@-webkit-keyframes spark85 {
0% {
transform: translateY(516px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(319deg) translateX(183px);
}
}
@keyframes spark85 {
0% {
transform: translateY(516px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(319deg) translateX(183px);
}
}
.line:nth-child(86) {
transform: rotateY(20deg);
}
.line:nth-child(86) .spark {
width: 206px;
height: 231px;
-webkit-animation: spark86 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark86 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(86) .fire {
-webkit-animation: fire 1761ms -745ms linear infinite;
animation: fire 1761ms -745ms linear infinite;
}
@-webkit-keyframes spark86 {
0% {
transform: translateY(544px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(142deg) translateX(136px);
}
}
@keyframes spark86 {
0% {
transform: translateY(544px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(142deg) translateX(136px);
}
}
.line:nth-child(87) {
transform: rotateY(258deg);
}
.line:nth-child(87) .spark {
width: 328px;
height: 242px;
-webkit-animation: spark87 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark87 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(87) .fire {
-webkit-animation: fire 1118ms -222ms linear infinite;
animation: fire 1118ms -222ms linear infinite;
}
@-webkit-keyframes spark87 {
0% {
transform: translateY(534px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(101deg) translateX(296px);
}
}
@keyframes spark87 {
0% {
transform: translateY(534px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(101deg) translateX(296px);
}
}
.line:nth-child(88) {
transform: rotateY(154deg);
}
.line:nth-child(88) .spark {
width: 318px;
height: 243px;
-webkit-animation: spark88 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark88 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(88) .fire {
-webkit-animation: fire 1617ms -32ms linear infinite;
animation: fire 1617ms -32ms linear infinite;
}
@-webkit-keyframes spark88 {
0% {
transform: translateY(645px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(215deg) translateX(247px);
}
}
@keyframes spark88 {
0% {
transform: translateY(645px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(215deg) translateX(247px);
}
}
.line:nth-child(89) {
transform: rotateY(188deg);
}
.line:nth-child(89) .spark {
width: 239px;
height: 216px;
-webkit-animation: spark89 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark89 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(89) .fire {
-webkit-animation: fire 1107ms -73ms linear infinite;
animation: fire 1107ms -73ms linear infinite;
}
@-webkit-keyframes spark89 {
0% {
transform: translateY(588px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(86deg) translateX(148px);
}
}
@keyframes spark89 {
0% {
transform: translateY(588px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(86deg) translateX(148px);
}
}
.line:nth-child(90) {
transform: rotateY(231deg);
}
.line:nth-child(90) .spark {
width: 276px;
height: 398px;
-webkit-animation: spark90 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark90 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(90) .fire {
-webkit-animation: fire 1290ms -844ms linear infinite;
animation: fire 1290ms -844ms linear infinite;
}
@-webkit-keyframes spark90 {
0% {
transform: translateY(624px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(305deg) translateX(200px);
}
}
@keyframes spark90 {
0% {
transform: translateY(624px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(305deg) translateX(200px);
}
}
.line:nth-child(91) {
transform: rotateY(283deg);
}
.line:nth-child(91) .spark {
width: 207px;
height: 365px;
-webkit-animation: spark91 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark91 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(91) .fire {
-webkit-animation: fire 1786ms -567ms linear infinite;
animation: fire 1786ms -567ms linear infinite;
}
@-webkit-keyframes spark91 {
0% {
transform: translateY(646px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(291deg) translateX(286px);
}
}
@keyframes spark91 {
0% {
transform: translateY(646px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(291deg) translateX(286px);
}
}
.line:nth-child(92) {
transform: rotateY(255deg);
}
.line:nth-child(92) .spark {
width: 331px;
height: 375px;
-webkit-animation: spark92 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark92 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(92) .fire {
-webkit-animation: fire 1726ms -622ms linear infinite;
animation: fire 1726ms -622ms linear infinite;
}
@-webkit-keyframes spark92 {
0% {
transform: translateY(637px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(25deg) translateX(292px);
}
}
@keyframes spark92 {
0% {
transform: translateY(637px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(25deg) translateX(292px);
}
}
.line:nth-child(93) {
transform: rotateY(158deg);
}
.line:nth-child(93) .spark {
width: 319px;
height: 267px;
-webkit-animation: spark93 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark93 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(93) .fire {
-webkit-animation: fire 1946ms -122ms linear infinite;
animation: fire 1946ms -122ms linear infinite;
}
@-webkit-keyframes spark93 {
0% {
transform: translateY(574px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(317deg) translateX(154px);
}
}
@keyframes spark93 {
0% {
transform: translateY(574px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(317deg) translateX(154px);
}
}
.line:nth-child(94) {
transform: rotateY(85deg);
}
.line:nth-child(94) .spark {
width: 245px;
height: 381px;
-webkit-animation: spark94 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark94 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(94) .fire {
-webkit-animation: fire 1777ms -94ms linear infinite;
animation: fire 1777ms -94ms linear infinite;
}
@-webkit-keyframes spark94 {
0% {
transform: translateY(502px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(183deg) translateX(143px);
}
}
@keyframes spark94 {
0% {
transform: translateY(502px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(183deg) translateX(143px);
}
}
.line:nth-child(95) {
transform: rotateY(26deg);
}
.line:nth-child(95) .spark {
width: 322px;
height: 245px;
-webkit-animation: spark95 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark95 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(95) .fire {
-webkit-animation: fire 1104ms -284ms linear infinite;
animation: fire 1104ms -284ms linear infinite;
}
@-webkit-keyframes spark95 {
0% {
transform: translateY(635px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(56deg) translateX(227px);
}
}
@keyframes spark95 {
0% {
transform: translateY(635px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(56deg) translateX(227px);
}
}
.line:nth-child(96) {
transform: rotateY(43deg);
}
.line:nth-child(96) .spark {
width: 240px;
height: 257px;
-webkit-animation: spark96 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark96 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(96) .fire {
-webkit-animation: fire 1593ms -703ms linear infinite;
animation: fire 1593ms -703ms linear infinite;
}
@-webkit-keyframes spark96 {
0% {
transform: translateY(520px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(2deg) translateX(101px);
}
}
@keyframes spark96 {
0% {
transform: translateY(520px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(2deg) translateX(101px);
}
}
.line:nth-child(97) {
transform: rotateY(160deg);
}
.line:nth-child(97) .spark {
width: 274px;
height: 324px;
-webkit-animation: spark97 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark97 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(97) .fire {
-webkit-animation: fire 1779ms -656ms linear infinite;
animation: fire 1779ms -656ms linear infinite;
}
@-webkit-keyframes spark97 {
0% {
transform: translateY(646px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(120deg) translateX(168px);
}
}
@keyframes spark97 {
0% {
transform: translateY(646px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(120deg) translateX(168px);
}
}
.line:nth-child(98) {
transform: rotateY(251deg);
}
.line:nth-child(98) .spark {
width: 242px;
height: 208px;
-webkit-animation: spark98 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark98 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(98) .fire {
-webkit-animation: fire 1337ms -909ms linear infinite;
animation: fire 1337ms -909ms linear infinite;
}
@-webkit-keyframes spark98 {
0% {
transform: translateY(531px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(257deg) translateX(283px);
}
}
@keyframes spark98 {
0% {
transform: translateY(531px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(257deg) translateX(283px);
}
}
.line:nth-child(99) {
transform: rotateY(277deg);
}
.line:nth-child(99) .spark {
width: 294px;
height: 245px;
-webkit-animation: spark99 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark99 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(99) .fire {
-webkit-animation: fire 1334ms -178ms linear infinite;
animation: fire 1334ms -178ms linear infinite;
}
@-webkit-keyframes spark99 {
0% {
transform: translateY(570px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(178deg) translateX(263px);
}
}
@keyframes spark99 {
0% {
transform: translateY(570px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(178deg) translateX(263px);
}
}
.line:nth-child(100) {
transform: rotateY(103deg);
}
.line:nth-child(100) .spark {
width: 237px;
height: 398px;
-webkit-animation: spark100 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark100 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(100) .fire {
-webkit-animation: fire 1208ms -629ms linear infinite;
animation: fire 1208ms -629ms linear infinite;
}
@-webkit-keyframes spark100 {
0% {
transform: translateY(597px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(352deg) translateX(111px);
}
}
@keyframes spark100 {
0% {
transform: translateY(597px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(352deg) translateX(111px);
}
}
.line:nth-child(101) {
transform: rotateY(306deg);
}
.line:nth-child(101) .spark {
width: 255px;
height: 231px;
-webkit-animation: spark101 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark101 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(101) .fire {
-webkit-animation: fire 1893ms -432ms linear infinite;
animation: fire 1893ms -432ms linear infinite;
}
@-webkit-keyframes spark101 {
0% {
transform: translateY(645px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(163deg) translateX(287px);
}
}
@keyframes spark101 {
0% {
transform: translateY(645px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(163deg) translateX(287px);
}
}
.line:nth-child(102) {
transform: rotateY(232deg);
}
.line:nth-child(102) .spark {
width: 320px;
height: 367px;
-webkit-animation: spark102 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark102 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(102) .fire {
-webkit-animation: fire 1632ms -387ms linear infinite;
animation: fire 1632ms -387ms linear infinite;
}
@-webkit-keyframes spark102 {
0% {
transform: translateY(638px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(152deg) translateX(253px);
}
}
@keyframes spark102 {
0% {
transform: translateY(638px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(152deg) translateX(253px);
}
}
.line:nth-child(103) {
transform: rotateY(255deg);
}
.line:nth-child(103) .spark {
width: 304px;
height: 271px;
-webkit-animation: spark103 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark103 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(103) .fire {
-webkit-animation: fire 1909ms -853ms linear infinite;
animation: fire 1909ms -853ms linear infinite;
}
@-webkit-keyframes spark103 {
0% {
transform: translateY(528px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(330deg) translateX(266px);
}
}
@keyframes spark103 {
0% {
transform: translateY(528px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(330deg) translateX(266px);
}
}
.line:nth-child(104) {
transform: rotateY(190deg);
}
.line:nth-child(104) .spark {
width: 254px;
height: 252px;
-webkit-animation: spark104 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark104 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(104) .fire {
-webkit-animation: fire 1547ms -334ms linear infinite;
animation: fire 1547ms -334ms linear infinite;
}
@-webkit-keyframes spark104 {
0% {
transform: translateY(506px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(317deg) translateX(212px);
}
}
@keyframes spark104 {
0% {
transform: translateY(506px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(317deg) translateX(212px);
}
}
.line:nth-child(105) {
transform: rotateY(327deg);
}
.line:nth-child(105) .spark {
width: 341px;
height: 397px;
-webkit-animation: spark105 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark105 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(105) .fire {
-webkit-animation: fire 1629ms -60ms linear infinite;
animation: fire 1629ms -60ms linear infinite;
}
@-webkit-keyframes spark105 {
0% {
transform: translateY(616px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(314deg) translateX(112px);
}
}
@keyframes spark105 {
0% {
transform: translateY(616px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(314deg) translateX(112px);
}
}
.line:nth-child(106) {
transform: rotateY(102deg);
}
.line:nth-child(106) .spark {
width: 320px;
height: 232px;
-webkit-animation: spark106 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark106 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(106) .fire {
-webkit-animation: fire 1471ms -747ms linear infinite;
animation: fire 1471ms -747ms linear infinite;
}
@-webkit-keyframes spark106 {
0% {
transform: translateY(590px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(116deg) translateX(127px);
}
}
@keyframes spark106 {
0% {
transform: translateY(590px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(116deg) translateX(127px);
}
}
.line:nth-child(107) {
transform: rotateY(46deg);
}
.line:nth-child(107) .spark {
width: 333px;
height: 233px;
-webkit-animation: spark107 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark107 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(107) .fire {
-webkit-animation: fire 1997ms -911ms linear infinite;
animation: fire 1997ms -911ms linear infinite;
}
@-webkit-keyframes spark107 {
0% {
transform: translateY(535px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(122deg) translateX(280px);
}
}
@keyframes spark107 {
0% {
transform: translateY(535px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(122deg) translateX(280px);
}
}
.line:nth-child(108) {
transform: rotateY(334deg);
}
.line:nth-child(108) .spark {
width: 301px;
height: 209px;
-webkit-animation: spark108 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark108 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(108) .fire {
-webkit-animation: fire 1408ms -456ms linear infinite;
animation: fire 1408ms -456ms linear infinite;
}
@-webkit-keyframes spark108 {
0% {
transform: translateY(518px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(102deg) translateX(199px);
}
}
@keyframes spark108 {
0% {
transform: translateY(518px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(102deg) translateX(199px);
}
}
.line:nth-child(109) {
transform: rotateY(228deg);
}
.line:nth-child(109) .spark {
width: 391px;
height: 384px;
-webkit-animation: spark109 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark109 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(109) .fire {
-webkit-animation: fire 1351ms -776ms linear infinite;
animation: fire 1351ms -776ms linear infinite;
}
@-webkit-keyframes spark109 {
0% {
transform: translateY(579px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(126deg) translateX(281px);
}
}
@keyframes spark109 {
0% {
transform: translateY(579px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(126deg) translateX(281px);
}
}
.line:nth-child(110) {
transform: rotateY(219deg);
}
.line:nth-child(110) .spark {
width: 336px;
height: 306px;
-webkit-animation: spark110 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark110 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(110) .fire {
-webkit-animation: fire 1114ms -463ms linear infinite;
animation: fire 1114ms -463ms linear infinite;
}
@-webkit-keyframes spark110 {
0% {
transform: translateY(640px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(172deg) translateX(273px);
}
}
@keyframes spark110 {
0% {
transform: translateY(640px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(172deg) translateX(273px);
}
}
.line:nth-child(111) {
transform: rotateY(97deg);
}
.line:nth-child(111) .spark {
width: 229px;
height: 335px;
-webkit-animation: spark111 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark111 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(111) .fire {
-webkit-animation: fire 1406ms -933ms linear infinite;
animation: fire 1406ms -933ms linear infinite;
}
@-webkit-keyframes spark111 {
0% {
transform: translateY(590px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(132deg) translateX(209px);
}
}
@keyframes spark111 {
0% {
transform: translateY(590px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(132deg) translateX(209px);
}
}
.line:nth-child(112) {
transform: rotateY(65deg);
}
.line:nth-child(112) .spark {
width: 331px;
height: 280px;
-webkit-animation: spark112 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark112 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(112) .fire {
-webkit-animation: fire 1793ms -592ms linear infinite;
animation: fire 1793ms -592ms linear infinite;
}
@-webkit-keyframes spark112 {
0% {
transform: translateY(505px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(200deg) translateX(288px);
}
}
@keyframes spark112 {
0% {
transform: translateY(505px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(200deg) translateX(288px);
}
}
.line:nth-child(113) {
transform: rotateY(16deg);
}
.line:nth-child(113) .spark {
width: 400px;
height: 376px;
-webkit-animation: spark113 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark113 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(113) .fire {
-webkit-animation: fire 1417ms -691ms linear infinite;
animation: fire 1417ms -691ms linear infinite;
}
@-webkit-keyframes spark113 {
0% {
transform: translateY(511px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(329deg) translateX(299px);
}
}
@keyframes spark113 {
0% {
transform: translateY(511px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(329deg) translateX(299px);
}
}
.line:nth-child(114) {
transform: rotateY(244deg);
}
.line:nth-child(114) .spark {
width: 332px;
height: 294px;
-webkit-animation: spark114 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark114 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(114) .fire {
-webkit-animation: fire 1141ms -29ms linear infinite;
animation: fire 1141ms -29ms linear infinite;
}
@-webkit-keyframes spark114 {
0% {
transform: translateY(624px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(12deg) translateX(283px);
}
}
@keyframes spark114 {
0% {
transform: translateY(624px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(12deg) translateX(283px);
}
}
.line:nth-child(115) {
transform: rotateY(220deg);
}
.line:nth-child(115) .spark {
width: 299px;
height: 352px;
-webkit-animation: spark115 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark115 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(115) .fire {
-webkit-animation: fire 1186ms -436ms linear infinite;
animation: fire 1186ms -436ms linear infinite;
}
@-webkit-keyframes spark115 {
0% {
transform: translateY(605px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(176deg) translateX(274px);
}
}
@keyframes spark115 {
0% {
transform: translateY(605px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(176deg) translateX(274px);
}
}
.line:nth-child(116) {
transform: rotateY(111deg);
}
.line:nth-child(116) .spark {
width: 336px;
height: 390px;
-webkit-animation: spark116 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark116 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(116) .fire {
-webkit-animation: fire 1692ms -458ms linear infinite;
animation: fire 1692ms -458ms linear infinite;
}
@-webkit-keyframes spark116 {
0% {
transform: translateY(610px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(62deg) translateX(164px);
}
}
@keyframes spark116 {
0% {
transform: translateY(610px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(62deg) translateX(164px);
}
}
.line:nth-child(117) {
transform: rotateY(357deg);
}
.line:nth-child(117) .spark {
width: 303px;
height: 307px;
-webkit-animation: spark117 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark117 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(117) .fire {
-webkit-animation: fire 1977ms -383ms linear infinite;
animation: fire 1977ms -383ms linear infinite;
}
@-webkit-keyframes spark117 {
0% {
transform: translateY(618px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(26deg) translateX(212px);
}
}
@keyframes spark117 {
0% {
transform: translateY(618px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(26deg) translateX(212px);
}
}
.line:nth-child(118) {
transform: rotateY(307deg);
}
.line:nth-child(118) .spark {
width: 371px;
height: 347px;
-webkit-animation: spark118 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark118 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(118) .fire {
-webkit-animation: fire 1409ms -664ms linear infinite;
animation: fire 1409ms -664ms linear infinite;
}
@-webkit-keyframes spark118 {
0% {
transform: translateY(641px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(63deg) translateX(154px);
}
}
@keyframes spark118 {
0% {
transform: translateY(641px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(63deg) translateX(154px);
}
}
.line:nth-child(119) {
transform: rotateY(55deg);
}
.line:nth-child(119) .spark {
width: 351px;
height: 365px;
-webkit-animation: spark119 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark119 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(119) .fire {
-webkit-animation: fire 1454ms -338ms linear infinite;
animation: fire 1454ms -338ms linear infinite;
}
@-webkit-keyframes spark119 {
0% {
transform: translateY(519px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(69deg) translateX(224px);
}
}
@keyframes spark119 {
0% {
transform: translateY(519px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(69deg) translateX(224px);
}
}
.line:nth-child(120) {
transform: rotateY(323deg);
}
.line:nth-child(120) .spark {
width: 244px;
height: 346px;
-webkit-animation: spark120 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark120 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(120) .fire {
-webkit-animation: fire 1040ms -475ms linear infinite;
animation: fire 1040ms -475ms linear infinite;
}
@-webkit-keyframes spark120 {
0% {
transform: translateY(578px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(46deg) translateX(121px);
}
}
@keyframes spark120 {
0% {
transform: translateY(578px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(46deg) translateX(121px);
}
}
.line:nth-child(121) {
transform: rotateY(198deg);
}
.line:nth-child(121) .spark {
width: 238px;
height: 288px;
-webkit-animation: spark121 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark121 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(121) .fire {
-webkit-animation: fire 1119ms -194ms linear infinite;
animation: fire 1119ms -194ms linear infinite;
}
@-webkit-keyframes spark121 {
0% {
transform: translateY(547px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(271deg) translateX(182px);
}
}
@keyframes spark121 {
0% {
transform: translateY(547px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(271deg) translateX(182px);
}
}
.line:nth-child(122) {
transform: rotateY(33deg);
}
.line:nth-child(122) .spark {
width: 216px;
height: 343px;
-webkit-animation: spark122 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark122 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(122) .fire {
-webkit-animation: fire 1931ms -90ms linear infinite;
animation: fire 1931ms -90ms linear infinite;
}
@-webkit-keyframes spark122 {
0% {
transform: translateY(579px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(5deg) translateX(273px);
}
}
@keyframes spark122 {
0% {
transform: translateY(579px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(5deg) translateX(273px);
}
}
.line:nth-child(123) {
transform: rotateY(8deg);
}
.line:nth-child(123) .spark {
width: 220px;
height: 368px;
-webkit-animation: spark123 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark123 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(123) .fire {
-webkit-animation: fire 1579ms -755ms linear infinite;
animation: fire 1579ms -755ms linear infinite;
}
@-webkit-keyframes spark123 {
0% {
transform: translateY(565px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(13deg) translateX(277px);
}
}
@keyframes spark123 {
0% {
transform: translateY(565px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(13deg) translateX(277px);
}
}
.line:nth-child(124) {
transform: rotateY(297deg);
}
.line:nth-child(124) .spark {
width: 255px;
height: 369px;
-webkit-animation: spark124 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark124 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(124) .fire {
-webkit-animation: fire 1296ms -598ms linear infinite;
animation: fire 1296ms -598ms linear infinite;
}
@-webkit-keyframes spark124 {
0% {
transform: translateY(553px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(123deg) translateX(182px);
}
}
@keyframes spark124 {
0% {
transform: translateY(553px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(123deg) translateX(182px);
}
}
.line:nth-child(125) {
transform: rotateY(120deg);
}
.line:nth-child(125) .spark {
width: 252px;
height: 337px;
-webkit-animation: spark125 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark125 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(125) .fire {
-webkit-animation: fire 1466ms -758ms linear infinite;
animation: fire 1466ms -758ms linear infinite;
}
@-webkit-keyframes spark125 {
0% {
transform: translateY(541px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(165deg) translateX(124px);
}
}
@keyframes spark125 {
0% {
transform: translateY(541px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(165deg) translateX(124px);
}
}
.line:nth-child(126) {
transform: rotateY(138deg);
}
.line:nth-child(126) .spark {
width: 201px;
height: 242px;
-webkit-animation: spark126 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark126 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(126) .fire {
-webkit-animation: fire 1687ms -11ms linear infinite;
animation: fire 1687ms -11ms linear infinite;
}
@-webkit-keyframes spark126 {
0% {
transform: translateY(512px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(45deg) translateX(231px);
}
}
@keyframes spark126 {
0% {
transform: translateY(512px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(45deg) translateX(231px);
}
}
.line:nth-child(127) {
transform: rotateY(342deg);
}
.line:nth-child(127) .spark {
width: 364px;
height: 292px;
-webkit-animation: spark127 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark127 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(127) .fire {
-webkit-animation: fire 1312ms -756ms linear infinite;
animation: fire 1312ms -756ms linear infinite;
}
@-webkit-keyframes spark127 {
0% {
transform: translateY(536px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(206deg) translateX(200px);
}
}
@keyframes spark127 {
0% {
transform: translateY(536px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(206deg) translateX(200px);
}
}
.line:nth-child(128) {
transform: rotateY(320deg);
}
.line:nth-child(128) .spark {
width: 387px;
height: 209px;
-webkit-animation: spark128 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark128 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(128) .fire {
-webkit-animation: fire 1933ms -880ms linear infinite;
animation: fire 1933ms -880ms linear infinite;
}
@-webkit-keyframes spark128 {
0% {
transform: translateY(502px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(204deg) translateX(132px);
}
}
@keyframes spark128 {
0% {
transform: translateY(502px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(204deg) translateX(132px);
}
}
.line:nth-child(129) {
transform: rotateY(68deg);
}
.line:nth-child(129) .spark {
width: 335px;
height: 260px;
-webkit-animation: spark129 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark129 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(129) .fire {
-webkit-animation: fire 1175ms -230ms linear infinite;
animation: fire 1175ms -230ms linear infinite;
}
@-webkit-keyframes spark129 {
0% {
transform: translateY(588px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(342deg) translateX(149px);
}
}
@keyframes spark129 {
0% {
transform: translateY(588px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(342deg) translateX(149px);
}
}
.line:nth-child(130) {
transform: rotateY(171deg);
}
.line:nth-child(130) .spark {
width: 384px;
height: 310px;
-webkit-animation: spark130 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark130 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(130) .fire {
-webkit-animation: fire 1847ms -269ms linear infinite;
animation: fire 1847ms -269ms linear infinite;
}
@-webkit-keyframes spark130 {
0% {
transform: translateY(615px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(299deg) translateX(245px);
}
}
@keyframes spark130 {
0% {
transform: translateY(615px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(299deg) translateX(245px);
}
}
.line:nth-child(131) {
transform: rotateY(262deg);
}
.line:nth-child(131) .spark {
width: 269px;
height: 253px;
-webkit-animation: spark131 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark131 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(131) .fire {
-webkit-animation: fire 1441ms -421ms linear infinite;
animation: fire 1441ms -421ms linear infinite;
}
@-webkit-keyframes spark131 {
0% {
transform: translateY(522px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(245deg) translateX(222px);
}
}
@keyframes spark131 {
0% {
transform: translateY(522px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(245deg) translateX(222px);
}
}
.line:nth-child(132) {
transform: rotateY(287deg);
}
.line:nth-child(132) .spark {
width: 276px;
height: 213px;
-webkit-animation: spark132 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark132 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(132) .fire {
-webkit-animation: fire 1351ms -729ms linear infinite;
animation: fire 1351ms -729ms linear infinite;
}
@-webkit-keyframes spark132 {
0% {
transform: translateY(515px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(82deg) translateX(246px);
}
}
@keyframes spark132 {
0% {
transform: translateY(515px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(82deg) translateX(246px);
}
}
.line:nth-child(133) {
transform: rotateY(239deg);
}
.line:nth-child(133) .spark {
width: 239px;
height: 270px;
-webkit-animation: spark133 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark133 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(133) .fire {
-webkit-animation: fire 1429ms -514ms linear infinite;
animation: fire 1429ms -514ms linear infinite;
}
@-webkit-keyframes spark133 {
0% {
transform: translateY(590px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(177deg) translateX(268px);
}
}
@keyframes spark133 {
0% {
transform: translateY(590px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(177deg) translateX(268px);
}
}
.line:nth-child(134) {
transform: rotateY(246deg);
}
.line:nth-child(134) .spark {
width: 330px;
height: 252px;
-webkit-animation: spark134 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark134 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(134) .fire {
-webkit-animation: fire 1492ms -666ms linear infinite;
animation: fire 1492ms -666ms linear infinite;
}
@-webkit-keyframes spark134 {
0% {
transform: translateY(631px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(47deg) translateX(107px);
}
}
@keyframes spark134 {
0% {
transform: translateY(631px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(47deg) translateX(107px);
}
}
.line:nth-child(135) {
transform: rotateY(11deg);
}
.line:nth-child(135) .spark {
width: 203px;
height: 313px;
-webkit-animation: spark135 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark135 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(135) .fire {
-webkit-animation: fire 1910ms -361ms linear infinite;
animation: fire 1910ms -361ms linear infinite;
}
@-webkit-keyframes spark135 {
0% {
transform: translateY(535px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(295deg) translateX(238px);
}
}
@keyframes spark135 {
0% {
transform: translateY(535px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(295deg) translateX(238px);
}
}
.line:nth-child(136) {
transform: rotateY(28deg);
}
.line:nth-child(136) .spark {
width: 312px;
height: 276px;
-webkit-animation: spark136 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark136 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(136) .fire {
-webkit-animation: fire 1004ms -524ms linear infinite;
animation: fire 1004ms -524ms linear infinite;
}
@-webkit-keyframes spark136 {
0% {
transform: translateY(623px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(186deg) translateX(263px);
}
}
@keyframes spark136 {
0% {
transform: translateY(623px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(186deg) translateX(263px);
}
}
.line:nth-child(137) {
transform: rotateY(127deg);
}
.line:nth-child(137) .spark {
width: 293px;
height: 282px;
-webkit-animation: spark137 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark137 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(137) .fire {
-webkit-animation: fire 1067ms -537ms linear infinite;
animation: fire 1067ms -537ms linear infinite;
}
@-webkit-keyframes spark137 {
0% {
transform: translateY(546px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(85deg) translateX(168px);
}
}
@keyframes spark137 {
0% {
transform: translateY(546px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(85deg) translateX(168px);
}
}
.line:nth-child(138) {
transform: rotateY(224deg);
}
.line:nth-child(138) .spark {
width: 243px;
height: 339px;
-webkit-animation: spark138 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark138 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(138) .fire {
-webkit-animation: fire 1004ms -375ms linear infinite;
animation: fire 1004ms -375ms linear infinite;
}
@-webkit-keyframes spark138 {
0% {
transform: translateY(644px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(247deg) translateX(265px);
}
}
@keyframes spark138 {
0% {
transform: translateY(644px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(247deg) translateX(265px);
}
}
.line:nth-child(139) {
transform: rotateY(216deg);
}
.line:nth-child(139) .spark {
width: 218px;
height: 358px;
-webkit-animation: spark139 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark139 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(139) .fire {
-webkit-animation: fire 1412ms -764ms linear infinite;
animation: fire 1412ms -764ms linear infinite;
}
@-webkit-keyframes spark139 {
0% {
transform: translateY(551px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(290deg) translateX(139px);
}
}
@keyframes spark139 {
0% {
transform: translateY(551px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(290deg) translateX(139px);
}
}
.line:nth-child(140) {
transform: rotateY(66deg);
}
.line:nth-child(140) .spark {
width: 205px;
height: 399px;
-webkit-animation: spark140 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark140 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(140) .fire {
-webkit-animation: fire 1721ms -406ms linear infinite;
animation: fire 1721ms -406ms linear infinite;
}
@-webkit-keyframes spark140 {
0% {
transform: translateY(565px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(218deg) translateX(128px);
}
}
@keyframes spark140 {
0% {
transform: translateY(565px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(218deg) translateX(128px);
}
}
.line:nth-child(141) {
transform: rotateY(148deg);
}
.line:nth-child(141) .spark {
width: 273px;
height: 230px;
-webkit-animation: spark141 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark141 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(141) .fire {
-webkit-animation: fire 1452ms -331ms linear infinite;
animation: fire 1452ms -331ms linear infinite;
}
@-webkit-keyframes spark141 {
0% {
transform: translateY(575px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(89deg) translateX(112px);
}
}
@keyframes spark141 {
0% {
transform: translateY(575px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(89deg) translateX(112px);
}
}
.line:nth-child(142) {
transform: rotateY(262deg);
}
.line:nth-child(142) .spark {
width: 239px;
height: 273px;
-webkit-animation: spark142 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark142 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(142) .fire {
-webkit-animation: fire 1654ms -602ms linear infinite;
animation: fire 1654ms -602ms linear infinite;
}
@-webkit-keyframes spark142 {
0% {
transform: translateY(593px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(73deg) translateX(141px);
}
}
@keyframes spark142 {
0% {
transform: translateY(593px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(73deg) translateX(141px);
}
}
.line:nth-child(143) {
transform: rotateY(247deg);
}
.line:nth-child(143) .spark {
width: 257px;
height: 209px;
-webkit-animation: spark143 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark143 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(143) .fire {
-webkit-animation: fire 1459ms -93ms linear infinite;
animation: fire 1459ms -93ms linear infinite;
}
@-webkit-keyframes spark143 {
0% {
transform: translateY(560px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(148deg) translateX(157px);
}
}
@keyframes spark143 {
0% {
transform: translateY(560px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(148deg) translateX(157px);
}
}
.line:nth-child(144) {
transform: rotateY(315deg);
}
.line:nth-child(144) .spark {
width: 286px;
height: 347px;
-webkit-animation: spark144 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark144 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(144) .fire {
-webkit-animation: fire 1527ms -501ms linear infinite;
animation: fire 1527ms -501ms linear infinite;
}
@-webkit-keyframes spark144 {
0% {
transform: translateY(536px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(257deg) translateX(289px);
}
}
@keyframes spark144 {
0% {
transform: translateY(536px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(257deg) translateX(289px);
}
}
.line:nth-child(145) {
transform: rotateY(268deg);
}
.line:nth-child(145) .spark {
width: 316px;
height: 254px;
-webkit-animation: spark145 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark145 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(145) .fire {
-webkit-animation: fire 1208ms -261ms linear infinite;
animation: fire 1208ms -261ms linear infinite;
}
@-webkit-keyframes spark145 {
0% {
transform: translateY(634px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(312deg) translateX(230px);
}
}
@keyframes spark145 {
0% {
transform: translateY(634px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(312deg) translateX(230px);
}
}
.line:nth-child(146) {
transform: rotateY(355deg);
}
.line:nth-child(146) .spark {
width: 370px;
height: 209px;
-webkit-animation: spark146 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark146 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(146) .fire {
-webkit-animation: fire 1609ms -777ms linear infinite;
animation: fire 1609ms -777ms linear infinite;
}
@-webkit-keyframes spark146 {
0% {
transform: translateY(566px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(311deg) translateX(293px);
}
}
@keyframes spark146 {
0% {
transform: translateY(566px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(311deg) translateX(293px);
}
}
.line:nth-child(147) {
transform: rotateY(12deg);
}
.line:nth-child(147) .spark {
width: 326px;
height: 269px;
-webkit-animation: spark147 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark147 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(147) .fire {
-webkit-animation: fire 1529ms -283ms linear infinite;
animation: fire 1529ms -283ms linear infinite;
}
@-webkit-keyframes spark147 {
0% {
transform: translateY(613px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(192deg) translateX(187px);
}
}
@keyframes spark147 {
0% {
transform: translateY(613px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(192deg) translateX(187px);
}
}
.line:nth-child(148) {
transform: rotateY(45deg);
}
.line:nth-child(148) .spark {
width: 294px;
height: 250px;
-webkit-animation: spark148 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark148 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(148) .fire {
-webkit-animation: fire 1819ms -676ms linear infinite;
animation: fire 1819ms -676ms linear infinite;
}
@-webkit-keyframes spark148 {
0% {
transform: translateY(560px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(126deg) translateX(138px);
}
}
@keyframes spark148 {
0% {
transform: translateY(560px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(126deg) translateX(138px);
}
}
.line:nth-child(149) {
transform: rotateY(115deg);
}
.line:nth-child(149) .spark {
width: 381px;
height: 336px;
-webkit-animation: spark149 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark149 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(149) .fire {
-webkit-animation: fire 1038ms -629ms linear infinite;
animation: fire 1038ms -629ms linear infinite;
}
@-webkit-keyframes spark149 {
0% {
transform: translateY(579px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(41deg) translateX(104px);
}
}
@keyframes spark149 {
0% {
transform: translateY(579px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(41deg) translateX(104px);
}
}
.line:nth-child(150) {
transform: rotateY(303deg);
}
.line:nth-child(150) .spark {
width: 305px;
height: 390px;
-webkit-animation: spark150 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark150 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(150) .fire {
-webkit-animation: fire 1042ms -261ms linear infinite;
animation: fire 1042ms -261ms linear infinite;
}
@-webkit-keyframes spark150 {
0% {
transform: translateY(563px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(75deg) translateX(249px);
}
}
@keyframes spark150 {
0% {
transform: translateY(563px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(75deg) translateX(249px);
}
}
.line:nth-child(151) {
transform: rotateY(263deg);
}
.line:nth-child(151) .spark {
width: 323px;
height: 251px;
-webkit-animation: spark151 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark151 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(151) .fire {
-webkit-animation: fire 1998ms -141ms linear infinite;
animation: fire 1998ms -141ms linear infinite;
}
@-webkit-keyframes spark151 {
0% {
transform: translateY(517px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(27deg) translateX(253px);
}
}
@keyframes spark151 {
0% {
transform: translateY(517px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(27deg) translateX(253px);
}
}
.line:nth-child(152) {
transform: rotateY(20deg);
}
.line:nth-child(152) .spark {
width: 290px;
height: 207px;
-webkit-animation: spark152 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark152 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(152) .fire {
-webkit-animation: fire 1625ms -281ms linear infinite;
animation: fire 1625ms -281ms linear infinite;
}
@-webkit-keyframes spark152 {
0% {
transform: translateY(514px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(175deg) translateX(238px);
}
}
@keyframes spark152 {
0% {
transform: translateY(514px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(175deg) translateX(238px);
}
}
.line:nth-child(153) {
transform: rotateY(273deg);
}
.line:nth-child(153) .spark {
width: 225px;
height: 399px;
-webkit-animation: spark153 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark153 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(153) .fire {
-webkit-animation: fire 1135ms -162ms linear infinite;
animation: fire 1135ms -162ms linear infinite;
}
@-webkit-keyframes spark153 {
0% {
transform: translateY(507px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(280deg) translateX(101px);
}
}
@keyframes spark153 {
0% {
transform: translateY(507px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(280deg) translateX(101px);
}
}
.line:nth-child(154) {
transform: rotateY(314deg);
}
.line:nth-child(154) .spark {
width: 346px;
height: 201px;
-webkit-animation: spark154 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark154 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(154) .fire {
-webkit-animation: fire 1401ms -227ms linear infinite;
animation: fire 1401ms -227ms linear infinite;
}
@-webkit-keyframes spark154 {
0% {
transform: translateY(528px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(340deg) translateX(105px);
}
}
@keyframes spark154 {
0% {
transform: translateY(528px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(340deg) translateX(105px);
}
}
.line:nth-child(155) {
transform: rotateY(305deg);
}
.line:nth-child(155) .spark {
width: 341px;
height: 367px;
-webkit-animation: spark155 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark155 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(155) .fire {
-webkit-animation: fire 1008ms -892ms linear infinite;
animation: fire 1008ms -892ms linear infinite;
}
@-webkit-keyframes spark155 {
0% {
transform: translateY(530px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(118deg) translateX(220px);
}
}
@keyframes spark155 {
0% {
transform: translateY(530px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(118deg) translateX(220px);
}
}
.line:nth-child(156) {
transform: rotateY(46deg);
}
.line:nth-child(156) .spark {
width: 397px;
height: 385px;
-webkit-animation: spark156 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark156 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(156) .fire {
-webkit-animation: fire 1188ms -896ms linear infinite;
animation: fire 1188ms -896ms linear infinite;
}
@-webkit-keyframes spark156 {
0% {
transform: translateY(545px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(132deg) translateX(207px);
}
}
@keyframes spark156 {
0% {
transform: translateY(545px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(132deg) translateX(207px);
}
}
.line:nth-child(157) {
transform: rotateY(133deg);
}
.line:nth-child(157) .spark {
width: 316px;
height: 310px;
-webkit-animation: spark157 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark157 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(157) .fire {
-webkit-animation: fire 1834ms -118ms linear infinite;
animation: fire 1834ms -118ms linear infinite;
}
@-webkit-keyframes spark157 {
0% {
transform: translateY(598px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(297deg) translateX(255px);
}
}
@keyframes spark157 {
0% {
transform: translateY(598px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(297deg) translateX(255px);
}
}
.line:nth-child(158) {
transform: rotateY(63deg);
}
.line:nth-child(158) .spark {
width: 290px;
height: 213px;
-webkit-animation: spark158 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark158 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(158) .fire {
-webkit-animation: fire 1299ms -865ms linear infinite;
animation: fire 1299ms -865ms linear infinite;
}
@-webkit-keyframes spark158 {
0% {
transform: translateY(511px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(242deg) translateX(170px);
}
}
@keyframes spark158 {
0% {
transform: translateY(511px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(242deg) translateX(170px);
}
}
.line:nth-child(159) {
transform: rotateY(191deg);
}
.line:nth-child(159) .spark {
width: 351px;
height: 345px;
-webkit-animation: spark159 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark159 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(159) .fire {
-webkit-animation: fire 1051ms -667ms linear infinite;
animation: fire 1051ms -667ms linear infinite;
}
@-webkit-keyframes spark159 {
0% {
transform: translateY(610px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(40deg) translateX(124px);
}
}
@keyframes spark159 {
0% {
transform: translateY(610px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(40deg) translateX(124px);
}
}
.line:nth-child(160) {
transform: rotateY(186deg);
}
.line:nth-child(160) .spark {
width: 261px;
height: 238px;
-webkit-animation: spark160 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark160 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(160) .fire {
-webkit-animation: fire 1615ms -830ms linear infinite;
animation: fire 1615ms -830ms linear infinite;
}
@-webkit-keyframes spark160 {
0% {
transform: translateY(622px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(279deg) translateX(253px);
}
}
@keyframes spark160 {
0% {
transform: translateY(622px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(279deg) translateX(253px);
}
}
.line:nth-child(161) {
transform: rotateY(56deg);
}
.line:nth-child(161) .spark {
width: 337px;
height: 266px;
-webkit-animation: spark161 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark161 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(161) .fire {
-webkit-animation: fire 1426ms -195ms linear infinite;
animation: fire 1426ms -195ms linear infinite;
}
@-webkit-keyframes spark161 {
0% {
transform: translateY(649px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(214deg) translateX(244px);
}
}
@keyframes spark161 {
0% {
transform: translateY(649px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(214deg) translateX(244px);
}
}
.line:nth-child(162) {
transform: rotateY(11deg);
}
.line:nth-child(162) .spark {
width: 207px;
height: 388px;
-webkit-animation: spark162 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark162 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(162) .fire {
-webkit-animation: fire 1249ms -544ms linear infinite;
animation: fire 1249ms -544ms linear infinite;
}
@-webkit-keyframes spark162 {
0% {
transform: translateY(562px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(124deg) translateX(142px);
}
}
@keyframes spark162 {
0% {
transform: translateY(562px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(124deg) translateX(142px);
}
}
.line:nth-child(163) {
transform: rotateY(341deg);
}
.line:nth-child(163) .spark {
width: 332px;
height: 328px;
-webkit-animation: spark163 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark163 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(163) .fire {
-webkit-animation: fire 1918ms -652ms linear infinite;
animation: fire 1918ms -652ms linear infinite;
}
@-webkit-keyframes spark163 {
0% {
transform: translateY(636px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(341deg) translateX(140px);
}
}
@keyframes spark163 {
0% {
transform: translateY(636px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(341deg) translateX(140px);
}
}
.line:nth-child(164) {
transform: rotateY(128deg);
}
.line:nth-child(164) .spark {
width: 315px;
height: 395px;
-webkit-animation: spark164 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark164 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(164) .fire {
-webkit-animation: fire 1008ms -134ms linear infinite;
animation: fire 1008ms -134ms linear infinite;
}
@-webkit-keyframes spark164 {
0% {
transform: translateY(516px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(191deg) translateX(264px);
}
}
@keyframes spark164 {
0% {
transform: translateY(516px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(191deg) translateX(264px);
}
}
.line:nth-child(165) {
transform: rotateY(26deg);
}
.line:nth-child(165) .spark {
width: 313px;
height: 204px;
-webkit-animation: spark165 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark165 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(165) .fire {
-webkit-animation: fire 1192ms -81ms linear infinite;
animation: fire 1192ms -81ms linear infinite;
}
@-webkit-keyframes spark165 {
0% {
transform: translateY(507px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(126deg) translateX(137px);
}
}
@keyframes spark165 {
0% {
transform: translateY(507px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(126deg) translateX(137px);
}
}
.line:nth-child(166) {
transform: rotateY(237deg);
}
.line:nth-child(166) .spark {
width: 308px;
height: 224px;
-webkit-animation: spark166 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark166 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(166) .fire {
-webkit-animation: fire 1827ms -359ms linear infinite;
animation: fire 1827ms -359ms linear infinite;
}
@-webkit-keyframes spark166 {
0% {
transform: translateY(512px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(121deg) translateX(269px);
}
}
@keyframes spark166 {
0% {
transform: translateY(512px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(121deg) translateX(269px);
}
}
.line:nth-child(167) {
transform: rotateY(129deg);
}
.line:nth-child(167) .spark {
width: 307px;
height: 306px;
-webkit-animation: spark167 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark167 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(167) .fire {
-webkit-animation: fire 1069ms -667ms linear infinite;
animation: fire 1069ms -667ms linear infinite;
}
@-webkit-keyframes spark167 {
0% {
transform: translateY(594px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(149deg) translateX(223px);
}
}
@keyframes spark167 {
0% {
transform: translateY(594px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(149deg) translateX(223px);
}
}
.line:nth-child(168) {
transform: rotateY(156deg);
}
.line:nth-child(168) .spark {
width: 366px;
height: 214px;
-webkit-animation: spark168 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark168 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(168) .fire {
-webkit-animation: fire 1170ms -358ms linear infinite;
animation: fire 1170ms -358ms linear infinite;
}
@-webkit-keyframes spark168 {
0% {
transform: translateY(506px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(155deg) translateX(270px);
}
}
@keyframes spark168 {
0% {
transform: translateY(506px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(155deg) translateX(270px);
}
}
.line:nth-child(169) {
transform: rotateY(204deg);
}
.line:nth-child(169) .spark {
width: 384px;
height: 357px;
-webkit-animation: spark169 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark169 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(169) .fire {
-webkit-animation: fire 1887ms -267ms linear infinite;
animation: fire 1887ms -267ms linear infinite;
}
@-webkit-keyframes spark169 {
0% {
transform: translateY(644px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(149deg) translateX(102px);
}
}
@keyframes spark169 {
0% {
transform: translateY(644px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(149deg) translateX(102px);
}
}
.line:nth-child(170) {
transform: rotateY(217deg);
}
.line:nth-child(170) .spark {
width: 298px;
height: 361px;
-webkit-animation: spark170 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark170 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(170) .fire {
-webkit-animation: fire 1497ms -846ms linear infinite;
animation: fire 1497ms -846ms linear infinite;
}
@-webkit-keyframes spark170 {
0% {
transform: translateY(574px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(104deg) translateX(194px);
}
}
@keyframes spark170 {
0% {
transform: translateY(574px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(104deg) translateX(194px);
}
}
.line:nth-child(171) {
transform: rotateY(256deg);
}
.line:nth-child(171) .spark {
width: 265px;
height: 368px;
-webkit-animation: spark171 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark171 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(171) .fire {
-webkit-animation: fire 1927ms -162ms linear infinite;
animation: fire 1927ms -162ms linear infinite;
}
@-webkit-keyframes spark171 {
0% {
transform: translateY(562px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(129deg) translateX(106px);
}
}
@keyframes spark171 {
0% {
transform: translateY(562px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(129deg) translateX(106px);
}
}
.line:nth-child(172) {
transform: rotateY(118deg);
}
.line:nth-child(172) .spark {
width: 387px;
height: 338px;
-webkit-animation: spark172 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark172 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(172) .fire {
-webkit-animation: fire 1634ms -189ms linear infinite;
animation: fire 1634ms -189ms linear infinite;
}
@-webkit-keyframes spark172 {
0% {
transform: translateY(553px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(108deg) translateX(202px);
}
}
@keyframes spark172 {
0% {
transform: translateY(553px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(108deg) translateX(202px);
}
}
.line:nth-child(173) {
transform: rotateY(96deg);
}
.line:nth-child(173) .spark {
width: 388px;
height: 376px;
-webkit-animation: spark173 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark173 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(173) .fire {
-webkit-animation: fire 1919ms -805ms linear infinite;
animation: fire 1919ms -805ms linear infinite;
}
@-webkit-keyframes spark173 {
0% {
transform: translateY(633px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(43deg) translateX(197px);
}
}
@keyframes spark173 {
0% {
transform: translateY(633px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(43deg) translateX(197px);
}
}
.line:nth-child(174) {
transform: rotateY(149deg);
}
.line:nth-child(174) .spark {
width: 269px;
height: 364px;
-webkit-animation: spark174 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark174 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(174) .fire {
-webkit-animation: fire 1142ms -49ms linear infinite;
animation: fire 1142ms -49ms linear infinite;
}
@-webkit-keyframes spark174 {
0% {
transform: translateY(626px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(4deg) translateX(217px);
}
}
@keyframes spark174 {
0% {
transform: translateY(626px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(4deg) translateX(217px);
}
}
.line:nth-child(175) {
transform: rotateY(311deg);
}
.line:nth-child(175) .spark {
width: 338px;
height: 306px;
-webkit-animation: spark175 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark175 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(175) .fire {
-webkit-animation: fire 1170ms -438ms linear infinite;
animation: fire 1170ms -438ms linear infinite;
}
@-webkit-keyframes spark175 {
0% {
transform: translateY(516px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(282deg) translateX(230px);
}
}
@keyframes spark175 {
0% {
transform: translateY(516px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(282deg) translateX(230px);
}
}
.line:nth-child(176) {
transform: rotateY(52deg);
}
.line:nth-child(176) .spark {
width: 372px;
height: 201px;
-webkit-animation: spark176 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark176 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(176) .fire {
-webkit-animation: fire 1737ms -793ms linear infinite;
animation: fire 1737ms -793ms linear infinite;
}
@-webkit-keyframes spark176 {
0% {
transform: translateY(619px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(276deg) translateX(194px);
}
}
@keyframes spark176 {
0% {
transform: translateY(619px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(276deg) translateX(194px);
}
}
.line:nth-child(177) {
transform: rotateY(317deg);
}
.line:nth-child(177) .spark {
width: 344px;
height: 326px;
-webkit-animation: spark177 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark177 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(177) .fire {
-webkit-animation: fire 1152ms -416ms linear infinite;
animation: fire 1152ms -416ms linear infinite;
}
@-webkit-keyframes spark177 {
0% {
transform: translateY(579px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(28deg) translateX(206px);
}
}
@keyframes spark177 {
0% {
transform: translateY(579px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(28deg) translateX(206px);
}
}
.line:nth-child(178) {
transform: rotateY(79deg);
}
.line:nth-child(178) .spark {
width: 351px;
height: 251px;
-webkit-animation: spark178 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark178 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(178) .fire {
-webkit-animation: fire 1004ms -568ms linear infinite;
animation: fire 1004ms -568ms linear infinite;
}
@-webkit-keyframes spark178 {
0% {
transform: translateY(606px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(121deg) translateX(229px);
}
}
@keyframes spark178 {
0% {
transform: translateY(606px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(121deg) translateX(229px);
}
}
.line:nth-child(179) {
transform: rotateY(310deg);
}
.line:nth-child(179) .spark {
width: 282px;
height: 385px;
-webkit-animation: spark179 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark179 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(179) .fire {
-webkit-animation: fire 1695ms -777ms linear infinite;
animation: fire 1695ms -777ms linear infinite;
}
@-webkit-keyframes spark179 {
0% {
transform: translateY(533px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(152deg) translateX(286px);
}
}
@keyframes spark179 {
0% {
transform: translateY(533px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(152deg) translateX(286px);
}
}
.line:nth-child(180) {
transform: rotateY(66deg);
}
.line:nth-child(180) .spark {
width: 271px;
height: 347px;
-webkit-animation: spark180 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark180 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(180) .fire {
-webkit-animation: fire 1486ms -588ms linear infinite;
animation: fire 1486ms -588ms linear infinite;
}
@-webkit-keyframes spark180 {
0% {
transform: translateY(627px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(282deg) translateX(124px);
}
}
@keyframes spark180 {
0% {
transform: translateY(627px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(282deg) translateX(124px);
}
}
.line:nth-child(181) {
transform: rotateY(269deg);
}
.line:nth-child(181) .spark {
width: 357px;
height: 262px;
-webkit-animation: spark181 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark181 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(181) .fire {
-webkit-animation: fire 1988ms -428ms linear infinite;
animation: fire 1988ms -428ms linear infinite;
}
@-webkit-keyframes spark181 {
0% {
transform: translateY(524px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(294deg) translateX(249px);
}
}
@keyframes spark181 {
0% {
transform: translateY(524px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(294deg) translateX(249px);
}
}
.line:nth-child(182) {
transform: rotateY(251deg);
}
.line:nth-child(182) .spark {
width: 318px;
height: 218px;
-webkit-animation: spark182 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark182 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(182) .fire {
-webkit-animation: fire 1976ms -10ms linear infinite;
animation: fire 1976ms -10ms linear infinite;
}
@-webkit-keyframes spark182 {
0% {
transform: translateY(513px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(38deg) translateX(155px);
}
}
@keyframes spark182 {
0% {
transform: translateY(513px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(38deg) translateX(155px);
}
}
.line:nth-child(183) {
transform: rotateY(71deg);
}
.line:nth-child(183) .spark {
width: 297px;
height: 385px;
-webkit-animation: spark183 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark183 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(183) .fire {
-webkit-animation: fire 1598ms -525ms linear infinite;
animation: fire 1598ms -525ms linear infinite;
}
@-webkit-keyframes spark183 {
0% {
transform: translateY(529px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(140deg) translateX(125px);
}
}
@keyframes spark183 {
0% {
transform: translateY(529px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(140deg) translateX(125px);
}
}
.line:nth-child(184) {
transform: rotateY(247deg);
}
.line:nth-child(184) .spark {
width: 300px;
height: 333px;
-webkit-animation: spark184 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark184 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(184) .fire {
-webkit-animation: fire 1627ms -741ms linear infinite;
animation: fire 1627ms -741ms linear infinite;
}
@-webkit-keyframes spark184 {
0% {
transform: translateY(574px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(219deg) translateX(260px);
}
}
@keyframes spark184 {
0% {
transform: translateY(574px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(219deg) translateX(260px);
}
}
.line:nth-child(185) {
transform: rotateY(322deg);
}
.line:nth-child(185) .spark {
width: 341px;
height: 355px;
-webkit-animation: spark185 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark185 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(185) .fire {
-webkit-animation: fire 1306ms -506ms linear infinite;
animation: fire 1306ms -506ms linear infinite;
}
@-webkit-keyframes spark185 {
0% {
transform: translateY(558px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(72deg) translateX(212px);
}
}
@keyframes spark185 {
0% {
transform: translateY(558px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(72deg) translateX(212px);
}
}
.line:nth-child(186) {
transform: rotateY(2deg);
}
.line:nth-child(186) .spark {
width: 209px;
height: 265px;
-webkit-animation: spark186 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark186 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(186) .fire {
-webkit-animation: fire 1392ms -263ms linear infinite;
animation: fire 1392ms -263ms linear infinite;
}
@-webkit-keyframes spark186 {
0% {
transform: translateY(618px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(333deg) translateX(110px);
}
}
@keyframes spark186 {
0% {
transform: translateY(618px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(333deg) translateX(110px);
}
}
.line:nth-child(187) {
transform: rotateY(293deg);
}
.line:nth-child(187) .spark {
width: 208px;
height: 326px;
-webkit-animation: spark187 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark187 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(187) .fire {
-webkit-animation: fire 1988ms -117ms linear infinite;
animation: fire 1988ms -117ms linear infinite;
}
@-webkit-keyframes spark187 {
0% {
transform: translateY(567px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(36deg) translateX(237px);
}
}
@keyframes spark187 {
0% {
transform: translateY(567px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(36deg) translateX(237px);
}
}
.line:nth-child(188) {
transform: rotateY(91deg);
}
.line:nth-child(188) .spark {
width: 327px;
height: 352px;
-webkit-animation: spark188 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark188 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(188) .fire {
-webkit-animation: fire 1367ms -43ms linear infinite;
animation: fire 1367ms -43ms linear infinite;
}
@-webkit-keyframes spark188 {
0% {
transform: translateY(584px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(194deg) translateX(191px);
}
}
@keyframes spark188 {
0% {
transform: translateY(584px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(194deg) translateX(191px);
}
}
.line:nth-child(189) {
transform: rotateY(172deg);
}
.line:nth-child(189) .spark {
width: 314px;
height: 281px;
-webkit-animation: spark189 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark189 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(189) .fire {
-webkit-animation: fire 1714ms -552ms linear infinite;
animation: fire 1714ms -552ms linear infinite;
}
@-webkit-keyframes spark189 {
0% {
transform: translateY(555px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(199deg) translateX(238px);
}
}
@keyframes spark189 {
0% {
transform: translateY(555px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(199deg) translateX(238px);
}
}
.line:nth-child(190) {
transform: rotateY(13deg);
}
.line:nth-child(190) .spark {
width: 398px;
height: 296px;
-webkit-animation: spark190 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark190 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(190) .fire {
-webkit-animation: fire 1371ms -506ms linear infinite;
animation: fire 1371ms -506ms linear infinite;
}
@-webkit-keyframes spark190 {
0% {
transform: translateY(592px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(141deg) translateX(193px);
}
}
@keyframes spark190 {
0% {
transform: translateY(592px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(141deg) translateX(193px);
}
}
.line:nth-child(191) {
transform: rotateY(318deg);
}
.line:nth-child(191) .spark {
width: 311px;
height: 249px;
-webkit-animation: spark191 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark191 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(191) .fire {
-webkit-animation: fire 1336ms -638ms linear infinite;
animation: fire 1336ms -638ms linear infinite;
}
@-webkit-keyframes spark191 {
0% {
transform: translateY(524px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(18deg) translateX(199px);
}
}
@keyframes spark191 {
0% {
transform: translateY(524px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(18deg) translateX(199px);
}
}
.line:nth-child(192) {
transform: rotateY(128deg);
}
.line:nth-child(192) .spark {
width: 296px;
height: 313px;
-webkit-animation: spark192 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark192 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(192) .fire {
-webkit-animation: fire 1534ms -814ms linear infinite;
animation: fire 1534ms -814ms linear infinite;
}
@-webkit-keyframes spark192 {
0% {
transform: translateY(505px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(128deg) translateX(123px);
}
}
@keyframes spark192 {
0% {
transform: translateY(505px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(128deg) translateX(123px);
}
}
.line:nth-child(193) {
transform: rotateY(359deg);
}
.line:nth-child(193) .spark {
width: 311px;
height: 377px;
-webkit-animation: spark193 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark193 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(193) .fire {
-webkit-animation: fire 1268ms -777ms linear infinite;
animation: fire 1268ms -777ms linear infinite;
}
@-webkit-keyframes spark193 {
0% {
transform: translateY(510px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(134deg) translateX(215px);
}
}
@keyframes spark193 {
0% {
transform: translateY(510px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(134deg) translateX(215px);
}
}
.line:nth-child(194) {
transform: rotateY(287deg);
}
.line:nth-child(194) .spark {
width: 240px;
height: 321px;
-webkit-animation: spark194 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark194 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(194) .fire {
-webkit-animation: fire 1974ms -636ms linear infinite;
animation: fire 1974ms -636ms linear infinite;
}
@-webkit-keyframes spark194 {
0% {
transform: translateY(578px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(47deg) translateX(210px);
}
}
@keyframes spark194 {
0% {
transform: translateY(578px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(47deg) translateX(210px);
}
}
.line:nth-child(195) {
transform: rotateY(43deg);
}
.line:nth-child(195) .spark {
width: 387px;
height: 400px;
-webkit-animation: spark195 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark195 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(195) .fire {
-webkit-animation: fire 1669ms -463ms linear infinite;
animation: fire 1669ms -463ms linear infinite;
}
@-webkit-keyframes spark195 {
0% {
transform: translateY(646px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(218deg) translateX(188px);
}
}
@keyframes spark195 {
0% {
transform: translateY(646px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(218deg) translateX(188px);
}
}
.line:nth-child(196) {
transform: rotateY(110deg);
}
.line:nth-child(196) .spark {
width: 223px;
height: 364px;
-webkit-animation: spark196 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark196 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(196) .fire {
-webkit-animation: fire 1963ms -482ms linear infinite;
animation: fire 1963ms -482ms linear infinite;
}
@-webkit-keyframes spark196 {
0% {
transform: translateY(563px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(280deg) translateX(277px);
}
}
@keyframes spark196 {
0% {
transform: translateY(563px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(280deg) translateX(277px);
}
}
.line:nth-child(197) {
transform: rotateY(279deg);
}
.line:nth-child(197) .spark {
width: 252px;
height: 293px;
-webkit-animation: spark197 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark197 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(197) .fire {
-webkit-animation: fire 1828ms -371ms linear infinite;
animation: fire 1828ms -371ms linear infinite;
}
@-webkit-keyframes spark197 {
0% {
transform: translateY(510px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(83deg) translateX(251px);
}
}
@keyframes spark197 {
0% {
transform: translateY(510px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(83deg) translateX(251px);
}
}
.line:nth-child(198) {
transform: rotateY(56deg);
}
.line:nth-child(198) .spark {
width: 360px;
height: 287px;
-webkit-animation: spark198 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark198 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(198) .fire {
-webkit-animation: fire 1957ms -328ms linear infinite;
animation: fire 1957ms -328ms linear infinite;
}
@-webkit-keyframes spark198 {
0% {
transform: translateY(518px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(225deg) translateX(186px);
}
}
@keyframes spark198 {
0% {
transform: translateY(518px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(225deg) translateX(186px);
}
}
.line:nth-child(199) {
transform: rotateY(150deg);
}
.line:nth-child(199) .spark {
width: 277px;
height: 269px;
-webkit-animation: spark199 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark199 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(199) .fire {
-webkit-animation: fire 1063ms -246ms linear infinite;
animation: fire 1063ms -246ms linear infinite;
}
@-webkit-keyframes spark199 {
0% {
transform: translateY(548px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(91deg) translateX(293px);
}
}
@keyframes spark199 {
0% {
transform: translateY(548px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(91deg) translateX(293px);
}
}
.line:nth-child(200) {
transform: rotateY(198deg);
}
.line:nth-child(200) .spark {
width: 290px;
height: 360px;
-webkit-animation: spark200 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark200 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(200) .fire {
-webkit-animation: fire 1085ms -328ms linear infinite;
animation: fire 1085ms -328ms linear infinite;
}
@-webkit-keyframes spark200 {
0% {
transform: translateY(507px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(258deg) translateX(251px);
}
}
@keyframes spark200 {
0% {
transform: translateY(507px);
}
50% {
transform: translateY(0);
}
100% {
transform: rotateZ(258deg) translateX(251px);
}
}
@-webkit-keyframes opacity {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
55% {
opacity: 1;
}
85% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes opacity {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
55% {
opacity: 1;
}
85% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes fire {
0% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100% {
transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
}
}
@keyframes fire {
0% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100% {
transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
}
}
@-webkit-keyframes rotate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
@keyframes rotate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="camera -x">
<div class="camera -y">
<div class="camera -z">
<div class="fireworks">
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
<div class="line">
<div class="spark">
<div class="fire"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

复制代码

		自动登录	找回密码
密码			立即注册

仪表板动效元素：浪漫烟花

0 个回复

活字格认证

圣诞拼拼乐

微信认证勋章

讲师达人

元老葡萄

悬赏达人