纯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) transla.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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