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