css实现城市放烟花动画效果代码
代码语言：html
所属分类：动画
代码描述：css实现城市放烟花动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
background-image: linear-gradient(#000, #204);
min-height: 100vh;
margin: 0;
overflow: hidden;
perspective: 1000px;
}
.fireworks {
position: absolute;
top: 100%;
left: 50%;
width: 10px;
height: 10px;
transform-style: preserve-3d;
transform: translateX(-50%);
}
@-webkit-keyframes fireworksTop {
0% {
top: 100%;
}
25% {
top: var(--height);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
top: 200%;
}
}
@keyframes fireworksTop {
0% {
top: 100%;
}
25% {
top: var(--height);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
top: 200%;
}
}
.fireworks:nth-child(1) {
-webkit-animation: fireworksTop 5s 0s infinite ease-out, fireworks0 50s 0s infinite step-end;
animation: fireworksTop 5s 0s infinite ease-out, fireworks0 50s 0s infinite step-end;
}
@-webkit-keyframes fireworks0 {
0% {
left: 25%;
transform: translateX(-50%) scale(0.62);
--hue: 0;
--height: 16% ;
}
10% {
left: 35%;
transform: translateX(-50%) scale(0.56);
--hue: 36;
--height: 23% ;
}
20% {
left: 40%;
transform: translateX(-50%) scale(0.77);
--hue: 72;
--height: 26% ;
}
30% {
left: 46%;
transform: translateX(-50%) scale(0.62);
--hue: 108;
--height: 25% ;
}
40% {
left: 44%;
transform: translateX(-50%) scale(0.57);
--hue: 144;
--height: 19% ;
}
50% {
left: 43%;
transform: translateX(-50%) scale(0.64);
--hue: 180;
--height: 18% ;
}
60% {
left: 54%;
transform: translateX(-50%) scale(0.79);
--hue: 216;
--height: 25% ;
}
70% {
left: 42%;
transform: translateX(-50%) scale(0.98);
--hue: 252;
--height: 25% ;
}
80% {
left: 76%;
transform: translateX(-50%) scale(0.9);
--hue: 288;
--height: 17% ;
}
90% {
left: 37%;
transform: translateX(-50%) scale(0.6);
--hue: 324;
--height: 34% ;
}
}
@keyframes fireworks0 {
0% {
left: 25%;
transform: translateX(-50%) scale(0.62);
--hue: 0;
--height: 16% ;
}
10% {
left: 35%;
transform: translateX(-50%) scale(0.56);
--hue: 36;
--height: 23% ;
}
20% {
left: 40%;
transform: translateX(-50%) scale(0.77);
--hue: 72;
--height: 26% ;
}
30% {
left: 46%;
transform: translateX(-50%) scale(0.62);
--hue: 108;
--height: 25% ;
}
40% {
left: 44%;
transform: translateX(-50%) scale(0.57);
--hue: 144;
--height: 19% ;
}
50% {
left: 43%;
transform: translateX(-50%) scale(0.64);
--hue: 180;
--height: 18% ;
}
60% {
left: 54%;
transform: translateX(-50%) scale(0.79);
--hue: 216;
--height: 25% ;
}
70% {
left: 42%;
transform: translateX(-50%) scale(0.98);
--hue: 252;
--height: 25% ;
}
80% {
left: 76%;
transform: translateX(-50%) scale(0.9);
--hue: 288;
--height: 17% ;
}
90% {
left: 37%;
transform: translateX(-50%) scale(0.6);
--hue: 324;
--height: 34% ;
}
}
.fireworks:nth-child(1) > .year {
background-color: hsl(calc(var(--hue) + 0), 100%, 75%);
}
.fireworks:nth-child(1) > .year:nth-child(1) {
--t:
translateX(-280px)
translateY(-300px)
translateZ(490px)
rotateX(506deg)
rotateY(468deg)
rotateZ(447deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(2) {
--t:
translateX(460px)
translateY(-630px)
translateZ(-340px)
rotateX(390deg)
rotateY(609deg)
rotateZ(269deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(3) {
--t:
translateX(-450px)
translateY(-430px)
translateZ(-30px)
rotateX(706deg)
rotateY(10deg)
rotateZ(35deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(4) {
--t:
translateX(110px)
translateY(-370px)
translateZ(170px)
rotateX(394deg)
rotateY(602deg)
rotateZ(290deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(5) {
--t:
translateX(230px)
translateY(-740px)
translateZ(340px)
rotateX(342deg)
rotateY(46deg)
rotateZ(112deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(6) {
--t:
translateX(230px)
translateY(-680px)
translateZ(350px)
rotateX(698deg)
rotateY(497deg)
rotateZ(270deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(7) {
--t:
translateX(80px)
translateY(-360px)
translateZ(-320px)
rotateX(692deg)
rotateY(596deg)
rotateZ(603deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(8) {
--t:
translateX(30px)
translateY(-270px)
translateZ(-160px)
rotateX(220deg)
rotateY(718deg)
rotateZ(332deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(9) {
--t:
translateX(-30px)
translateY(-290px)
translateZ(-240px)
rotateX(64deg)
rotateY(339deg)
rotateZ(495deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(10) {
--t:
translateX(250px)
translateY(-320px)
translateZ(-220px)
rotateX(451deg)
rotateY(411deg)
rotateZ(78deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(11) {
--t:
translateX(-30px)
translateY(-270px)
translateZ(200px)
rotateX(119deg)
rotateY(115deg)
rotateZ(152deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(12) {
--t:
translateX(70px)
translateY(-450px)
translateZ(20px)
rotateX(81deg)
rotateY(192deg)
rotateZ(642deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(13) {
--t:
translateX(220px)
translateY(-600px)
translateZ(-300px)
rotateX(300deg)
rotateY(513deg)
rotateZ(356deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(14) {
--t:
translateX(440px)
translateY(-290px)
translateZ(500px)
rotateX(659deg)
rotateY(634deg)
rotateZ(3deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(15) {
--t:
translateX(-410px)
translateY(-520px)
translateZ(-420px)
rotateX(221deg)
rotateY(124deg)
rotateZ(2deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(16) {
--t:
translateX(-250px)
translateY(-410px)
translateZ(110px)
rotateX(503deg)
rotateY(525deg)
rotateZ(332deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(17) {
--t:
translateX(-430px)
translateY(-580px)
translateZ(170px)
rotateX(137deg)
rotateY(280deg)
rotateZ(709deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(18) {
--t:
translateX(380px)
translateY(-630px)
translateZ(-330px)
rotateX(448deg)
rotateY(239deg)
rotateZ(357deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(19) {
--t:
translateX(470px)
translateY(-450px)
translateZ(80px)
rotateX(677deg)
rotateY(626deg)
rotateZ(62deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(20) {
--t:
translateX(280px)
translateY(-460px)
translateZ(-440px)
rotateX(255deg)
rotateY(561deg)
rotateZ(3deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(21) {
--t:
translateX(460px)
translateY(-340px)
translateZ(450px)
rotateX(635deg)
rotateY(241deg)
rotateZ(198deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(22) {
--t:
translateX(-160px)
translateY(-260px)
translateZ(40px)
rotateX(702deg)
rotateY(719deg)
rotateZ(289deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(23) {
--t:
translateX(-140px)
translateY(-440px)
translateZ(80px)
rotateX(564deg)
rotateY(359deg)
rotateZ(526deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(24) {
--t:
translateX(160px)
translateY(-720px)
translateZ(210px)
rotateX(125deg)
rotateY(244deg)
rotateZ(21deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(25) {
--t:
translateX(-90px)
translateY(-600px)
translateZ(-150px)
rotateX(272deg)
rotateY(472deg)
rotateZ(112deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(26) {
--t:
translateX(-200px)
translateY(-700px)
translateZ(150px)
rotateX(644deg)
rotateY(662deg)
rotateZ(300deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(27) {
--t:
translateX(-350px)
translateY(-600px)
translateZ(290px)
rotateX(374deg)
rotateY(256deg)
rotateZ(315deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(28) {
--t:
translateX(340px)
translateY(-420px)
translateZ(-330px)
rotateX(116deg)
rotateY(336deg)
rotateZ(335deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(29) {
--t:
translateX(10px)
translateY(-640px)
translateZ(180px)
rotateX(94deg)
rotateY(568deg)
rotateZ(206deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(30) {
--t:
translateX(30px)
translateY(-590px)
translateZ(-360px)
rotateX(315deg)
rotateY(324deg)
rotateZ(437deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(31) {
--t:
translateX(250px)
translateY(-500px)
translateZ(70px)
rotateX(21deg)
rotateY(665deg)
rotateZ(187deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(32) {
--t:
translateX(-120px)
translateY(-520px)
translateZ(-350px)
rotateX(641deg)
rotateY(80deg)
rotateZ(447deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(33) {
--t:
translateX(190px)
translateY(-300px)
translateZ(-110px)
rotateX(607deg)
rotateY(63deg)
rotateZ(451deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(34) {
--t:
translateX(-310px)
translateY(-290px)
translateZ(-40px)
rotateX(284deg)
rotateY(6deg)
rotateZ(593deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(35) {
--t:
translateX(190px)
translateY(-510px)
translateZ(120px)
rotateX(405deg)
rotateY(237deg)
rotateZ(413deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(36) {
--t:
translateX(180px)
translateY(-700px)
translateZ(-320px)
rotateX(430deg)
rotateY(685deg)
rotateZ(523deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(37) {
--t:
translateX(280px)
translateY(-490px)
translateZ(-60px)
rotateX(518deg)
rotateY(89deg)
rotateZ(289deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(38) {
--t:
translateX(240px)
translateY(-570px)
translateZ(-440px)
rotateX(541deg)
rotateY(402deg)
rotateZ(132deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(39) {
--t:
translateX(-300px)
translateY(-680px)
translateZ(-220px)
rotateX(709deg)
rotateY(555deg)
rotateZ(568deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(40) {
--t:
translateX(430px)
translateY(-340px)
translateZ(-140px)
rotateX(262deg)
rotateY(248deg)
rotateZ(391deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(41) {
--t:
translateX(-460px)
translateY(-520px)
translateZ(250px)
rotateX(706deg)
rotateY(695deg)
rotateZ(405deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(42) {
--t:
translateX(-110px)
translateY(-430px)
translateZ(430px)
rotateX(80deg)
rotateY(467deg)
rotateZ(44deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(43) {
--t:
translateX(50px)
translateY(-530px)
translateZ(320px)
rotateX(92deg)
rotateY(623deg)
rotateZ(333deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(44) {
--t:
translateX(-290px)
translateY(-340px)
translateZ(-330px)
rotateX(541deg)
rotateY(138deg)
rotateZ(224deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(45) {
--t:
translateX(-400px)
translateY(-590px)
translateZ(-260px)
rotateX(25deg)
rotateY(630deg)
rotateZ(158deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(46) {
--t:
translateX(490px)
translateY(-430px)
translateZ(-340px)
rotateX(237deg)
rotateY(326deg)
rotateZ(423deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(47) {
--t:
translateX(-450px)
translateY(-440px)
translateZ(100px)
rotateX(572deg)
rotateY(578deg)
rotateZ(548deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(48) {
--t:
translateX(-200px)
translateY(-560px)
translateZ(20px)
rotateX(15deg)
rotateY(33deg)
rotateZ(676deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(49) {
--t:
translateX(-130px)
translateY(-590px)
translateZ(340px)
rotateX(388deg)
rotateY(370deg)
rotateZ(544deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(50) {
--t:
translateX(-250px)
translateY(-720px)
translateZ(-170px)
rotateX(712deg)
rotateY(631deg)
rotateZ(109deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(51) {
--t:
translateX(-30px)
translateY(-720px)
translateZ(250px)
rotateX(200deg)
rotateY(148deg)
rotateZ(306deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(52) {
--t:
translateX(-410px)
translateY(-630px)
translateZ(-100px)
rotateX(608deg)
rotateY(315deg)
rotateZ(68deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(53) {
--t:
translateX(-310px)
translateY(-250px)
translateZ(-330px)
rotateX(578deg)
rotateY(94deg)
rotateZ(447deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(54) {
--t:
translateX(150px)
translateY(-570px)
translateZ(-360px)
rotateX(716deg)
rotateY(402deg)
rotateZ(51deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(55) {
--t:
translateX(-140px)
translateY(-690px)
translateZ(130px)
rotateX(607deg)
rotateY(173deg)
rotateZ(458deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(56) {
--t:
translateX(-230px)
translateY(-690px)
translateZ(-40px)
rotateX(68deg)
rotateY(604deg)
rotateZ(66deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(57) {
--t:
translateX(200px)
translateY(-290px)
translateZ(30px)
rotateX(272deg)
rotateY(700deg)
rotateZ(400deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(58) {
--t:
translateX(200px)
translateY(-420px)
translateZ(-450px)
rotateX(36deg)
rotateY(20deg)
rotateZ(518deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(59) {
--t:
translateX(260px)
translateY(-280px)
translateZ(20px)
rotateX(483deg)
rotateY(384deg)
rotateZ(37deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(60) {
--t:
translateX(250px)
translateY(-390px)
translateZ(40px)
rotateX(665deg)
rotateY(373deg)
rotateZ(438deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(61) {
--t:
translateX(170px)
translateY(-510px)
translateZ(-120px)
rotateX(662deg)
rotateY(417deg)
rotateZ(210deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(62) {
--t:
translateX(420px)
translateY(-510px)
translateZ(-30px)
rotateX(431deg)
rotateY(220deg)
rotateZ(245deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(63) {
--t:
translateX(-270px)
translateY(-530px)
translateZ(-210px)
rotateX(583deg)
rotateY(607deg)
rotateZ(577deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(64) {
--t:
translateX(300px)
translateY(-350px)
translateZ(-460px)
rotateX(27deg)
rotateY(168deg)
rotateZ(535deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(65) {
--t:
translateX(-430px)
translateY(-630px)
translateZ(440px)
rotateX(212deg)
rotateY(37deg)
rotateZ(187deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(66) {
--t:
translateX(-410px)
translateY(-510px)
translateZ(-60px)
rotateX(136deg)
rotateY(196deg)
rotateZ(261deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(67) {
--t:
translateX(250px)
translateY(-300px)
translateZ(50px)
rotateX(274deg)
rotateY(137deg)
rotateZ(158deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(68) {
--t:
translateX(-10px)
translateY(-250px)
translateZ(-290px)
rotateX(39deg)
rotateY(348deg)
rotateZ(471deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(69) {
--t:
translateX(-10px)
translateY(-350px)
translateZ(190px)
rotateX(281deg)
rotateY(483deg)
rotateZ(381deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(70) {
--t:
translateX(120px)
translateY(-280px)
translateZ(240px)
rotateX(201deg)
rotateY(432deg)
rotateZ(672deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(71) {
--t:
translateX(30px)
translateY(-450px)
translateZ(80px)
rotateX(222deg)
rotateY(687deg)
rotateZ(439deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(72) {
--t:
translateX(-180px)
translateY(-300px)
translateZ(420px)
rotateX(232deg)
rotateY(240deg)
rotateZ(197deg)
scale(0);
}
.fireworks:nth-child(1) > .year:nth-child(73) {
--t:
translateX(350px)
translateY(-470px)
translateZ(-110px)
rotateX(137deg)
rotateY(633deg)
rotateZ(169deg)
scale(0);
}
.fireworks:nth-child(2) {
-webkit-animation: fireworksTop 5s 1.6666666667s infinite ease-out, fireworks1 50s 1.6666666667s infinite step-end;
animation: fireworksTop 5s 1.6666666667s infinite ease-out, fireworks1 50s 1.6666666667s infinite step-end;
}
@-webkit-keyframes fireworks1 {
0% {
left: 43%;
transform: translateX(-50%) scale(0.69);
--hue: 0;
--height: 34% ;
}
10% {
left: 76%;
transform: translateX(-50%) scale(0.74);
--hue: 36;
--height: 26% ;
}
20% {
left: 42%;
transform: translateX(-50%) scale(0.88);
--hue: 72;
--height: 39% ;
}
30% {
left: 78%;
transform: translateX(-50%) scale(0.77);
--hue: 108;
--height: 40% ;
}
40% {
left: 61%;
transform: translateX(-50%) scale(0.97);
--hue: 144;
--height: 35% ;
}
50% {
left: 46%;
transform: translateX(-50%) scale(0.6);
--hue: 180;
--height: 22% ;
}
60% {
left: 75%;
transform: translateX(-50%) scale(0.81);
--hue: 216;
--height: 30% ;
}
70% {
left: 62%;
transform: translateX(-50%) scale(0.78);
--hue: 252;
--height: 19% ;
}
80% {
left: 62%;
transform: translateX(-50%) scale(0.57);
--hue: 288;
--height: 38% ;
}
90% {
left: 27%;
transform: translateX(-50%) scale(0.74);
--hue: 324;
--height: 22% ;
}
}
@keyframes fireworks1 {
0% {
left: 43%;
transform: translateX(-50%) scale(0.69);
--hue: 0;
--height: 34% ;
}
10% {
left: 76%;
transform: translateX(-50%) scale(0.74);
--hue: 36;
--height: 26% ;
}
20% {
left: 42%;
transform: translateX(-50%) scale(0.88);
--hue: 72;
--height: 39% ;
}
30% {
left: 78%;
transform: translateX(-50%) scale(0.77);
--hue: 108;
--height: 40% ;
}
40% {
left: 61%;
transform: translateX(-50%) scale(0.97);
--hue: 144;
--height: 35% ;
}
50% {
left: 46%;
transform: translateX(-50%) scale(0.6);
--hue: 180;
--height: 22% ;
}
60% {
left: 75%;
transform: translateX(-50%) scale(0.81);
--hue: 216;
--height: 30% ;
}
70% {
left: 62%;
transform: translateX(-50%) scale(0.78);
--hue: 252;
--height: 19% ;
}
80% {
left: 62%;
transform: translateX(-50%) scale(0.57);
--hue: 288;
--height: 38% ;
}
90% {
left: 27%;
transform: translateX(-50%) scale(0.74);
--hue: 324;
--height: 22% ;
}
}
.fireworks:nth-child(2) > .year {
background-color: hsl(calc(var(--hue) + 120), 100%, 75%);
}
.fireworks:nth-child(2) > .year:nth-child(1) {
--t:
translateX(260px)
translateY(-250px)
translateZ(-210px)
rotateX(374deg)
rotateY(544deg)
rotateZ(72deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(2) {
--t:
translateX(470px)
translateY(-550px)
translateZ(490px)
rotateX(578deg)
rotateY(290deg)
rotateZ(669deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(3) {
--t:
translateX(310px)
translateY(-520px)
translateZ(-70px)
rotateX(634deg)
rotateY(636deg)
rotateZ(228deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(4) {
--t:
translateX(70px)
translateY(-580px)
translateZ(330px)
rotateX(88deg)
rotateY(607deg)
rotateZ(705deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(5) {
--t:
translateX(-80px)
translateY(-370px)
translateZ(30px)
rotateX(207deg)
rotateY(328deg)
rotateZ(269deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(6) {
--t:
translateX(430px)
translateY(-630px)
translateZ(180px)
rotateX(44deg)
rotateY(45deg)
rotateZ(621deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(7) {
--t:
translateX(-450px)
translateY(-320px)
translateZ(-90px)
rotateX(495deg)
rotateY(481deg)
rotateZ(463deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(8) {
--t:
translateX(-230px)
translateY(-270px)
translateZ(-450px)
rotateX(709deg)
rotateY(243deg)
rotateZ(120deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(9) {
--t:
translateX(0px)
translateY(-280px)
translateZ(90px)
rotateX(348deg)
rotateY(72deg)
rotateZ(434deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(10) {
--t:
translateX(-90px)
translateY(-700px)
translateZ(-280px)
rotateX(48deg)
rotateY(532deg)
rotateZ(281deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(11) {
--t:
translateX(-330px)
translateY(-630px)
translateZ(210px)
rotateX(456deg)
rotateY(623deg)
rotateZ(694deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(12) {
--t:
translateX(420px)
translateY(-380px)
translateZ(-260px)
rotateX(155deg)
rotateY(353deg)
rotateZ(430deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(13) {
--t:
translateX(-30px)
translateY(-530px)
translateZ(400px)
rotateX(171deg)
rotateY(34deg)
rotateZ(465deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(14) {
--t:
translateX(-420px)
translateY(-280px)
translateZ(360px)
rotateX(76deg)
rotateY(37deg)
rotateZ(641deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(15) {
--t:
translateX(-310px)
translateY(-540px)
translateZ(-440px)
rotateX(357deg)
rotateY(448deg)
rotateZ(448deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(16) {
--t:
translateX(-480px)
translateY(-280px)
translateZ(290px)
rotateX(41deg)
rotateY(508deg)
rotateZ(89deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(17) {
--t:
translateX(-400px)
translateY(-480px)
translateZ(-470px)
rotateX(86deg)
rotateY(667deg)
rotateZ(693deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(18) {
--t:
translateX(430px)
translateY(-320px)
translateZ(220px)
rotateX(121deg)
rotateY(237deg)
rotateZ(607deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(19) {
--t:
translateX(-40px)
translateY(-610px)
translateZ(-350px)
rotateX(686deg)
rotateY(407deg)
rotateZ(6deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(20) {
--t:
translateX(170px)
translateY(-410px)
translateZ(-320px)
rotateX(266deg)
rotateY(54deg)
rotateZ(513deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(21) {
--t:
translateX(-260px)
translateY(-650px)
translateZ(-460px)
rotateX(653deg)
rotateY(358deg)
rotateZ(100deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(22) {
--t:
translateX(-300px)
translateY(-730px)
translateZ(350px)
rotateX(241deg)
rotateY(571deg)
rotateZ(301deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(23) {
--t:
translateX(440px)
translateY(-400px)
translateZ(-320px)
rotateX(317deg)
rotateY(404deg)
rotateZ(430deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(24) {
--t:
translateX(330px)
translateY(-270px)
translateZ(-230px)
rotateX(692deg)
rotateY(697deg)
rotateZ(469deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(25) {
--t:
translateX(-480px)
translateY(-670px)
translateZ(-250px)
rotateX(422deg)
rotateY(591deg)
rotateZ(298deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(26) {
--t:
translateX(-190px)
translateY(-730px)
translateZ(-480px)
rotateX(106deg)
rotateY(365deg)
rotateZ(702deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(27) {
--t:
translateX(-160px)
translateY(-560px)
translateZ(-60px)
rotateX(503deg)
rotateY(86deg)
rotateZ(608deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(28) {
--t:
translateX(-280px)
translateY(-300px)
translateZ(-270px)
rotateX(651deg)
rotateY(273deg)
rotateZ(506deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(29) {
--t:
translateX(240px)
translateY(-250px)
translateZ(-120px)
rotateX(375deg)
rotateY(319deg)
rotateZ(232deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(30) {
--t:
translateX(380px)
translateY(-290px)
translateZ(-90px)
rotateX(369deg)
rotateY(250deg)
rotateZ(248deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(31) {
--t:
translateX(-270px)
translateY(-620px)
translateZ(-270px)
rotateX(57deg)
rotateY(351deg)
rotateZ(173deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(32) {
--t:
translateX(80px)
translateY(-710px)
translateZ(150px)
rotateX(525deg)
rotateY(360deg)
rotateZ(636deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(33) {
--t:
translateX(470px)
translateY(-460px)
translateZ(-210px)
rotateX(102deg)
rotateY(717deg)
rotateZ(450deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(34) {
--t:
translateX(400px)
translateY(-360px)
translateZ(-350px)
rotateX(365deg)
rotateY(155deg)
rotateZ(433deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(35) {
--t:
translateX(430px)
translateY(-330px)
translateZ(-480px)
rotateX(427deg)
rotateY(412deg)
rotateZ(308deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(36) {
--t:
translateX(-470px)
translateY(-300px)
translateZ(-320px)
rotateX(640deg)
rotateY(527deg)
rotateZ(711deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(37) {
--t:
translateX(-380px)
translateY(-540px)
translateZ(320px)
rotateX(102deg)
rotateY(441deg)
rotateZ(255deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(38) {
--t:
translateX(-330px)
translateY(-630px)
translateZ(-20px)
rotateX(118deg)
rotateY(661deg)
rotateZ(694deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(39) {
--t:
translateX(-140px)
translateY(-310px)
translateZ(-220px)
rotateX(239deg)
rotateY(271deg)
rotateZ(664deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(40) {
--t:
translateX(410px)
translateY(-660px)
translateZ(350px)
rotateX(490deg)
rotateY(292deg)
rotateZ(160deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(41) {
--t:
translateX(-190px)
translateY(-440px)
translateZ(-290px)
rotateX(580deg)
rotateY(453deg)
rotateZ(26deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(42) {
--t:
translateX(-460px)
translateY(-380px)
translateZ(20px)
rotateX(494deg)
rotateY(665deg)
rotateZ(1deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(43) {
--t:
translateX(410px)
translateY(-350px)
translateZ(380px)
rotateX(325deg)
rotateY(446deg)
rotateZ(425deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(44) {
--t:
translateX(180px)
translateY(-340px)
translateZ(-210px)
rotateX(615deg)
rotateY(25deg)
rotateZ(706deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(45) {
--t:
translateX(-390px)
translateY(-710px)
translateZ(-120px)
rotateX(18deg)
rotateY(444deg)
rotateZ(585deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(46) {
--t:
translateX(-440px)
translateY(-530px)
translateZ(10px)
rotateX(452deg)
rotateY(641deg)
rotateZ(92deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(47) {
--t:
translateX(-190px)
translateY(-610px)
translateZ(-240px)
rotateX(488deg)
rotateY(646deg)
rotateZ(193deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(48) {
--t:
translateX(-470px)
translateY(-610px)
translateZ(410px)
rotateX(172deg)
rotateY(431deg)
rotateZ(202deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(49) {
--t:
translateX(90px)
translateY(-310px)
translateZ(-130px)
rotateX(521deg)
rotateY(632deg)
rotateZ(663deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(50) {
--t:
translateX(150px)
translateY(-290px)
translateZ(340px)
rotateX(153deg)
rotateY(197deg)
rotateZ(293deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(51) {
--t:
translateX(60px)
translateY(-310px)
translateZ(-30px)
rotateX(63deg)
rotateY(653deg)
rotateZ(147deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(52) {
--t:
translateX(-270px)
translateY(-660px)
translateZ(-450px)
rotateX(646deg)
rotateY(512deg)
rotateZ(629deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(53) {
--t:
translateX(-400px)
translateY(-500px)
translateZ(290px)
rotateX(92deg)
rotateY(37deg)
rotateZ(512deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(54) {
--t:
translateX(360px)
translateY(-310px)
translateZ(-40px)
rotateX(24deg)
rotateY(606deg)
rotateZ(263deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(55) {
--t:
translateX(170px)
translateY(-380px)
translateZ(500px)
rotateX(353deg)
rotateY(192deg)
rotateZ(462deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(56) {
--t:
translateX(40px)
translateY(-450px)
translateZ(-100px)
rotateX(346deg)
rotateY(130deg)
rotateZ(470deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(57) {
--t:
translateX(360px)
translateY(-560px)
translateZ(170px)
rotateX(424deg)
rotateY(214deg)
rotateZ(611deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(58) {
--t:
translateX(-300px)
translateY(-480px)
translateZ(130px)
rotateX(20deg)
rotateY(700deg)
rotateZ(65deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(59) {
--t:
translateX(-210px)
translateY(-250px)
translateZ(140px)
rotateX(550deg)
rotateY(591deg)
rotateZ(142deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(60) {
--t:
translateX(470px)
translateY(-610px)
translateZ(-280px)
rotateX(249deg)
rotateY(49deg)
rotateZ(174deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(61) {
--t:
translateX(30px)
translateY(-250px)
translateZ(-350px)
rotateX(466deg)
rotateY(304deg)
rotateZ(239deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(62) {
--t:
translateX(140px)
translateY(-470px)
translateZ(-380px)
rotateX(484deg)
rotateY(198deg)
rotateZ(500deg)
scale(0);
}
.fireworks:nth-child(2) > .year:nth-child(63) {
--t:
translateX(-390px)
translateY(-350px)
translateZ(-450px)
rotateX(77deg)
rotateY(290deg)
rotateZ(89deg)
scale(0);
}
.fireworks:nth-child(2) .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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