100个div+css布局实现路灯飞虫飞动动画效果-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：100个div+css布局实现路灯飞虫飞动动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
<style>
*,
*::after,
*::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  background: black;
  overflow: hidden;
}

div {
  position: absolute;
}
div:nth-child(1) {
  position: relative;
  bottom: -80px;
  width: 500px;
  height: 100vh;
  z-index: -10;
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
}
div:nth-child(2) {
  width: calc(50px * (2));
  height: 10px;
  background: #9f9f9f;
  background: -webkit-gradient(linear, left top, right top, from(#9f9f9f), color-stop(30%, #535353), color-stop(70%, #535353), to(#9f9f9f));
  background: linear-gradient(90deg, #9f9f9f 0%, #535353 30%, #535353 70%, #9f9f9f 100%);
  bottom: calc(-10px * (2) + 50px);
  left: calc(-25px * (2) + 250px);
  border-radius: 10px 10px 0 0;
  border: solid 0.5px grey;
}
div:nth-child(3) {
  width: calc(50px * (3));
  height: 10px;
  background: #9f9f9f;
  background: -webkit-gradient(linear, left top, right top, from(#9f9f9f), color-stop(30%, #535353), color-stop(70%, #535353), to(#9f9f9f));
  background: linear-gradient(90deg, #9f9f9f 0%, #535353 30%, #535353 70%, #9f9f9f 100%);
  bottom: calc(-10px * (3) + 50px);
  left: calc(-25px * (3) + 250px);
  border-radius: 10px 10px 0 0;
  border: solid 0.5px grey;
}
div:nth-child(4) {
  width: calc(50px * (4));
  height: 10px;
  background: #9f9f9f;
  background: -webkit-gradient(linear, left top, right top, from(#9f9f9f), color-stop(30%, #535353), color-stop(70%, #535353), to(#9f9f9f));
  background: linear-gradient(90deg, #9f9f9f 0%, #535353 30%, #535353 70%, #9f9f9f 100%);
  bottom: calc(-10px * (4) + 50px);
  left: calc(-25px * (4) + 250px);
  border-radius: 10px 10px 0 0;
  border: solid 0.5px grey;
}
div:nth-child(5) {
  bottom: 38px;
  left: 180px;
  height: 100px;
  width: 70px;
  background: #b3b3b3;
  background: linear-gradient(100deg, rgba(179, 179, 179, 0) 0%, rgba(171, 171, 171, 0) 50%, #a8a8a8 50%, #5e5e5e 100%);
  z-index: -1;
}
div:nth-child(6) {
  bottom: 38px;
  left: 250px;
  height: 100px;
  width: 70px;
  background: #b3b3b3;
  background: linear-gradient(100deg, rgba(179, 179, 179, 0) 0%, rgba(171, 171, 171, 0) 50%, #a8a8a8 50%, #5e5e5e 100%);
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  z-index: -1;
}
div:nth-child(7) {
  width: 70px;
  height: 10px;
  bottom: 135px;
  left: 215px;
  background: #a1a1a1;
  background: -webkit-gradient(linear, left top, right top, from(#a1a1a1), color-stop(35%, #545454), color-stop(55%, #a1a1a1), to(#a1a1a1));
  background: linear-gradient(90deg, #a1a1a1 0%, #545454 35%, #a1a1a1 55%, #a1a1a1 100%);
  border-radius: 40px;
  box-shadow: 0 2px 7px 2px black;
}
div:nth-child(8) {
  width: 75px;
  left: 210px;
  height: 100px;
  bottom: 135px;
  border-radius: 50% 50% 50% 50% / 100% 100% 60% 60%;
  background: #a1a1a1;
  background: -webkit-gradient(linear, left top, right top, from(#a1a1a1), color-stop(0%, #a1a1a1), color-stop(40%, #545454), color-stop(80%, #a1a1a1), color-stop(67%, #a1a1a1), to(#f2f2f2));
  background: linear-gradient(90deg, #a1a1a1 0%, #a1a1a1 0%, #545454 40%, #a1a1a1 80%, #a1a1a1 67%, #f2f2f2 100%);
  z-index: -1;
}
div:nth-child(9) {
  width: 100px;
  height: 100px;
}
div:nth-child(10) {
  width: 25px;
  height: 250px;
  bottom: 225px;
  left: 235px;
  background: #a1a1a1;
  background: -webkit-gradient(linear, left top, right top, from(#a1a1a1), color-stop(0%, #a1a1a1), color-stop(40%, #545454), color-stop(80%, #a1a1a1), to(#a1a1a1));
  background: linear-gradient(90deg, #a1a1a1 0%, #a1a1a1 0%, #545454 40%, #a1a1a1 80%, #a1a1a1 100%);
  z-index: -2;
}
div:nth-child(11) {
  width: 60px;
  height: 10px;
  bottom: 225px;
  left: 217.5px;
  background: #a1a1a1;
  background: -webkit-gradient(linear, left top, right top, from(#a1a1a1), color-stop(20%, #a1a1a1), color-stop(40%, #545454), color-stop(70%, #a1a1a1), to(#a1a1a1));
  background: linear-gradient(90deg, #a1a1a1 0%, #a1a1a1 20%, #545454 40%, #a1a1a1 70%, #a1a1a1 100%);
  border: solid 1px black;
  border-radius: 25px 25px 0 0;
}
div:nth-child(12) {
  width: 32px;
  height: 10px;
  bottom: 475px;
  left: 231.5px;
  border-radius: 25px;
  background: #a1a1a1;
  background: -webkit-gradient(linear, left top, right top, from(#a1a1a1), color-stop(40%, #545454), color-stop(70%, #a1a1a1), to(#a1a1a1));
  background: linear-gradient(90deg, #a1a1a1 0%, #545454 40%, #a1a1a1 70%, #a1a1a1 100%);
  box-shadow: 0 2px 5px black;
  z-index: 5;
}
div:nth-child(13) {
  width: 30px;
  height: 50px;
  bottom: 475px;
  left: 232.5px;
  background: #a1a1a1;
  background: -webkit-gradient(linear, left top, right top, from(#a1a1a1), color-stop(40%, #545454), color-stop(70%, #a1a1a1), to(#a1a1a1));
  background: linear-gradient(90deg, #a1a1a1 0%, #545454 40%, #a1a1a1 70%, #a1a1a1 100%);
  border-radius: 50% 50% 50% 50% / 100% 100% 60% 60%;
}
div:nth-child(14) {
  width: 25px;
  height: 5px;
  bottom: 520px;
  left: 235px;
  background: grey;
  border-radius: 5px;
  border: solid 0.5px black;
}
div:nth-child(15) {
  width: 30px;
  height: 5px;
  bottom: 524.5px;
  left: 232.5px;
  background: grey;
  border-radius: 5px;
  border: solid 0.5px black;
}
div:nth-child(16) {
  width: 65px;
  height: 65px;
  bottom: 530px;
  left: 247px;
  background: #dbdbdb;
  background: radial-gradient(circle at 180% 90%, rgba(219, 219, 219, 0) 0%, rgba(227, 183, 192, 0) 80%, #959595 81%, #959595 100%);
}
div:nth-child(17) {
  width: 65px;
  height: 65px;
  bottom: 530px;
  left: 183px;
  background: #dbdbdb;
  background: radial-gradient(circle at -80% 90%, rgba(219, 219, 219, 0) 0%, rgba(227, 183, 192, 0) 80%, #959595 81%, #959595 100%);
}
div:nth-child(18) {
  width: 70px;
  height: 10px;
  bottom: 590px;
  left: 212.5px;
  background: #a1a1a1;
  background: -webkit-gradient(linear, left top, right top, from(#a1a1a1), color-stop(30%, #545454), color-stop(50%, #a1a1a1), to(#a1a1a1));
  background: linear-gradient(90deg, #a1a1a1 0%, #545454 30%, #a1a1a1 50%, #a1a1a1 100%);
  border-radius: 50% 50% 10% 10% / 20% 20% 100% 100%;
  box-shadow: 0 5px 5px black;
  z-index: 1;
}
div:nth-child(19) {
  width: 3px;
  height: 120px;
  bottom: 590px;
  left: 201px;
  background: grey;
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
}
div:nth-child(20) {
  width: 3px;
  height: 120px;
  bottom: 590px;
  left: 292px;
  background: grey;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
}
div:nth-child(21) {
  width: 3px;
  height: 120px;
  bottom: 590px;
  left: 268.5px;
  background: grey;
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
}
div:nth-child(22) {
  width: 3px;
  height: 120px;
  bottom: 590px;
  left: 223.5px;
  background: grey;
  -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
}
div:nth-child(23) {
  width: 150px;
  height: 20px;
  bottom: 708px;
  left: 173px;
  background: #404040;
  background: -webkit-gradient(linear, left top, right top, from(#646464), color-stop(20%, #646464), color-stop(40%, #191919), color-stop(67%, #646464), to(#646464));
  background: linear-gradient(90deg, #646464 0%, #646464 20%, #191919 40%, #646464 67%, #646464 100%);
  border-radius: 25px;
  box-shadow: 0 -3px 4px rgba(255, 255, 0, 0.3) inset;
}
div:nth-child(24) {
  width: 140px;
  height: 60px;
  bottom: 715px;
  left: 178px;
  background: #a1a1a1;
  background: linear-gradient(120deg, #a1a1a1 0%, #545454 40%, #a1a1a1 60%, #c8c8c8 67%, #b4b4b4 100%);
  border-radius: 50% 50% 50% 50% / 100% 100% 5% 5%;
  z-index: -2;
}
div:nth-child(25) {
  width: 50px;
  height: 30px;
  bottom: 770px;
  left: 222px;
  background: -webkit-gradient(linear, left top, right top, from(#a1a1a1), color-stop(0%, #a1a1a1), color-stop(40%, #545454), color-stop(80%, #a1a1a1), to(#a1a1a1));
  background: linear-gradient(90deg, #a1a1a1 0%, #a1a1a1 0%, #545454 40%, #a1a1a1 80%, #a1a1a1 100%);
  border-radius: 30% 30% 20% 20% / 80% 80% 5% 5%;
}
div:nth-child(26) {
  width: 90px;
  height: 110px;
  bottom: 598px;
  left: 250px;
  background: #f1ff00;
  background: linear-gradient(105deg, #f1ff00 0%, #f5ff00 50%, rgba(168, 168, 168, 0) 50%, rgba(94, 94, 94, 0) 100%);
  z-index: -5;
  -webkit-filter: blur(2px) drop-shadow(0 0 15px yellow);
          filter: blur(2px) drop-shadow(0 0 15px yellow);
  -webkit-animation: glowing-lights 5s linear infinite alternate;
          animation: glowing-lights 5s linear infinite alternate;
}
div:nth-child(27) {
  width: 95px;
  height: 110px;
  bottom: 598px;
  left: 155px;
  background: #f1ff00;
  background: linear-gradient(255deg, #f1ff00 0%, #f5ff00 50%, rgba(168, 168, 168, 0) 50%, rgba(94, 94, 94, 0) 100%);
  z-index: -5;
  -webkit-filter: blur(2px) drop-shadow(0 0 15px yellow);
          filter: blur(2px) drop-shadow(0 0 15px yellow);
  -webkit-animation: glowing-lights 5s linear infinite alternate;
          animation: glowing-lights 5s linear infinite alternate;
}
@-webkit-keyframes glowing-lights {
  0% {
    -webkit-filter: blur(2px) drop-shadow(0 0 15px yellow);
            filter: blur(2px) drop-shadow(0 0 15px yellow);
  }
  100% {
    -webkit-filter: blur(5px) drop-shadow(0 0 30px yellow);
            filter: blur(5px) drop-shadow(0 0 30px yellow);
  }
}
@keyframes glowing-lights {
  0% {
    -webkit-filter: blur(2px) drop-shadow(0 0 15px yellow);
            filter: blur(2px) drop-shadow(0 0 15px yellow);
  }
  100% {
    -webkit-filter: blur(5px) drop-shadow(0 0 30px yellow);
            filter: blur(5px) drop-shadow(0 0 30px yellow);
  }
}
div:nth-child(28) {
  width: 300px;
  height: 300px;
  bottom: 400px;
  left: 200px;
  background: #dbdbdb;
  background: radial-gradient(circle at 90% 50%, rgba(219, 219, 219, 0) 0%, rgba(189, 189, 189, 0) 44%, #818181 44%, #969696 47%, rgba(113, 113, 113, 0) 47%, rgba(149, 149, 149, 0) 100%);
  -webkit-transform: rotate(70deg);
          transform: rotate(70deg);
  border-radius: 0% 100% 50% 50% / 100% 100% 100% 5%;
  z-index: -4;
}
div:nth-child(29) {
  width: 60px;
  height: 60px;
  bottom: 440px;
  left: 240px;
  background: #dbdbdb;
  background: radial-gradient(circle at 50% 20%, rgba(219, 219, 219, 0) 0%, rgba(189, 189, 189, 0) 38%, #818181 38%, #969696 43%, rgba(113, 113, 113, 0) 43%, rgba(149, 149, 149, 0) 100%);
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}
div:nth-child(30) {
  width: 60px;
  height: 60px;
  bottom: 527px;
  left: 394px;
  background: #dbdbdb;
  background: radial-gradient(circle at 50% 20%, rgba(219, 219, 219, 0) 0%, rgba(189, 189, 189, 0) 38%, #818181 38%, #969696 43%, rgba(113, 113, 113, 0) 43%, rgba(149, 149, 149, 0) 100%);
  -webkit-transform: rotate(240deg);
          transform: rotate(240deg);
}
div:nth-child(31) {
  width: 3px;
  height: 127px;
  bottom: 450px;
  left: 345.5px;
  background: grey;
  -webkit-transform: rotate(42deg);
          transform: rotate(42deg);
}
div:nth-child(32) {
  width: 300px;
  height: 300px;
  bottom: 385px;
  left: 23px;
  background: #dbdbdb;
  background: radial-gradient(circle at 90% 50%, rgba(219, 219, 219, 0) 0%, rgba(189, 189, 189, 0) 44%, #818181 44%, #969696 47%, rgba(113, 113, 113, 0) 47%, rgba(149, 149, 149, 0) 100%);
  -webkit-transform: rotate(125deg);
          transform: rotate(125deg);
  border-radius: 0% 100% 50% 50% / 100% 100% 100% 5%;
  z-index: -4;
}
div:nth-child(33) {
  width: 60px;
  height: 60px;
  bottom: 440px;
  left: 195px;
  background: #dbdbdb;
  background: radial-gradient(circle at 50% 20%, rgba(219, 219, 219, 0) 0%, rgba(189, 189, 189, 0) 38%, #818181 38%, #969696 43%, rgba(113, 113, 113, 0) 43%, rgba(149, 149, 149, 0) 100%);
  -webkit-transform: rotate(-60deg);
          transform: rotate(-60deg);
}
div:nth-child(34) {
  width: 60px;
  height: 60px;
  bottom: 527px;
  left: 40px;
  background: #dbdbdb;
  background: radial-gradient(circle at 50% 20%, rgba(219, 219, 219, 0) 0%, rgba(189, 189, 189, 0) 38%, #818181 38%, #969696 43%, rgba(113, 113, 113, 0) 43%, rgba(149, 149, 149, 0) 100%);
  -webkit-transform: rotate(-240deg);
          transform: rotate(-240deg);
}
div:nth-child(35) {
  width: 3px;
  height: 127px;
  bottom: 450px;
  left: 145.5px;
  background: grey;
  -webkit-transform: rotate(-42deg);
          transform: rotate(-42deg);
}
div:nth-child(36) {
  width: 65px;
  height: 65px;
  bottom: 552px;
  left: 21px;
  background: #dbdbdb;
  background: radial-gradient(circle at 180% 90%, rgba(219, 219, 219, 0) 0%, rgba(227, 183, 192, 0) 80%, #959595 81%, #959595 100%);
  z-index: -5;
}
div:nth-child(37) {
  width: 65px;
  height: 65px;
  bottom: 552px;
  left: -37px;
  background: #dbdbdb;
  background: radial-gradient(circle at -80% 90%, rgba(219, 219, 219, 0) 0%, rgba(227, 183, 192, 0) 80%, #959595 81%, #959595 100%);
  z-index: -5;
}
div:nth-child(38) {
  width: 3px;
  height: 120px;
  bottom: 615px;
  left: -24px;
  background: grey;
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
}
div:nth-child(39) {
  width: 3px;
  height: 120px;
  bottom: 615px;
  left: 70px;
  background: grey;
  -webkit-transform: rot.........完整代码请登录后点击上方下载按钮下载查看