css实现城市放烟花动画效果代码-html代码-BFW代码库

代码语言：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)
 .........完整代码请登录后点击上方下载按钮下载查看