纯css实现多个烟花绽放动画效果
代码语言：html
所属分类：动画
代码描述：纯css实现多个烟花绽放动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
height: 100vh;
overflow: hidden;
display: -webkit-box;
display: flex;
font-family: 'Anton', sans-serif;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
-webkit-perspective: 600px;
perspective: 600px;
}
div {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.camera.-y {
-webkit-animation: rotate 30s linear infinite;
animation: rotate 30s linear infinite;
}
.fireworks:nth-child(1) {
-webkit-transform: translate3d(0, -200px, 100px);
transform: translate3d(0, -200px, 100px);
--color: rgb(250, 40, 40);
}
.fireworks:nth-child(2) {
-webkit-transform: translate3d(160px, -100px, -160px);
transform: translate3d(160px, -100px, -160px);
--color: rgb(50, 240, 40);
}
.fireworks:nth-child(2) .line .spark {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.fireworks:nth-child(3) {
-webkit-transform: translate3d(-160px, 0, -160px);
transform: translate3d(-160px, 0, -160px);
--color: rgb(50, 80, 250);
}
.fireworks:nth-child(3) .line .spark {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.spark {
position: absolute;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.fire {
position: absolute;
left: -3px;
width: 5px;
height: 5px;
background: #fa2828;
}
.fire::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #e6c828;
-webkit-transform: translateZ(0.1px);
transform: translateZ(0.1px);
}
.line:nth-child(1) {
-webkit-transform: rotateY(190deg);
transform: rotateY(190deg);
}
.line:nth-child(1) .spark {
-webkit-animation: spark1 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark1 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(1) .fire {
-webkit-animation: fire 1694ms -873ms linear infinite;
animation: fire 1694ms -873ms linear infinite;
}
@-webkit-keyframes spark1 {
0% {
-webkit-transform: translateY(510px);
transform: translateY(510px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(355deg) translateX(180px);
transform: rotateZ(355deg) translateX(180px);
}
}
@keyframes spark1 {
0% {
-webkit-transform: translateY(510px);
transform: translateY(510px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(355deg) translateX(180px);
transform: rotateZ(355deg) translateX(180px);
}
}
.line:nth-child(2) {
-webkit-transform: rotateY(1deg);
transform: rotateY(1deg);
}
.line:nth-child(2) .spark {
-webkit-animation: spark2 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark2 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(2) .fire {
-webkit-animation: fire 1110ms -284ms linear infinite;
animation: fire 1110ms -284ms linear infinite;
}
@-webkit-keyframes spark2 {
0% {
-webkit-transform: translateY(551px);
transform: translateY(551px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(190deg) translateX(271px);
transform: rotateZ(190deg) translateX(271px);
}
}
@keyframes spark2 {
0% {
-webkit-transform: translateY(551px);
transform: translateY(551px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(190deg) translateX(271px);
transform: rotateZ(190deg) translateX(271px);
}
}
.line:nth-child(3) {
-webkit-transform: rotateY(107deg);
transform: rotateY(107deg);
}
.line:nth-child(3) .spark {
-webkit-animation: spark3 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark3 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(3) .fire {
-webkit-animation: fire 1221ms -791ms linear infinite;
animation: fire 1221ms -791ms linear infinite;
}
@-webkit-keyframes spark3 {
0% {
-webkit-transform: translateY(638px);
transform: translateY(638px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(24deg) translateX(171px);
transform: rotateZ(24deg) translateX(171px);
}
}
@keyframes spark3 {
0% {
-webkit-transform: translateY(638px);
transform: translateY(638px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(24deg) translateX(171px);
transform: rotateZ(24deg) translateX(171px);
}
}
.line:nth-child(4) {
-webkit-transform: rotateY(72deg);
transform: rotateY(72deg);
}
.line:nth-child(4) .spark {
-webkit-animation: spark4 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark4 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(4) .fire {
-webkit-animation: fire 1925ms -9ms linear infinite;
animation: fire 1925ms -9ms linear infinite;
}
@-webkit-keyframes spark4 {
0% {
-webkit-transform: translateY(650px);
transform: translateY(650px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(136deg) translateX(166px);
transform: rotateZ(136deg) translateX(166px);
}
}
@keyframes spark4 {
0% {
-webkit-transform: translateY(650px);
transform: translateY(650px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(136deg) translateX(166px);
transform: rotateZ(136deg) translateX(166px);
}
}
.line:nth-child(5) {
-webkit-transform: rotateY(319deg);
transform: rotateY(319deg);
}
.line:nth-child(5) .spark {
-webkit-animation: spark5 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark5 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(5) .fire {
-webkit-animation: fire 1699ms -132ms linear infinite;
animation: fire 1699ms -132ms linear infinite;
}
@-webkit-keyframes spark5 {
0% {
-webkit-transform: translateY(580px);
transform: translateY(580px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(141deg) translateX(111px);
transform: rotateZ(141deg) translateX(111px);
}
}
@keyframes spark5 {
0% {
-webkit-transform: translateY(580px);
transform: translateY(580px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(141deg) translateX(111px);
transform: rotateZ(141deg) translateX(111px);
}
}
.line:nth-child(6) {
-webkit-transform: rotateY(25deg);
transform: rotateY(25deg);
}
.line:nth-child(6) .spark {
-webkit-animation: spark6 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark6 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(6) .fire {
-webkit-animation: fire 1416ms -145ms linear infinite;
animation: fire 1416ms -145ms linear infinite;
}
@-webkit-keyframes spark6 {
0% {
-webkit-transform: translateY(580px);
transform: translateY(580px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(110deg) translateX(174px);
transform: rotateZ(110deg) translateX(174px);
}
}
@keyframes spark6 {
0% {
-webkit-transform: translateY(580px);
transform: translateY(580px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(110deg) translateX(174px);
transform: rotateZ(110deg) translateX(174px);
}
}
.line:nth-child(7) {
-webkit-transform: rotateY(228deg);
transform: rotateY(228deg);
}
.line:nth-child(7) .spark {
-webkit-animation: spark7 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark7 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(7) .fire {
-webkit-animation: fire 1830ms -74ms linear infinite;
animation: fire 1830ms -74ms linear infinite;
}
@-webkit-keyframes spark7 {
0% {
-webkit-transform: translateY(624px);
transform: translateY(624px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(149deg) translateX(281px);
transform: rotateZ(149deg) translateX(281px);
}
}
@keyframes spark7 {
0% {
-webkit-transform: translateY(624px);
transform: translateY(624px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(149deg) translateX(281px);
transform: rotateZ(149deg) translateX(281px);
}
}
.line:nth-child(8) {
-webkit-transform: rotateY(285deg);
transform: rotateY(285deg);
}
.line:nth-child(8) .spark {
-webkit-animation: spark8 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark8 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(8) .fire {
-webkit-animation: fire 1714ms -435ms linear infinite;
animation: fire 1714ms -435ms linear infinite;
}
@-webkit-keyframes spark8 {
0% {
-webkit-transform: translateY(526px);
transform: translateY(526px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(160deg) translateX(282px);
transform: rotateZ(160deg) translateX(282px);
}
}
@keyframes spark8 {
0% {
-webkit-transform: translateY(526px);
transform: translateY(526px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(160deg) translateX(282px);
transform: rotateZ(160deg) translateX(282px);
}
}
.line:nth-child(9) {
-webkit-transform: rotateY(325deg);
transform: rotateY(325deg);
}
.line:nth-child(9) .spark {
-webkit-animation: spark9 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark9 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(9) .fire {
-webkit-animation: fire 1800ms -572ms linear infinite;
animation: fire 1800ms -572ms linear infinite;
}
@-webkit-keyframes spark9 {
0% {
-webkit-transform: translateY(546px);
transform: translateY(546px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(357deg) translateX(190px);
transform: rotateZ(357deg) translateX(190px);
}
}
@keyframes spark9 {
0% {
-webkit-transform: translateY(546px);
transform: translateY(546px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(357deg) translateX(190px);
transform: rotateZ(357deg) translateX(190px);
}
}
.line:nth-child(10) {
-webkit-transform: rotateY(12deg);
transform: rotateY(12deg);
}
.line:nth-child(10) .spark {
-webkit-animation: spark10 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark10 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(10) .fire {
-webkit-animation: fire 1785ms -362ms linear infinite;
animation: fire 1785ms -362ms linear infinite;
}
@-webkit-keyframes spark10 {
0% {
-webkit-transform: translateY(540px);
transform: translateY(540px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(346deg) translateX(138px);
transform: rotateZ(346deg) translateX(138px);
}
}
@keyframes spark10 {
0% {
-webkit-transform: translateY(540px);
transform: translateY(540px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(346deg) translateX(138px);
transform: rotateZ(346deg) translateX(138px);
}
}
.line:nth-child(11) {
-webkit-transform: rotateY(1deg);
transform: rotateY(1deg);
}
.line:nth-child(11) .spark {
-webkit-animation: spark11 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark11 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(11) .fire {
-webkit-animation: fire 1011ms -531ms linear infinite;
animation: fire 1011ms -531ms linear infinite;
}
@-webkit-keyframes spark11 {
0% {
-webkit-transform: translateY(540px);
transform: translateY(540px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(8deg) translateX(128px);
transform: rotateZ(8deg) translateX(128px);
}
}
@keyframes spark11 {
0% {
-webkit-transform: translateY(540px);
transform: translateY(540px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(8deg) translateX(128px);
transform: rotateZ(8deg) translateX(128px);
}
}
.line:nth-child(12) {
-webkit-transform: rotateY(114deg);
transform: rotateY(114deg);
}
.line:nth-child(12) .spark {
-webkit-animation: spark12 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark12 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(12) .fire {
-webkit-animation: fire 1671ms -994ms linear infinite;
animation: fire 1671ms -994ms linear infinite;
}
@-webkit-keyframes spark12 {
0% {
-webkit-transform: translateY(640px);
transform: translateY(640px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(302deg) translateX(286px);
transform: rotateZ(302deg) translateX(286px);
}
}
@keyframes spark12 {
0% {
-webkit-transform: translateY(640px);
transform: translateY(640px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(302deg) translateX(286px);
transform: rotateZ(302deg) translateX(286px);
}
}
.line:nth-child(13) {
-webkit-transform: rotateY(310deg);
transform: rotateY(310deg);
}
.line:nth-child(13) .spark {
-webkit-animation: spark13 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark13 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(13) .fire {
-webkit-animation: fire 1853ms -371ms linear infinite;
animation: fire 1853ms -371ms linear infinite;
}
@-webkit-keyframes spark13 {
0% {
-webkit-transform: translateY(563px);
transform: translateY(563px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(53deg) translateX(250px);
transform: rotateZ(53deg) translateX(250px);
}
}
@keyframes spark13 {
0% {
-webkit-transform: translateY(563px);
transform: translateY(563px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(53deg) translateX(250px);
transform: rotateZ(53deg) translateX(250px);
}
}
.line:nth-child(14) {
-webkit-transform: rotateY(290deg);
transform: rotateY(290deg);
}
.line:nth-child(14) .spark {
-webkit-animation: spark14 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark14 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(14) .fire {
-webkit-animation: fire 1476ms -917ms linear infinite;
animation: fire 1476ms -917ms linear infinite;
}
@-webkit-keyframes spark14 {
0% {
-webkit-transform: translateY(625px);
transform: translateY(625px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(34deg) translateX(200px);
transform: rotateZ(34deg) translateX(200px);
}
}
@keyframes spark14 {
0% {
-webkit-transform: translateY(625px);
transform: translateY(625px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(34deg) translateX(200px);
transform: rotateZ(34deg) translateX(200px);
}
}
.line:nth-child(15) {
-webkit-transform: rotateY(145deg);
transform: rotateY(145deg);
}
.line:nth-child(15) .spark {
-webkit-animation: spark15 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark15 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(15) .fire {
-webkit-animation: fire 1244ms -765ms linear infinite;
animation: fire 1244ms -765ms linear infinite;
}
@-webkit-keyframes spark15 {
0% {
-webkit-transform: translateY(639px);
transform: translateY(639px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(352deg) translateX(292px);
transform: rotateZ(352deg) translateX(292px);
}
}
@keyframes spark15 {
0% {
-webkit-transform: translateY(639px);
transform: translateY(639px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(352deg) translateX(292px);
transform: rotateZ(352deg) translateX(292px);
}
}
.line:nth-child(16) {
-webkit-transform: rotateY(158deg);
transform: rotateY(158deg);
}
.line:nth-child(16) .spark {
-webkit-animation: spark16 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark16 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(16) .fire {
-webkit-animation: fire 1851ms -590ms linear infinite;
animation: fire 1851ms -590ms linear infinite;
}
@-webkit-keyframes spark16 {
0% {
-webkit-transform: translateY(531px);
transform: translateY(531px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(310deg) translateX(113px);
transform: rotateZ(310deg) translateX(113px);
}
}
@keyframes spark16 {
0% {
-webkit-transform: translateY(531px);
transform: translateY(531px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(310deg) translateX(113px);
transform: rotateZ(310deg) translateX(113px);
}
}
.line:nth-child(17) {
-webkit-transform: rotateY(211deg);
transform: rotateY(211deg);
}
.line:nth-child(17) .spark {
-webkit-animation: spark17 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark17 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(17) .fire {
-webkit-animation: fire 1466ms -473ms linear infinite;
animation: fire 1466ms -473ms linear infinite;
}
@-webkit-keyframes spark17 {
0% {
-webkit-transform: translateY(502px);
transform: translateY(502px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(138deg) translateX(214px);
transform: rotateZ(138deg) translateX(214px);
}
}
@keyframes spark17 {
0% {
-webkit-transform: translateY(502px);
transform: translateY(502px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(138deg) translateX(214px);
transform: rotateZ(138deg) translateX(214px);
}
}
.line:nth-child(18) {
-webkit-transform: rotateY(351deg);
transform: rotateY(351deg);
}
.line:nth-child(18) .spark {
-webkit-animation: spark18 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark18 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(18) .fire {
-webkit-animation: fire 1801ms -50ms linear infinite;
animation: fire 1801ms -50ms linear infinite;
}
@-webkit-keyframes spark18 {
0% {
-webkit-transform: translateY(551px);
transform: translateY(551px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(225deg) translateX(161px);
transform: rotateZ(225deg) translateX(161px);
}
}
@keyframes spark18 {
0% {
-webkit-transform: translateY(551px);
transform: translateY(551px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(225deg) translateX(161px);
transform: rotateZ(225deg) translateX(161px);
}
}
.line:nth-child(19) {
-webkit-transform: rotateY(228deg);
transform: rotateY(228deg);
}
.line:nth-child(19) .spark {
-webkit-animation: spark19 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark19 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(19) .fire {
-webkit-animation: fire 1362ms -991ms linear infinite;
animation: fire 1362ms -991ms linear infinite;
}
@-webkit-keyframes spark19 {
0% {
-webkit-transform: translateY(586px);
transform: translateY(586px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(168deg) translateX(114px);
transform: rotateZ(168deg) translateX(114px);
}
}
@keyframes spark19 {
0% {
-webkit-transform: translateY(586px);
transform: translateY(586px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(168deg) translateX(114px);
transform: rotateZ(168deg) translateX(114px);
}
}
.line:nth-child(20) {
-webkit-transform: rotateY(58deg);
transform: rotateY(58deg);
}
.line:nth-child(20) .spark {
-webkit-animation: spark20 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark20 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(20) .fire {
-webkit-animation: fire 1364ms -636ms linear infinite;
animation: fire 1364ms -636ms linear infinite;
}
@-webkit-keyframes spark20 {
0% {
-webkit-transform: translateY(538px);
transform: translateY(538px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(97deg) translateX(231px);
transform: rotateZ(97deg) translateX(231px);
}
}
@keyframes spark20 {
0% {
-webkit-transform: translateY(538px);
transform: translateY(538px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(97deg) translateX(231px);
transform: rotateZ(97deg) translateX(231px);
}
}
.line:nth-child(21) {
-webkit-transform: rotateY(267deg);
transform: rotateY(267deg);
}
.line:nth-child(21) .spark {
-webkit-animation: spark21 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark21 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(21) .fire {
-webkit-animation: fire 1740ms -798ms linear infinite;
animation: fire 1740ms -798ms linear infinite;
}
@-webkit-keyframes spark21 {
0% {
-webkit-transform: translateY(629px);
transform: translateY(629px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(357deg) translateX(169px);
transform: rotateZ(357deg) translateX(169px);
}
}
@keyframes spark21 {
0% {
-webkit-transform: translateY(629px);
transform: translateY(629px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(357deg) translateX(169px);
transform: rotateZ(357deg) translateX(169px);
}
}
.line:nth-child(22) {
-webkit-transform: rotateY(188deg);
transform: rotateY(188deg);
}
.line:nth-child(22) .spark {
-webkit-animation: spark22 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark22 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(22) .fire {
-webkit-animation: fire 1132ms -81ms linear infinite;
animation: fire 1132ms -81ms linear infinite;
}
@-webkit-keyframes spark22 {
0% {
-webkit-transform: translateY(633px);
transform: translateY(633px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(253deg) translateX(253px);
transform: rotateZ(253deg) translateX(253px);
}
}
@keyframes spark22 {
0% {
-webkit-transform: translateY(633px);
transform: translateY(633px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(253deg) translateX(253px);
transform: rotateZ(253deg) translateX(253px);
}
}
.line:nth-child(23) {
-webkit-transform: rotateY(194deg);
transform: rotateY(194deg);
}
.line:nth-child(23) .spark {
-webkit-animation: spark23 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark23 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(23) .fire {
-webkit-animation: fire 1562ms -518ms linear infinite;
animation: fire 1562ms -518ms linear infinite;
}
@-webkit-keyframes spark23 {
0% {
-webkit-transform: translateY(625px);
transform: translateY(625px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(324deg) translateX(212px);
transform: rotateZ(324deg) translateX(212px);
}
}
@keyframes spark23 {
0% {
-webkit-transform: translateY(625px);
transform: translateY(625px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(324deg) translateX(212px);
transform: rotateZ(324deg) translateX(212px);
}
}
.line:nth-child(24) {
-webkit-transform: rotateY(276deg);
transform: rotateY(276deg);
}
.line:nth-child(24) .spark {
-webkit-animation: spark24 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark24 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(24) .fire {
-webkit-animation: fire 1759ms -563ms linear infinite;
animation: fire 1759ms -563ms linear infinite;
}
@-webkit-keyframes spark24 {
0% {
-webkit-transform: translateY(647px);
transform: translateY(647px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(193deg) translateX(157px);
transform: rotateZ(193deg) translateX(157px);
}
}
@keyframes spark24 {
0% {
-webkit-transform: translateY(647px);
transform: translateY(647px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(193deg) translateX(157px);
transform: rotateZ(193deg) translateX(157px);
}
}
.line:nth-child(25) {
-webkit-transform: rotateY(216deg);
transform: rotateY(216deg);
}
.line:nth-child(25) .spark {
-webkit-animation: spark25 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark25 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(25) .fire {
-webkit-animation: fire 1209ms -963ms linear infinite;
animation: fire 1209ms -963ms linear infinite;
}
@-webkit-keyframes spark25 {
0% {
-webkit-transform: translateY(507px);
transform: translateY(507px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(166deg) translateX(196px);
transform: rotateZ(166deg) translateX(196px);
}
}
@keyframes spark25 {
0% {
-webkit-transform: translateY(507px);
transform: translateY(507px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(166deg) translateX(196px);
transform: rotateZ(166deg) translateX(196px);
}
}
.line:nth-child(26) {
-webkit-transform: rotateY(116deg);
transform: rotateY(116deg);
}
.line:nth-child(26) .spark {
-webkit-animation: spark26 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark26 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(26) .fire {
-webkit-animation: fire 1624ms -551ms linear infinite;
animation: fire 1624ms -551ms linear infinite;
}
@-webkit-keyframes spark26 {
0% {
-webkit-transform: translateY(571px);
transform: translateY(571px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(41deg) translateX(238px);
transform: rotateZ(41deg) translateX(238px);
}
}
@keyframes spark26 {
0% {
-webkit-transform: translateY(571px);
transform: translateY(571px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(41deg) translateX(238px);
transform: rotateZ(41deg) translateX(238px);
}
}
.line:nth-child(27) {
-webkit-transform: rotateY(208deg);
transform: rotateY(208deg);
}
.line:nth-child(27) .spark {
-webkit-animation: spark27 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark27 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(27) .fire {
-webkit-animation: fire 1349ms -948ms linear infinite;
animation: fire 1349ms -948ms linear infinite;
}
@-webkit-keyframes spark27 {
0% {
-webkit-transform: translateY(624px);
transform: translateY(624px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(64deg) translateX(218px);
transform: rotateZ(64deg) translateX(218px);
}
}
@keyframes spark27 {
0% {
-webkit-transform: translateY(624px);
transform: translateY(624px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(64deg) translateX(218px);
transform: rotateZ(64deg) translateX(218px);
}
}
.line:nth-child(28) {
-webkit-transform: rotateY(56deg);
transform: rotateY(56deg);
}
.line:nth-child(28) .spark {
-webkit-animation: spark28 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark28 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(28) .fire {
-webkit-animation: fire 1607ms -784ms linear infinite;
animation: fire 1607ms -784ms linear infinite;
}
@-webkit-keyframes spark28 {
0% {
-webkit-transform: translateY(552px);
transform: translateY(552px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(67deg) translateX(268px);
transform: rotateZ(67deg) translateX(268px);
}
}
@keyframes spark28 {
0% {
-webkit-transform: translateY(552px);
transform: translateY(552px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(67deg) translateX(268px);
transform: rotateZ(67deg) translateX(268px);
}
}
.line:nth-child(29) {
-webkit-transform: rotateY(49deg);
transform: rotateY(49deg);
}
.line:nth-child(29) .spark {
-webkit-animation: spark29 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark29 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(29) .fire {
-webkit-animation: fire 1612ms -611ms linear infinite;
animation: fire 1612ms -611ms linear infinite;
}
@-webkit-keyframes spark29 {
0% {
-webkit-transform: translateY(583px);
transform: translateY(583px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(315deg) translateX(284px);
transform: rotateZ(315deg) translateX(284px);
}
}
@keyframes spark29 {
0% {
-webkit-transform: translateY(583px);
transform: translateY(583px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(315deg) translateX(284px);
transform: rotateZ(315deg) translateX(284px);
}
}
.line:nth-child(30) {
-webkit-transform: rotateY(138deg);
transform: rotateY(138deg);
}
.line:nth-child(30) .spark {
-webkit-animation: spark30 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark30 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(30) .fire {
-webkit-animation: fire 1670ms -996ms linear infinite;
animation: fire 1670ms -996ms linear infinite;
}
@-webkit-keyframes spark30 {
0% {
-webkit-transform: translateY(538px);
transform: translateY(538px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(269deg) translateX(168px);
transform: rotateZ(269deg) translateX(168px);
}
}
@keyframes spark30 {
0% {
-webkit-transform: translateY(538px);
transform: translateY(538px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(269deg) translateX(168px);
transform: rotateZ(269deg) translateX(168px);
}
}
.line:nth-child(31) {
-webkit-transform: rotateY(32deg);
transform: rotateY(32deg);
}
.line:nth-child(31) .spark {
-webkit-animation: spark31 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark31 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(31) .fire {
-webkit-animation: fire 1391ms -931ms linear infinite;
animation: fire 1391ms -931ms linear infinite;
}
@-webkit-keyframes spark31 {
0% {
-webkit-transform: translateY(646px);
transform: translateY(646px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(283deg) translateX(275px);
transform: rotateZ(283deg) translateX(275px);
}
}
@keyframes spark31 {
0% {
-webkit-transform: translateY(646px);
transform: translateY(646px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(283deg) translateX(275px);
transform: rotateZ(283deg) translateX(275px);
}
}
.line:nth-child(32) {
-webkit-transform: rotateY(351deg);
transform: rotateY(351deg);
}
.line:nth-child(32) .spark {
-webkit-animation: spark32 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark32 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(32) .fire {
-webkit-animation: fire 1007ms -934ms linear infinite;
animation: fire 1007ms -934ms linear infinite;
}
@-webkit-keyframes spark32 {
0% {
-webkit-transform: translateY(648px);
transform: translateY(648px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(155deg) translateX(239px);
transform: rotateZ(155deg) translateX(239px);
}
}
@keyframes spark32 {
0% {
-webkit-transform: translateY(648px);
transform: translateY(648px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(155deg) translateX(239px);
transform: rotateZ(155deg) translateX(239px);
}
}
.line:nth-child(33) {
-webkit-transform: rotateY(164deg);
transform: rotateY(164deg);
}
.line:nth-child(33) .spark {
-webkit-animation: spark33 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark33 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(33) .fire {
-webkit-animation: fire 1797ms -116ms linear infinite;
animation: fire 1797ms -116ms linear infinite;
}
@-webkit-keyframes spark33 {
0% {
-webkit-transform: translateY(595px);
transform: translateY(595px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(246deg) translateX(237px);
transform: rotateZ(246deg) translateX(237px);
}
}
@keyframes spark33 {
0% {
-webkit-transform: translateY(595px);
transform: translateY(595px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(246deg) translateX(237px);
transform: rotateZ(246deg) translateX(237px);
}
}
.line:nth-child(34) {
-webkit-transform: rotateY(153deg);
transform: rotateY(153deg);
}
.line:nth-child(34) .spark {
-webkit-animation: spark34 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark34 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(34) .fire {
-webkit-animation: fire 1396ms -425ms linear infinite;
animation: fire 1396ms -425ms linear infinite;
}
@-webkit-keyframes spark34 {
0% {
-webkit-transform: translateY(517px);
transform: translateY(517px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(259deg) translateX(225px);
transform: rotateZ(259deg) translateX(225px);
}
}
@keyframes spark34 {
0% {
-webkit-transform: translateY(517px);
transform: translateY(517px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(259deg) translateX(225px);
transform: rotateZ(259deg) translateX(225px);
}
}
.line:nth-child(35) {
-webkit-transform: rotateY(96deg);
transform: rotateY(96deg);
}
.line:nth-child(35) .spark {
-webkit-animation: spark35 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark35 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(35) .fire {
-webkit-animation: fire 1673ms -878ms linear infinite;
animation: fire 1673ms -878ms linear infinite;
}
@-webkit-keyframes spark35 {
0% {
-webkit-transform: translateY(621px);
transform: translateY(621px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(199deg) translateX(255px);
transform: rotateZ(199deg) translateX(255px);
}
}
@keyframes spark35 {
0% {
-webkit-transform: translateY(621px);
transform: translateY(621px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(199deg) translateX(255px);
transform: rotateZ(199deg) translateX(255px);
}
}
.line:nth-child(36) {
-webkit-transform: rotateY(36deg);
transform: rotateY(36deg);
}
.line:nth-child(36) .spark {
-webkit-animation: spark36 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark36 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(36) .fire {
-webkit-animation: fire 1597ms -958ms linear infinite;
animation: fire 1597ms -958ms linear infinite;
}
@-webkit-keyframes spark36 {
0% {
-webkit-transform: translateY(583px);
transform: translateY(583px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(82deg) translateX(125px);
transform: rotateZ(82deg) translateX(125px);
}
}
@keyframes spark36 {
0% {
-webkit-transform: translateY(583px);
transform: translateY(583px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(82deg) translateX(125px);
transform: rotateZ(82deg) translateX(125px);
}
}
.line:nth-child(37) {
-webkit-transform: rotateY(161deg);
transform: rotateY(161deg);
}
.line:nth-child(37) .spark {
-webkit-animation: spark37 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark37 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(37) .fire {
-webkit-animation: fire 1884ms -947ms linear infinite;
animation: fire 1884ms -947ms linear infinite;
}
@-webkit-keyframes spark37 {
0% {
-webkit-transform: translateY(560px);
transform: translateY(560px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(294deg) translateX(148px);
transform: rotateZ(294deg) translateX(148px);
}
}
@keyframes spark37 {
0% {
-webkit-transform: translateY(560px);
transform: translateY(560px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(294deg) translateX(148px);
transform: rotateZ(294deg) translateX(148px);
}
}
.line:nth-child(38) {
-webkit-transform: rotateY(139deg);
transform: rotateY(139deg);
}
.line:nth-child(38) .spark {
-webkit-animation: spark38 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark38 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(38) .fire {
-webkit-animation: fire 1941ms -473ms linear infinite;
animation: fire 1941ms -473ms linear infinite;
}
@-webkit-keyframes spark38 {
0% {
-webkit-transform: translateY(595px);
transform: translateY(595px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(44deg) translateX(229px);
transform: rotateZ(44deg) translateX(229px);
}
}
@keyframes spark38 {
0% {
-webkit-transform: translateY(595px);
transform: translateY(595px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(44deg) translateX(229px);
transform: rotateZ(44deg) translateX(229px);
}
}
.line:nth-child(39) {
-webkit-transform: rotateY(300deg);
transform: rotateY(300deg);
}
.line:nth-child(39) .spark {
-webkit-animation: spark39 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark39 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(39) .fire {
-webkit-animation: fire 1742ms -918ms linear infinite;
animation: fire 1742ms -918ms linear infinite;
}
@-webkit-keyframes spark39 {
0% {
-webkit-transform: translateY(595px);
transform: translateY(595px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(168deg) translateX(203px);
transform: rotateZ(168deg) translateX(203px);
}
}
@keyframes spark39 {
0% {
-webkit-transform: translateY(595px);
transform: translateY(595px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(168deg) translateX(203px);
transform: rotateZ(168deg) translateX(203px);
}
}
.line:nth-child(40) {
-webkit-transform: rotateY(19deg);
transform: rotateY(19deg);
}
.line:nth-child(40) .spark {
-webkit-animation: spark40 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark40 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(40) .fire {
-webkit-animation: fire 1620ms -970ms linear infinite;
animation: fire 1620ms -970ms linear infinite;
}
@-webkit-keyframes spark40 {
0% {
-webkit-transform: translateY(553px);
transform: translateY(553px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(259deg) translateX(237px);
transform: rotateZ(259deg) translateX(237px);
}
}
@keyframes spark40 {
0% {
-webkit-transform: translateY(553px);
transform: translateY(553px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(259deg) translateX(237px);
transform: rotateZ(259deg) translateX(237px);
}
}
.line:nth-child(41) {
-webkit-transform: rotateY(38deg);
transform: rotateY(38deg);
}
.line:nth-child(41) .spark {
-webkit-animation: spark41 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark41 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(41) .fire {
-webkit-animation: fire 1291ms -263ms linear infinite;
animation: fire 1291ms -263ms linear infinite;
}
@-webkit-keyframes spark41 {
0% {
-webkit-transform: translateY(611px);
transform: translateY(611px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(150deg) translateX(225px);
transform: rotateZ(150deg) translateX(225px);
}
}
@keyframes spark41 {
0% {
-webkit-transform: translateY(611px);
transform: translateY(611px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(150deg) translateX(225px);
transform: rotateZ(150deg) translateX(225px);
}
}
.line:nth-child(42) {
-webkit-transform: rotateY(27deg);
transform: rotateY(27deg);
}
.line:nth-child(42) .spark {
-webkit-animation: spark42 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
animation: spark42 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite, opacity 5s ease-out infinite;
}
.line:nth-child(42) .fire {
-webkit-animation: fire 1915ms -721ms linear infinite;
animation: fire 1915ms -721ms linear infinite;
}
@-webkit-keyframes spark42 {
0% {
-webkit-transform: translateY(568px);
transform: translateY(568px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(290deg) translateX(203px);
transform: rotateZ(290deg) translateX(203px);
}
}
@keyframes spark42 {
0% {
-webkit-transform: translateY(568px);
transform: translateY(568px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(290deg) translateX(203px);
transform: rotateZ(290deg) translateX(203px);
}
}
.line:nth-child(43) {
-webkit-transform: rotateY(29deg);
transform: rotateY(29deg);
}
.line:nth-child(43) .spark {
-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 1061ms -913ms linear infinite;
animation: fire 1061ms -913ms linear infinite;
}
@-webkit-keyframes spark43 {
0% {
-webkit-transform: translateY(644px);
transform: translateY(644px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(297deg) translateX(201px);
transform: rotateZ(297deg) translateX(201px);
}
}
@keyframes spark43 {
0% {
-webkit-transform: translateY(644px);
transform: translateY(644px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(297deg) translateX(201px);
transform: rotateZ(297deg) translateX(201px);
}
}
.line:nth-child(44) {
-webkit-transform: rotateY(219deg);
transform: rotateY(219deg);
}
.line:nth-child(44) .spark {
-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 1578ms -880ms linear infinite;
animation: fire 1578ms -880ms linear infinite;
}
@-webkit-keyframes spark44 {
0% {
-webkit-transform: translateY(521px);
transform: translateY(521px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(77deg) translateX(211px);
transform: rotateZ(77deg) translateX(211px);
}
}
@keyframes spark44 {
0% {
-webkit-transform: translateY(521px);
transform: translateY(521px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(77deg) translateX(211px);
transform: rotateZ(77deg) translateX(211px);
}
}
.line:nth-child(45) {
-webkit-transform: rotateY(343deg);
transform: rotateY(343deg);
}
.line:nth-child(45) .spark {
-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 1900ms -292ms linear infinite;
animation: fire 1900ms -292ms linear infinite;
}
@-webkit-keyframes spark45 {
0% {
-webkit-transform: translateY(512px);
transform: translateY(512px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(331deg) translateX(279px);
transform: rotateZ(331deg) translateX(279px);
}
}
@keyframes spark45 {
0% {
-webkit-transform: translateY(512px);
transform: translateY(512px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(331deg) translateX(279px);
transform: rotateZ(331deg) translateX(279px);
}
}
.line:nth-child(46) {
-webkit-transform: rotateY(146deg);
transform: rotateY(146deg);
}
.line:nth-child(46) .spark {
-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 1095ms -548ms linear infinite;
animation: fire 1095ms -548ms linear infinite;
}
@-webkit-keyframes spark46 {
0% {
-webkit-transform: translateY(525px);
transform: translateY(525px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(139deg) translateX(115px);
transform: rotateZ(139deg) translateX(115px);
}
}
@keyframes spark46 {
0% {
-webkit-transform: translateY(525px);
transform: translateY(525px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(139deg) translateX(115px);
transform: rotateZ(139deg) translateX(115px);
}
}
.line:nth-child(47) {
-webkit-transform: rotateY(256deg);
transform: rotateY(256deg);
}
.line:nth-child(47) .spark {
-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 1537ms -716ms linear infinite;
animation: fire 1537ms -716ms linear infinite;
}
@-webkit-keyframes spark47 {
0% {
-webkit-transform: translateY(621px);
transform: translateY(621px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(59deg) translateX(280px);
transform: rotateZ(59deg) translateX(280px);
}
}
@keyframes spark47 {
0% {
-webkit-transform: translateY(621px);
transform: translateY(621px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(59deg) translateX(280px);
transform: rotateZ(59deg) translateX(280px);
}
}
.line:nth-child(48) {
-webkit-transform: rotateY(100deg);
transform: rotateY(100deg);
}
.line:nth-child(48) .spark {
-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 1212ms -609ms linear infinite;
animation: fire 1212ms -609ms linear infinite;
}
@-webkit-keyframes spark48 {
0% {
-webkit-transform: translateY(571px);
transform: translateY(571px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(6deg) translateX(164px);
transform: rotateZ(6deg) translateX(164px);
}
}
@keyframes spark48 {
0% {
-webkit-transform: translateY(571px);
transform: translateY(571px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(6deg) translateX(164px);
transform: rotateZ(6deg) translateX(164px);
}
}
.line:nth-child(49) {
-webkit-transform: rotateY(103deg);
transform: rotateY(103deg);
}
.line:nth-child(49) .spark {
-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 1258ms -102ms linear infinite;
animation: fire 1258ms -102ms linear infinite;
}
@-webkit-keyframes spark49 {
0% {
-webkit-transform: translateY(539px);
transform: translateY(539px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(316deg) translateX(168px);
transform: rotateZ(316deg) translateX(168px);
}
}
@keyframes spark49 {
0% {
-webkit-transform: translateY(539px);
transform: translateY(539px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(316deg) translateX(168px);
transform: rotateZ(316deg) translateX(168px);
}
}
.line:nth-child(50) {
-webkit-transform: rotateY(33deg);
transform: rotateY(33deg);
}
.line:nth-child(50) .spark {
-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 1949ms -68ms linear infinite;
animation: fire 1949ms -68ms linear infinite;
}
@-webkit-keyframes spark50 {
0% {
-webkit-transform: translateY(508px);
transform: translateY(508px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(293deg) translateX(277px);
transform: rotateZ(293deg) translateX(277px);
}
}
@keyframes spark50 {
0% {
-webkit-transform: translateY(508px);
transform: translateY(508px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(293deg) translateX(277px);
transform: rotateZ(293deg) translateX(277px);
}
}
.line:nth-child(51) {
-webkit-transform: rotateY(354deg);
transform: rotateY(354deg);
}
.line:nth-child(51) .spark {
-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 1211ms -584ms linear infinite;
animation: fire 1211ms -584ms linear infinite;
}
@-webkit-keyframes spark51 {
0% {
-webkit-transform: translateY(523px);
transform: translateY(523px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(307deg) translateX(156px);
transform: rotateZ(307deg) translateX(156px);
}
}
@keyframes spark51 {
0% {
-webkit-transform: translateY(523px);
transform: translateY(523px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(307deg) translateX(156px);
transform: rotateZ(307deg) translateX(156px);
}
}
.line:nth-child(52) {
-webkit-transform: rotateY(5deg);
transform: rotateY(5deg);
}
.line:nth-child(52) .spark {
-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 1527ms -883ms linear infinite;
animation: fire 1527ms -883ms linear infinite;
}
@-webkit-keyframes spark52 {
0% {
-webkit-transform: translateY(582px);
transform: translateY(582px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(114deg) translateX(266px);
transform: rotateZ(114deg) translateX(266px);
}
}
@keyframes spark52 {
0% {
-webkit-transform: translateY(582px);
transform: translateY(582px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(114deg) translateX(266px);
transform: rotateZ(114deg) translateX(266px);
}
}
.line:nth-child(53) {
-webkit-transform: rotateY(351deg);
transform: rotateY(351deg);
}
.line:nth-child(53) .spark {
-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 1948ms -77ms linear infinite;
animation: fire 1948ms -77ms linear infinite;
}
@-webkit-keyframes spark53 {
0% {
-webkit-transform: translateY(591px);
transform: translateY(591px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(181deg) translateX(261px);
transform: rotateZ(181deg) translateX(261px);
}
}
@keyframes spark53 {
0% {
-webkit-transform: translateY(591px);
transform: translateY(591px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(181deg) translateX(261px);
transform: rotateZ(181deg) translateX(261px);
}
}
.line:nth-child(54) {
-webkit-transform: rotateY(323deg);
transform: rotateY(323deg);
}
.line:nth-child(54) .spark {
-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 1204ms -486ms linear infinite;
animation: fire 1204ms -486ms linear infinite;
}
@-webkit-keyframes spark54 {
0% {
-webkit-transform: translateY(568px);
transform: translateY(568px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(223deg) translateX(218px);
transform: rotateZ(223deg) translateX(218px);
}
}
@keyframes spark54 {
0% {
-webkit-transform: translateY(568px);
transform: translateY(568px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(223deg) translateX(218px);
transform: rotateZ(223deg) translateX(218px);
}
}
.line:nth-child(55) {
-webkit-transform: rotateY(77deg);
transform: rotateY(77deg);
}
.line:nth-child(55) .spark {
-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 1480ms -114ms linear infinite;
animation: fire 1480ms -114ms linear infinite;
}
@-webkit-keyframes spark55 {
0% {
-webkit-transform: translateY(541px);
transform: translateY(541px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(342deg) translateX(121px);
transform: rotateZ(342deg) translateX(121px);
}
}
@keyframes spark55 {
0% {
-webkit-transform: translateY(541px);
transform: translateY(541px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(342deg) translateX(121px);
transform: rotateZ(342deg) translateX(121px);
}
}
.line:nth-child(56) {
-webkit-transform: rotateY(121deg);
transform: rotateY(121deg);
}
.line:nth-child(56) .spark {
-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 1149ms -300ms linear infinite;
animation: fire 1149ms -300ms linear infinite;
}
@-webkit-keyframes spark56 {
0% {
-webkit-transform: translateY(563px);
transform: translateY(563px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(65deg) translateX(159px);
transform: rotateZ(65deg) translateX(159px);
}
}
@keyframes spark56 {
0% {
-webkit-transform: translateY(563px);
transform: translateY(563px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(65deg) translateX(159px);
transform: rotateZ(65deg) translateX(159px);
}
}
.line:nth-child(57) {
-webkit-transform: rotateY(293deg);
transform: rotateY(293deg);
}
.line:nth-child(57) .spark {
-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 1501ms -283ms linear infinite;
animation: fire 1501ms -283ms linear infinite;
}
@-webkit-keyframes spark57 {
0% {
-webkit-transform: translateY(639px);
transform: translateY(639px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(106deg) translateX(159px);
transform: rotateZ(106deg) translateX(159px);
}
}
@keyframes spark57 {
0% {
-webkit-transform: translateY(639px);
transform: translateY(639px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(106deg) translateX(159px);
transform: rotateZ(106deg) translateX(159px);
}
}
.line:nth-child(58) {
-webkit-transform: rotateY(275deg);
transform: rotateY(275deg);
}
.line:nth-child(58) .spark {
-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 1568ms -459ms linear infinite;
animation: fire 1568ms -459ms linear infinite;
}
@-webkit-keyframes spark58 {
0% {
-webkit-transform: translateY(575px);
transform: translateY(575px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(278deg) translateX(130px);
transform: rotateZ(278deg) translateX(130px);
}
}
@keyframes spark58 {
0% {
-webkit-transform: translateY(575px);
transform: translateY(575px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(278deg) translateX(130px);
transform: rotateZ(278deg) translateX(130px);
}
}
.line:nth-child(59) {
-webkit-transform: rotateY(120deg);
transform: rotateY(120deg);
}
.line:nth-child(59) .spark {
-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 1826ms -92ms linear infinite;
animation: fire 1826ms -92ms linear infinite;
}
@-webkit-keyframes spark59 {
0% {
-webkit-transform: translateY(643px);
transform: translateY(643px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(114deg) translateX(142px);
transform: rotateZ(114deg) translateX(142px);
}
}
@keyframes spark59 {
0% {
-webkit-transform: translateY(643px);
transform: translateY(643px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(114deg) translateX(142px);
transform: rotateZ(114deg) translateX(142px);
}
}
.line:nth-child(60) {
-webkit-transform: rotateY(83deg);
transform: rotateY(83deg);
}
.line:nth-child(60) .spark {
-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 1026ms -980ms linear infinite;
animation: fire 1026ms -980ms linear infinite;
}
@-webkit-keyframes spark60 {
0% {
-webkit-transform: translateY(552px);
transform: translateY(552px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(53deg) translateX(114px);
transform: rotateZ(53deg) translateX(114px);
}
}
@keyframes spark60 {
0% {
-webkit-transform: translateY(552px);
transform: translateY(552px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(53deg) translateX(114px);
transform: rotateZ(53deg) translateX(114px);
}
}
.line:nth-child(61) {
-webkit-transform: rotateY(129deg);
transform: rotateY(129deg);
}
.line:nth-child(61) .spark {
-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 1946ms -585ms linear infinite;
animation: fire 1946ms -585ms linear infinite;
}
@-webkit-keyframes spark61 {
0% {
-webkit-transform: translateY(644px);
transform: translateY(644px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(94deg) translateX(254px);
transform: rotateZ(94deg) translateX(254px);
}
}
@keyframes spark61 {
0% {
-webkit-transform: translateY(644px);
transform: translateY(644px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(94deg) translateX(254px);
transform: rotateZ(94deg) translateX(254px);
}
}
.line:nth-child(62) {
-webkit-transform: rotateY(121deg);
transform: rotateY(121deg);
}
.line:nth-child(62) .spark {
-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 1346ms -842ms linear infinite;
animation: fire 1346ms -842ms linear infinite;
}
@-webkit-keyframes spark62 {
0% {
-webkit-transform: translateY(641px);
transform: translateY(641px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(107deg) translateX(183px);
transform: rotateZ(107deg) translateX(183px);
}
}
@keyframes spark62 {
0% {
-webkit-transform: translateY(641px);
transform: translateY(641px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(107deg) translateX(183px);
transform: rotateZ(107deg) translateX(183px);
}
}
.line:nth-child(63) {
-webkit-transform: rotateY(255deg);
transform: rotateY(255deg);
}
.line:nth-child(63) .spark {
-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 1860ms -426ms linear infinite;
animation: fire 1860ms -426ms linear infinite;
}
@-webkit-keyframes spark63 {
0% {
-webkit-transform: translateY(527px);
transform: translateY(527px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(31deg) translateX(120px);
transform: rotateZ(31deg) translateX(120px);
}
}
@keyframes spark63 {
0% {
-webkit-transform: translateY(527px);
transform: translateY(527px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(31deg) translateX(120px);
transform: rotateZ(31deg) translateX(120px);
}
}
.line:nth-child(64) {
-webkit-transform: rotateY(240deg);
transform: rotateY(240deg);
}
.line:nth-child(64) .spark {
-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 1492ms -981ms linear infinite;
animation: fire 1492ms -981ms linear infinite;
}
@-webkit-keyframes spark64 {
0% {
-webkit-transform: translateY(546px);
transform: translateY(546px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(171deg) translateX(126px);
transform: rotateZ(171deg) translateX(126px);
}
}
@keyframes spark64 {
0% {
-webkit-transform: translateY(546px);
transform: translateY(546px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(171deg) translateX(126px);
transform: rotateZ(171deg) translateX(126px);
}
}
.line:nth-child(65) {
-webkit-transform: rotateY(10deg);
transform: rotateY(10deg);
}
.line:nth-child(65) .spark {
-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 1196ms -696ms linear infinite;
animation: fire 1196ms -696ms linear infinite;
}
@-webkit-keyframes spark65 {
0% {
-webkit-transform: translateY(544px);
transform: translateY(544px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(136deg) translateX(298px);
transform: rotateZ(136deg) translateX(298px);
}
}
@keyframes spark65 {
0% {
-webkit-transform: translateY(544px);
transform: translateY(544px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(136deg) translateX(298px);
transform: rotateZ(136deg) translateX(298px);
}
}
.line:nth-child(66) {
-webkit-transform: rotateY(168deg);
transform: rotateY(168deg);
}
.line:nth-child(66) .spark {
-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 1172ms -472ms linear infinite;
animation: fire 1172ms -472ms linear infinite;
}
@-webkit-keyframes spark66 {
0% {
-webkit-transform: translateY(512px);
transform: translateY(512px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(332deg) translateX(195px);
transform: rotateZ(332deg) translateX(195px);
}
}
@keyframes spark66 {
0% {
-webkit-transform: translateY(512px);
transform: translateY(512px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(332deg) translateX(195px);
transform: rotateZ(332deg) translateX(195px);
}
}
.line:nth-child(67) {
-webkit-transform: rotateY(146deg);
transform: rotateY(146deg);
}
.line:nth-child(67) .spark {
-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 1281ms -786ms linear infinite;
animation: fire 1281ms -786ms linear infinite;
}
@-webkit-keyframes spark67 {
0% {
-webkit-transform: translateY(649px);
transform: translateY(649px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(67deg) translateX(164px);
transform: rotateZ(67deg) translateX(164px);
}
}
@keyframes spark67 {
0% {
-webkit-transform: translateY(649px);
transform: translateY(649px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(67deg) translateX(164px);
transform: rotateZ(67deg) translateX(164px);
}
}
.line:nth-child(68) {
-webkit-transform: rotateY(182deg);
transform: rotateY(182deg);
}
.line:nth-child(68) .spark {
-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 1530ms -216ms linear infinite;
animation: fire 1530ms -216ms linear infinite;
}
@-webkit-keyframes spark68 {
0% {
-webkit-transform: translateY(524px);
transform: translateY(524px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(140deg) translateX(265px);
transform: rotateZ(140deg) translateX(265px);
}
}
@keyframes spark68 {
0% {
-webkit-transform: translateY(524px);
transform: translateY(524px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(140deg) translateX(265px);
transform: rotateZ(140deg) translateX(265px);
}
}
.line:nth-child(69) {
-webkit-transform: rotateY(20deg);
transform: rotateY(20deg);
}
.line:nth-child(69) .spark {
-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 1653ms -981ms linear infinite;
animation: fire 1653ms -981ms linear infinite;
}
@-webkit-keyframes spark69 {
0% {
-webkit-transform: translateY(605px);
transform: translateY(605px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(264deg) translateX(223px);
transform: rotateZ(264deg) translateX(223px);
}
}
@keyframes spark69 {
0% {
-webkit-transform: translateY(605px);
transform: translateY(605px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(264deg) translateX(223px);
transform: rotateZ(264deg) translateX(223px);
}
}
.line:nth-child(70) {
-webkit-transform: rotateY(131deg);
transform: rotateY(131deg);
}
.line:nth-child(70) .spark {
-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 1350ms -643ms linear infinite;
animation: fire 1350ms -643ms linear infinite;
}
@-webkit-keyframes spark70 {
0% {
-webkit-transform: translateY(618px);
transform: translateY(618px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(24deg) translateX(155px);
transform: rotateZ(24deg) translateX(155px);
}
}
@keyframes spark70 {
0% {
-webkit-transform: translateY(618px);
transform: translateY(618px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(24deg) translateX(155px);
transform: rotateZ(24deg) translateX(155px);
}
}
.line:nth-child(71) {
-webkit-transform: rotateY(62deg);
transform: rotateY(62deg);
}
.line:nth-child(71) .spark {
-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 1183ms -969ms linear infinite;
animation: fire 1183ms -969ms linear infinite;
}
@-webkit-keyframes spark71 {
0% {
-webkit-transform: translateY(588px);
transform: translateY(588px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(60deg) translateX(287px);
transform: rotateZ(60deg) translateX(287px);
}
}
@keyframes spark71 {
0% {
-webkit-transform: translateY(588px);
transform: translateY(588px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(60deg) translateX(287px);
transform: rotateZ(60deg) translateX(287px);
}
}
.line:nth-child(72) {
-webkit-transform: rotateY(286deg);
transform: rotateY(286deg);
}
.line:nth-child(72) .spark {
-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 1661ms -194ms linear infinite;
animation: fire 1661ms -194ms linear infinite;
}
@-webkit-keyframes spark72 {
0% {
-webkit-transform: translateY(588px);
transform: translateY(588px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(81deg) translateX(126px);
transform: rotateZ(81deg) translateX(126px);
}
}
@keyframes spark72 {
0% {
-webkit-transform: translateY(588px);
transform: translateY(588px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(81deg) translateX(126px);
transform: rotateZ(81deg) translateX(126px);
}
}
.line:nth-child(73) {
-webkit-transform: rotateY(7deg);
transform: rotateY(7deg);
}
.line:nth-child(73) .spark {
-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 1673ms -740ms linear infinite;
animation: fire 1673ms -740ms linear infinite;
}
@-webkit-keyframes spark73 {
0% {
-webkit-transform: translateY(579px);
transform: translateY(579px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(67deg) translateX(187px);
transform: rotateZ(67deg) translateX(187px);
}
}
@keyframes spark73 {
0% {
-webkit-transform: translateY(579px);
transform: translateY(579px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(67deg) translateX(187px);
transform: rotateZ(67deg) translateX(187px);
}
}
.line:nth-child(74) {
-webkit-transform: rotateY(336deg);
transform: rotateY(336deg);
}
.line:nth-child(74) .spark {
-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 1588ms -545ms linear infinite;
animation: fire 1588ms -545ms linear infinite;
}
@-webkit-keyframes spark74 {
0% {
-webkit-transform: translateY(548px);
transform: translateY(548px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(212deg) translateX(273px);
transform: rotateZ(212deg) translateX(273px);
}
}
@keyframes spark74 {
0% {
-webkit-transform: translateY(548px);
transform: translateY(548px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(212deg) translateX(273px);
transform: rotateZ(212deg) translateX(273px);
}
}
.line:nth-child(75) {
-webkit-transform: rotateY(220deg);
transform: rotateY(220deg);
}
.line:nth-child(75) .spark {
-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 1064ms -922ms linear infinite;
animation: fire 1064ms -922ms linear infinite;
}
@-webkit-keyframes spark75 {
0% {
-webkit-transform: translateY(563px);
transform: translateY(563px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(286deg) translateX(137px);
transform: rotateZ(286deg) translateX(137px);
}
}
@keyframes spark75 {
0% {
-webkit-transform: translateY(563px);
transform: translateY(563px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(286deg) translateX(137px);
transform: rotateZ(286deg) translateX(137px);
}
}
.line:nth-child(76) {
-webkit-transform: rotateY(229deg);
transform: rotateY(229deg);
}
.line:nth-child(76) .spark {
-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 1522ms -195ms linear infinite;
animation: fire 1522ms -195ms linear infinite;
}
@-webkit-keyframes spark76 {
0% {
-webkit-transform: translateY(585px);
transform: translateY(585px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(207deg) translateX(294px);
transform: rotateZ(207deg) translateX(294px);
}
}
@keyframes spark76 {
0% {
-webkit-transform: translateY(585px);
transform: translateY(585px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(207deg) translateX(294px);
transform: rotateZ(207deg) translateX(294px);
}
}
.line:nth-child(77) {
-webkit-transform: rotateY(139deg);
transform: rotateY(139deg);
}
.line:nth-child(77) .spark {
-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 1566ms -730ms linear infinite;
animation: fire 1566ms -730ms linear infinite;
}
@-webkit-keyframes spark77 {
0% {
-webkit-transform: translateY(645px);
transform: translateY(645px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(118deg) translateX(284px);
transform: rotateZ(118deg) translateX(284px);
}
}
@keyframes spark77 {
0% {
-webkit-transform: translateY(645px);
transform: translateY(645px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(118deg) translateX(284px);
transform: rotateZ(118deg) translateX(284px);
}
}
.line:nth-child(78) {
-webkit-transform: rotateY(38deg);
transform: rotateY(38deg);
}
.line:nth-child(78) .spark {
-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 1345ms -465ms linear infinite;
animation: fire 1345ms -465ms linear infinite;
}
@-webkit-keyframes spark78 {
0% {
-webkit-transform: translateY(537px);
transform: translateY(537px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(224deg) translateX(250px);
transform: rotateZ(224deg) translateX(250px);
}
}
@keyframes spark78 {
0% {
-webkit-transform: translateY(537px);
transform: translateY(537px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(224deg) translateX(250px);
transform: rotateZ(224deg) translateX(250px);
}
}
.line:nth-child(79) {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.line:nth-child(79) .spark {
-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 1117ms -377ms linear infinite;
animation: fire 1117ms -377ms linear infinite;
}
@-webkit-keyframes spark79 {
0% {
-webkit-transform: translateY(516px);
transform: translateY(516px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(296deg) translateX(285px);
transform: rotateZ(296deg) translateX(285px);
}
}
@keyframes spark79 {
0% {
-webkit-transform: translateY(516px);
transform: translateY(516px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(296deg) translateX(285px);
transform: rotateZ(296deg) translateX(285px);
}
}
.line:nth-child(80) {
-webkit-transform: rotateY(141deg);
transform: rotateY(141deg);
}
.line:nth-child(80) .spark {
-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 1548ms -598ms linear infinite;
animation: fire 1548ms -598ms linear infinite;
}
@-webkit-keyframes spark80 {
0% {
-webkit-transform: translateY(615px);
transform: translateY(615px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(153deg) translateX(285px);
transform: rotateZ(153deg) translateX(285px);
}
}
@keyframes spark80 {
0% {
-webkit-transform: translateY(615px);
transform: translateY(615px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(153deg) translateX(285px);
transform: rotateZ(153deg) translateX(285px);
}
}
.line:nth-child(81) {
-webkit-transform: rotateY(259deg);
transform: rotateY(259deg);
}
.line:nth-child(81) .spark {
-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 1592ms -70ms linear infinite;
animation: fire 1592ms -70ms linear infinite;
}
@-webkit-keyframes spark81 {
0% {
-webkit-transform: translateY(603px);
transform: translateY(603px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(289deg) translateX(289px);
transform: rotateZ(289deg) translateX(289px);
}
}
@keyframes spark81 {
0% {
-webkit-transform: translateY(603px);
transform: translateY(603px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(289deg) translateX(289px);
transform: rotateZ(289deg) translateX(289px);
}
}
.line:nth-child(82) {
-webkit-transform: rotateY(322deg);
transform: rotateY(322deg);
}
.line:nth-child(82) .spark {
-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 1078ms -695ms linear infinite;
animation: fire 1078ms -695ms linear infinite;
}
@-webkit-keyframes spark82 {
0% {
-webkit-transform: translateY(609px);
transform: translateY(609px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(290deg) translateX(283px);
transform: rotateZ(290deg) translateX(283px);
}
}
@keyframes spark82 {
0% {
-webkit-transform: translateY(609px);
transform: translateY(609px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(290deg) translateX(283px);
transform: rotateZ(290deg) translateX(283px);
}
}
.line:nth-child(83) {
-webkit-transform: rotateY(9deg);
transform: rotateY(9deg);
}
.line:nth-child(83) .spark {
-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 1744ms -101ms linear infinite;
animation: fire 1744ms -101ms linear infinite;
}
@-webkit-keyframes spark83 {
0% {
-webkit-transform: translateY(608px);
transform: translateY(608px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(161deg) translateX(198px);
transform: rotateZ(161deg) translateX(198px);
}
}
@keyframes spark83 {
0% {
-webkit-transform: translateY(608px);
transform: translateY(608px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(161deg) translateX(198px);
transform: rotateZ(161deg) translateX(198px);
}
}
.line:nth-child(84) {
-webkit-transform: rotateY(204deg);
transform: rotateY(204deg);
}
.line:nth-child(84) .spark {
-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 1517ms -325ms linear infinite;
animation: fire 1517ms -325ms linear infinite;
}
@-webkit-keyframes spark84 {
0% {
-webkit-transform: translateY(624px);
transform: translateY(624px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(246deg) translateX(270px);
transform: rotateZ(246deg) translateX(270px);
}
}
@keyframes spark84 {
0% {
-webkit-transform: translateY(624px);
transform: translateY(624px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(246deg) translateX(270px);
transform: rotateZ(246deg) translateX(270px);
}
}
.line:nth-child(85) {
-webkit-transform: rotateY(60deg);
transform: rotateY(60deg);
}
.line:nth-child(85) .spark {
-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 1697ms -721ms linear infinite;
animation: fire 1697ms -721ms linear infinite;
}
@-webkit-keyframes spark85 {
0% {
-webkit-transform: translateY(518px);
transform: translateY(518px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(156deg) translateX(218px);
transform: rotateZ(156deg) translateX(218px);
}
}
@keyframes spark85 {
0% {
-webkit-transform: translateY(518px);
transform: translateY(518px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rot.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0