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