纯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 {
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}
.spark {
position: absolute;
width: 400px;
height: 400px;
-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(71deg);
transform: rotateY(71deg);
}
.line:nth-child(1) .spark {
width: 264px;
height: 396px;
-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 1913ms -537ms linear infinite;
animation: fire 1913ms -537ms linear infinite;
}
@-webkit-keyframes spark1 {
0% {
-webkit-transform: translateY(641px);
transform: translateY(641px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(63deg) translateX(277px);
transform: rotateZ(63deg) translateX(277px);
}
}
@keyframes spark1 {
0% {
-webkit-transform: translateY(641px);
transform: translateY(641px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(63deg) translateX(277px);
transform: rotateZ(63deg) translateX(277px);
}
}
.line:nth-child(2) {
-webkit-transform: rotateY(25deg);
transform: rotateY(25deg);
}
.line:nth-child(2) .spark {
width: 304px;
height: 226px;
-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 1984ms -902ms linear infinite;
animation: fire 1984ms -902ms linear infinite;
}
@-webkit-keyframes spark2 {
0% {
-webkit-transform: translateY(611px);
transform: translateY(611px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(180deg) translateX(269px);
transform: rotateZ(180deg) translateX(269px);
}
}
@keyframes spark2 {
0% {
-webkit-transform: translateY(611px);
transform: translateY(611px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(180deg) translateX(269px);
transform: rotateZ(180deg) translateX(269px);
}
}
.line:nth-child(3) {
-webkit-transform: rotateY(324deg);
transform: rotateY(324deg);
}
.line:nth-child(3) .spark {
width: 306px;
height: 274px;
-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 1753ms -403ms linear infinite;
animation: fire 1753ms -403ms linear infinite;
}
@-webkit-keyframes spark3 {
0% {
-webkit-transform: translateY(565px);
transform: translateY(565px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(227deg) translateX(277px);
transform: rotateZ(227deg) translateX(277px);
}
}
@keyframes spark3 {
0% {
-webkit-transform: translateY(565px);
transform: translateY(565px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(227deg) translateX(277px);
transform: rotateZ(227deg) translateX(277px);
}
}
.line:nth-child(4) {
-webkit-transform: rotateY(53deg);
transform: rotateY(53deg);
}
.line:nth-child(4) .spark {
width: 372px;
height: 377px;
-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 1779ms -616ms linear infinite;
animation: fire 1779ms -616ms linear infinite;
}
@-webkit-keyframes spark4 {
0% {
-webkit-transform: translateY(545px);
transform: translateY(545px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(218deg) translateX(138px);
transform: rotateZ(218deg) translateX(138px);
}
}
@keyframes spark4 {
0% {
-webkit-transform: translateY(545px);
transform: translateY(545px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(218deg) translateX(138px);
transform: rotateZ(218deg) translateX(138px);
}
}
.line:nth-child(5) {
-webkit-transform: rotateY(227deg);
transform: rotateY(227deg);
}
.line:nth-child(5) .spark {
width: 399px;
height: 208px;
-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 1088ms -422ms linear infinite;
animation: fire 1088ms -422ms linear infinite;
}
@-webkit-keyframes spark5 {
0% {
-webkit-transform: translateY(503px);
transform: translateY(503px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(92deg) translateX(141px);
transform: rotateZ(92deg) translateX(141px);
}
}
@keyframes spark5 {
0% {
-webkit-transform: translateY(503px);
transform: translateY(503px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(92deg) translateX(141px);
transform: rotateZ(92deg) translateX(141px);
}
}
.line:nth-child(6) {
-webkit-transform: rotateY(236deg);
transform: rotateY(236deg);
}
.line:nth-child(6) .spark {
width: 263px;
height: 246px;
-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 1566ms -185ms linear infinite;
animation: fire 1566ms -185ms linear infinite;
}
@-webkit-keyframes spark6 {
0% {
-webkit-transform: translateY(594px);
transform: translateY(594px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(265deg) translateX(132px);
transform: rotateZ(265deg) translateX(132px);
}
}
@keyframes spark6 {
0% {
-webkit-transform: translateY(594px);
transform: translateY(594px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(265deg) translateX(132px);
transform: rotateZ(265deg) translateX(132px);
}
}
.line:nth-child(7) {
-webkit-transform: rotateY(197deg);
transform: rotateY(197deg);
}
.line:nth-child(7) .spark {
width: 209px;
height: 279px;
-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 1294ms -56ms linear infinite;
animation: fire 1294ms -56ms linear infinite;
}
@-webkit-keyframes spark7 {
0% {
-webkit-transform: translateY(507px);
transform: translateY(507px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(284deg) translateX(235px);
transform: rotateZ(284deg) translateX(235px);
}
}
@keyframes spark7 {
0% {
-webkit-transform: translateY(507px);
transform: translateY(507px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(284deg) translateX(235px);
transform: rotateZ(284deg) translateX(235px);
}
}
.line:nth-child(8) {
-webkit-transform: rotateY(134deg);
transform: rotateY(134deg);
}
.line:nth-child(8) .spark {
width: 372px;
height: 340px;
-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 1759ms -14ms linear infinite;
animation: fire 1759ms -14ms linear infinite;
}
@-webkit-keyframes spark8 {
0% {
-webkit-transform: translateY(593px);
transform: translateY(593px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(131deg) translateX(139px);
transform: rotateZ(131deg) translateX(139px);
}
}
@keyframes spark8 {
0% {
-webkit-transform: translateY(593px);
transform: translateY(593px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(131deg) translateX(139px);
transform: rotateZ(131deg) translateX(139px);
}
}
.line:nth-child(9) {
-webkit-transform: rotateY(173deg);
transform: rotateY(173deg);
}
.line:nth-child(9) .spark {
width: 348px;
height: 271px;
-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 1495ms -280ms linear infinite;
animation: fire 1495ms -280ms linear infinite;
}
@-webkit-keyframes spark9 {
0% {
-webkit-transform: translateY(566px);
transform: translateY(566px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(89deg) translateX(238px);
transform: rotateZ(89deg) translateX(238px);
}
}
@keyframes spark9 {
0% {
-webkit-transform: translateY(566px);
transform: translateY(566px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(89deg) translateX(238px);
transform: rotateZ(89deg) translateX(238px);
}
}
.line:nth-child(10) {
-webkit-transform: rotateY(87deg);
transform: rotateY(87deg);
}
.line:nth-child(10) .spark {
width: 380px;
height: 256px;
-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 1170ms -343ms linear infinite;
animation: fire 1170ms -343ms linear infinite;
}
@-webkit-keyframes spark10 {
0% {
-webkit-transform: translateY(612px);
transform: translateY(612px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(91deg) translateX(269px);
transform: rotateZ(91deg) translateX(269px);
}
}
@keyframes spark10 {
0% {
-webkit-transform: translateY(612px);
transform: translateY(612px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(91deg) translateX(269px);
transform: rotateZ(91deg) translateX(269px);
}
}
.line:nth-child(11) {
-webkit-transform: rotateY(266deg);
transform: rotateY(266deg);
}
.line:nth-child(11) .spark {
width: 225px;
height: 335px;
-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 1448ms -247ms linear infinite;
animation: fire 1448ms -247ms linear infinite;
}
@-webkit-keyframes spark11 {
0% {
-webkit-transform: translateY(521px);
transform: translateY(521px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(268deg) translateX(104px);
transform: rotateZ(268deg) translateX(104px);
}
}
@keyframes spark11 {
0% {
-webkit-transform: translateY(521px);
transform: translateY(521px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(268deg) translateX(104px);
transform: rotateZ(268deg) translateX(104px);
}
}
.line:nth-child(12) {
-webkit-transform: rotateY(187deg);
transform: rotateY(187deg);
}
.line:nth-child(12) .spark {
width: 203px;
height: 376px;
-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 1620ms -314ms linear infinite;
animation: fire 1620ms -314ms linear infinite;
}
@-webkit-keyframes spark12 {
0% {
-webkit-transform: translateY(553px);
transform: translateY(553px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(137deg) translateX(248px);
transform: rotateZ(137deg) translateX(248px);
}
}
@keyframes spark12 {
0% {
-webkit-transform: translateY(553px);
transform: translateY(553px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(137deg) translateX(248px);
transform: rotateZ(137deg) translateX(248px);
}
}
.line:nth-child(13) {
-webkit-transform: rotateY(126deg);
transform: rotateY(126deg);
}
.line:nth-child(13) .spark {
width: 341px;
height: 251px;
-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 1131ms -516ms linear infinite;
animation: fire 1131ms -516ms linear infinite;
}
@-webkit-keyframes spark13 {
0% {
-webkit-transform: translateY(575px);
transform: translateY(575px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(131deg) translateX(226px);
transform: rotateZ(131deg) translateX(226px);
}
}
@keyframes spark13 {
0% {
-webkit-transform: translateY(575px);
transform: translateY(575px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(131deg) translateX(226px);
transform: rotateZ(131deg) translateX(226px);
}
}
.line:nth-child(14) {
-webkit-transform: rotateY(127deg);
transform: rotateY(127deg);
}
.line:nth-child(14) .spark {
width: 372px;
height: 301px;
-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 1226ms -432ms linear infinite;
animation: fire 1226ms -432ms linear infinite;
}
@-webkit-keyframes spark14 {
0% {
-webkit-transform: translateY(604px);
transform: translateY(604px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(60deg) translateX(122px);
transform: rotateZ(60deg) translateX(122px);
}
}
@keyframes spark14 {
0% {
-webkit-transform: translateY(604px);
transform: translateY(604px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(60deg) translateX(122px);
transform: rotateZ(60deg) translateX(122px);
}
}
.line:nth-child(15) {
-webkit-transform: rotateY(171deg);
transform: rotateY(171deg);
}
.line:nth-child(15) .spark {
width: 364px;
height: 317px;
-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 1067ms -975ms linear infinite;
animation: fire 1067ms -975ms linear infinite;
}
@-webkit-keyframes spark15 {
0% {
-webkit-transform: translateY(575px);
transform: translateY(575px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(291deg) translateX(262px);
transform: rotateZ(291deg) translateX(262px);
}
}
@keyframes spark15 {
0% {
-webkit-transform: translateY(575px);
transform: translateY(575px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(291deg) translateX(262px);
transform: rotateZ(291deg) translateX(262px);
}
}
.line:nth-child(16) {
-webkit-transform: rotateY(215deg);
transform: rotateY(215deg);
}
.line:nth-child(16) .spark {
width: 378px;
height: 362px;
-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 1871ms -69ms linear infinite;
animation: fire 1871ms -69ms linear infinite;
}
@-webkit-keyframes spark16 {
0% {
-webkit-transform: translateY(609px);
transform: translateY(609px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(312deg) translateX(163px);
transform: rotateZ(312deg) translateX(163px);
}
}
@keyframes spark16 {
0% {
-webkit-transform: translateY(609px);
transform: translateY(609px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(312deg) translateX(163px);
transform: rotateZ(312deg) translateX(163px);
}
}
.line:nth-child(17) {
-webkit-transform: rotateY(171deg);
transform: rotateY(171deg);
}
.line:nth-child(17) .spark {
width: 331px;
height: 251px;
-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 1923ms -371ms linear infinite;
animation: fire 1923ms -371ms linear infinite;
}
@-webkit-keyframes spark17 {
0% {
-webkit-transform: translateY(604px);
transform: translateY(604px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(279deg) translateX(204px);
transform: rotateZ(279deg) translateX(204px);
}
}
@keyframes spark17 {
0% {
-webkit-transform: translateY(604px);
transform: translateY(604px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(279deg) translateX(204px);
transform: rotateZ(279deg) translateX(204px);
}
}
.line:nth-child(18) {
-webkit-transform: rotateY(70deg);
transform: rotateY(70deg);
}
.line:nth-child(18) .spark {
width: 209px;
height: 299px;
-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 1377ms -765ms linear infinite;
animation: fire 1377ms -765ms linear infinite;
}
@-webkit-keyframes spark18 {
0% {
-webkit-transform: translateY(523px);
transform: translateY(523px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(216deg) translateX(170px);
transform: rotateZ(216deg) translateX(170px);
}
}
@keyframes spark18 {
0% {
-webkit-transform: translateY(523px);
transform: translateY(523px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(216deg) translateX(170px);
transform: rotateZ(216deg) translateX(170px);
}
}
.line:nth-child(19) {
-webkit-transform: rotateY(32deg);
transform: rotateY(32deg);
}
.line:nth-child(19) .spark {
width: 349px;
height: 273px;
-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 1736ms -581ms linear infinite;
animation: fire 1736ms -581ms linear infinite;
}
@-webkit-keyframes spark19 {
0% {
-webkit-transform: translateY(644px);
transform: translateY(644px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(97deg) translateX(129px);
transform: rotateZ(97deg) translateX(129px);
}
}
@keyframes spark19 {
0% {
-webkit-transform: translateY(644px);
transform: translateY(644px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(97deg) translateX(129px);
transform: rotateZ(97deg) translateX(129px);
}
}
.line:nth-child(20) {
-webkit-transform: rotateY(120deg);
transform: rotateY(120deg);
}
.line:nth-child(20) .spark {
width: 315px;
height: 208px;
-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 1704ms -356ms linear infinite;
animation: fire 1704ms -356ms linear infinite;
}
@-webkit-keyframes spark20 {
0% {
-webkit-transform: translateY(603px);
transform: translateY(603px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(84deg) translateX(198px);
transform: rotateZ(84deg) translateX(198px);
}
}
@keyframes spark20 {
0% {
-webkit-transform: translateY(603px);
transform: translateY(603px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(84deg) translateX(198px);
transform: rotateZ(84deg) translateX(198px);
}
}
.line:nth-child(21) {
-webkit-transform: rotateY(211deg);
transform: rotateY(211deg);
}
.line:nth-child(21) .spark {
width: 233px;
height: 344px;
-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 1955ms -761ms linear infinite;
animation: fire 1955ms -761ms linear infinite;
}
@-webkit-keyframes spark21 {
0% {
-webkit-transform: translateY(619px);
transform: translateY(619px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(254deg) translateX(233px);
transform: rotateZ(254deg) translateX(233px);
}
}
@keyframes spark21 {
0% {
-webkit-transform: translateY(619px);
transform: translateY(619px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(254deg) translateX(233px);
transform: rotateZ(254deg) translateX(233px);
}
}
.line:nth-child(22) {
-webkit-transform: rotateY(133deg);
transform: rotateY(133deg);
}
.line:nth-child(22) .spark {
width: 355px;
height: 208px;
-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 1482ms -537ms linear infinite;
animation: fire 1482ms -537ms linear infinite;
}
@-webkit-keyframes spark22 {
0% {
-webkit-transform: translateY(566px);
transform: translateY(566px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(144deg) translateX(130px);
transform: rotateZ(144deg) translateX(130px);
}
}
@keyframes spark22 {
0% {
-webkit-transform: translateY(566px);
transform: translateY(566px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(144deg) translateX(130px);
transform: rotateZ(144deg) translateX(130px);
}
}
.line:nth-child(23) {
-webkit-transform: rotateY(145deg);
transform: rotateY(145deg);
}
.line:nth-child(23) .spark {
width: 396px;
height: 248px;
-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 1999ms -256ms linear infinite;
animation: fire 1999ms -256ms linear infinite;
}
@-webkit-keyframes spark23 {
0% {
-webkit-transform: translateY(647px);
transform: translateY(647px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(109deg) translateX(118px);
transform: rotateZ(109deg) translateX(118px);
}
}
@keyframes spark23 {
0% {
-webkit-transform: translateY(647px);
transform: translateY(647px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(109deg) translateX(118px);
transform: rotateZ(109deg) translateX(118px);
}
}
.line:nth-child(24) {
-webkit-transform: rotateY(213deg);
transform: rotateY(213deg);
}
.line:nth-child(24) .spark {
width: 224px;
height: 337px;
-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 1222ms -312ms linear infinite;
animation: fire 1222ms -312ms linear infinite;
}
@-webkit-keyframes spark24 {
0% {
-webkit-transform: translateY(641px);
transform: translateY(641px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(19deg) translateX(221px);
transform: rotateZ(19deg) translateX(221px);
}
}
@keyframes spark24 {
0% {
-webkit-transform: translateY(641px);
transform: translateY(641px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(19deg) translateX(221px);
transform: rotateZ(19deg) translateX(221px);
}
}
.line:nth-child(25) {
-webkit-transform: rotateY(4deg);
transform: rotateY(4deg);
}
.line:nth-child(25) .spark {
width: 286px;
height: 314px;
-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 1230ms -121ms linear infinite;
animation: fire 1230ms -121ms linear infinite;
}
@-webkit-keyframes spark25 {
0% {
-webkit-transform: translateY(560px);
transform: translateY(560px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(273deg) translateX(125px);
transform: rotateZ(273deg) translateX(125px);
}
}
@keyframes spark25 {
0% {
-webkit-transform: translateY(560px);
transform: translateY(560px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(273deg) translateX(125px);
transform: rotateZ(273deg) translateX(125px);
}
}
.line:nth-child(26) {
-webkit-transform: rotateY(36deg);
transform: rotateY(36deg);
}
.line:nth-child(26) .spark {
width: 317px;
height: 313px;
-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 1230ms -862ms linear infinite;
animation: fire 1230ms -862ms linear infinite;
}
@-webkit-keyframes spark26 {
0% {
-webkit-transform: translateY(560px);
transform: translateY(560px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(217deg) translateX(209px);
transform: rotateZ(217deg) translateX(209px);
}
}
@keyframes spark26 {
0% {
-webkit-transform: translateY(560px);
transform: translateY(560px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(217deg) translateX(209px);
transform: rotateZ(217deg) translateX(209px);
}
}
.line:nth-child(27) {
-webkit-transform: rotateY(218deg);
transform: rotateY(218deg);
}
.line:nth-child(27) .spark {
width: 247px;
height: 234px;
-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 1953ms -99ms linear infinite;
animation: fire 1953ms -99ms linear infinite;
}
@-webkit-keyframes spark27 {
0% {
-webkit-transform: translateY(625px);
transform: translateY(625px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(359deg) translateX(211px);
transform: rotateZ(359deg) translateX(211px);
}
}
@keyframes spark27 {
0% {
-webkit-transform: translateY(625px);
transform: translateY(625px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(359deg) translateX(211px);
transform: rotateZ(359deg) translateX(211px);
}
}
.line:nth-child(28) {
-webkit-transform: rotateY(19deg);
transform: rotateY(19deg);
}
.line:nth-child(28) .spark {
width: 285px;
height: 268px;
-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 1329ms -410ms linear infinite;
animation: fire 1329ms -410ms linear infinite;
}
@-webkit-keyframes spark28 {
0% {
-webkit-transform: translateY(631px);
transform: translateY(631px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(16deg) translateX(158px);
transform: rotateZ(16deg) translateX(158px);
}
}
@keyframes spark28 {
0% {
-webkit-transform: translateY(631px);
transform: translateY(631px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(16deg) translateX(158px);
transform: rotateZ(16deg) translateX(158px);
}
}
.line:nth-child(29) {
-webkit-transform: rotateY(267deg);
transform: rotateY(267deg);
}
.line:nth-child(29) .spark {
width: 225px;
height: 391px;
-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 1420ms -496ms linear infinite;
animation: fire 1420ms -496ms linear infinite;
}
@-webkit-keyframes spark29 {
0% {
-webkit-transform: translateY(589px);
transform: translateY(589px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(162deg) translateX(146px);
transform: rotateZ(162deg) translateX(146px);
}
}
@keyframes spark29 {
0% {
-webkit-transform: translateY(589px);
transform: translateY(589px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(162deg) translateX(146px);
transform: rotateZ(162deg) translateX(146px);
}
}
.line:nth-child(30) {
-webkit-transform: rotateY(299deg);
transform: rotateY(299deg);
}
.line:nth-child(30) .spark {
width: 210px;
height: 243px;
-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 1994ms -373ms linear infinite;
animation: fire 1994ms -373ms linear infinite;
}
@-webkit-keyframes spark30 {
0% {
-webkit-transform: translateY(598px);
transform: translateY(598px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(44deg) translateX(231px);
transform: rotateZ(44deg) translateX(231px);
}
}
@keyframes spark30 {
0% {
-webkit-transform: translateY(598px);
transform: translateY(598px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(44deg) translateX(231px);
transform: rotateZ(44deg) translateX(231px);
}
}
.line:nth-child(31) {
-webkit-transform: rotateY(221deg);
transform: rotateY(221deg);
}
.line:nth-child(31) .spark {
width: 295px;
height: 203px;
-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 1598ms -699ms linear infinite;
animation: fire 1598ms -699ms linear infinite;
}
@-webkit-keyframes spark31 {
0% {
-webkit-transform: translateY(525px);
transform: translateY(525px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(143deg) translateX(258px);
transform: rotateZ(143deg) translateX(258px);
}
}
@keyframes spark31 {
0% {
-webkit-transform: translateY(525px);
transform: translateY(525px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(143deg) translateX(258px);
transform: rotateZ(143deg) translateX(258px);
}
}
.line:nth-child(32) {
-webkit-transform: rotateY(217deg);
transform: rotateY(217deg);
}
.line:nth-child(32) .spark {
width: 384px;
height: 354px;
-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 1632ms -590ms linear infinite;
animation: fire 1632ms -590ms linear infinite;
}
@-webkit-keyframes spark32 {
0% {
-webkit-transform: translateY(630px);
transform: translateY(630px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(97deg) translateX(130px);
transform: rotateZ(97deg) translateX(130px);
}
}
@keyframes spark32 {
0% {
-webkit-transform: translateY(630px);
transform: translateY(630px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(97deg) translateX(130px);
transform: rotateZ(97deg) translateX(130px);
}
}
.line:nth-child(33) {
-webkit-transform: rotateY(152deg);
transform: rotateY(152deg);
}
.line:nth-child(33) .spark {
width: 391px;
height: 229px;
-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 1558ms -177ms linear infinite;
animation: fire 1558ms -177ms linear infinite;
}
@-webkit-keyframes spark33 {
0% {
-webkit-transform: translateY(577px);
transform: translateY(577px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(337deg) translateX(287px);
transform: rotateZ(337deg) translateX(287px);
}
}
@keyframes spark33 {
0% {
-webkit-transform: translateY(577px);
transform: translateY(577px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(337deg) translateX(287px);
transform: rotateZ(337deg) translateX(287px);
}
}
.line:nth-child(34) {
-webkit-transform: rotateY(134deg);
transform: rotateY(134deg);
}
.line:nth-child(34) .spark {
width: 354px;
height: 396px;
-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 1902ms -198ms linear infinite;
animation: fire 1902ms -198ms linear infinite;
}
@-webkit-keyframes spark34 {
0% {
-webkit-transform: translateY(637px);
transform: translateY(637px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(87deg) translateX(280px);
transform: rotateZ(87deg) translateX(280px);
}
}
@keyframes spark34 {
0% {
-webkit-transform: translateY(637px);
transform: translateY(637px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(87deg) translateX(280px);
transform: rotateZ(87deg) translateX(280px);
}
}
.line:nth-child(35) {
-webkit-transform: rotateY(132deg);
transform: rotateY(132deg);
}
.line:nth-child(35) .spark {
width: 394px;
height: 353px;
-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 1950ms -711ms linear infinite;
animation: fire 1950ms -711ms linear infinite;
}
@-webkit-keyframes spark35 {
0% {
-webkit-transform: translateY(587px);
transform: translateY(587px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(355deg) translateX(199px);
transform: rotateZ(355deg) translateX(199px);
}
}
@keyframes spark35 {
0% {
-webkit-transform: translateY(587px);
transform: translateY(587px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(355deg) translateX(199px);
transform: rotateZ(355deg) translateX(199px);
}
}
.line:nth-child(36) {
-webkit-transform: rotateY(170deg);
transform: rotateY(170deg);
}
.line:nth-child(36) .spark {
width: 367px;
height: 210px;
-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 1330ms -632ms linear infinite;
animation: fire 1330ms -632ms linear infinite;
}
@-webkit-keyframes spark36 {
0% {
-webkit-transform: translateY(591px);
transform: translateY(591px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(115deg) translateX(106px);
transform: rotateZ(115deg) translateX(106px);
}
}
@keyframes spark36 {
0% {
-webkit-transform: translateY(591px);
transform: translateY(591px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(115deg) translateX(106px);
transform: rotateZ(115deg) translateX(106px);
}
}
.line:nth-child(37) {
-webkit-transform: rotateY(79deg);
transform: rotateY(79deg);
}
.line:nth-child(37) .spark {
width: 278px;
height: 313px;
-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 1068ms -222ms linear infinite;
animation: fire 1068ms -222ms linear infinite;
}
@-webkit-keyframes spark37 {
0% {
-webkit-transform: translateY(538px);
transform: translateY(538px);
}
50% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: rotateZ(259deg) translateX(201px);
transform: rotateZ(259deg) translateX(201px);
}
}
@keyframes spark37 {
0% {
-webkit-transform: translateY(538px);
transform: translateY(538px);
}
50% {
-webkit-transform: t.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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