100个div+css布局实现路灯飞虫飞动动画效果
代码语言：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: rotate(15deg);
transform: rotate(15deg);
}
div:nth-child(40) {
width: 3px;
height: 120px;
bottom: 615px;
left: 45px;
background: grey;
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
div:nth-child(41) {
width: 3px;
height: 120px;
bottom: 615px;
left: 0px;
background: grey;
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
div:nth-child(42) {
width: 150px;
height: 20px;
bottom: 730px;
left: -50px;
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;
}
div:nth-child(43) {
width: 140px;
height: 60px;
bottom: 738px;
left: -45px;
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(44) {
width: 50px;
height: 30px;
bottom: 792px;
left: 0px;
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(45) {
width: 90px;
height: 110px;
bottom: 620px;
left: 25px;
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(46) {
width: 95px;
height: 110px;
bottom: 620px;
left: -70px;
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;
}
div:nth-child(47) {
width: 70px;
height: 10px;
bottom: 610px;
left: -11px;
background: grey;
border-radius: 50% 50% 10% 10% / 20% 20% 100% 100%;
box-shadow: 0 5px 5px black;
}
@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(48) {
width: 65px;
height: 65px;
bottom: 552px;
left: 468px;
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(49) {
width: 65px;
height: 65px;
bottom: 552px;
left: 411px;
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(50) {
width: 3px;
height: 120px;
bottom: 615px;
left: 423px;
background: grey;
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
div:nth-child(51) {
width: 3px;
height: 120px;
bottom: 615px;
left: 517px;
background: grey;
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
div:nth-child(52) {
width: 3px;
height: 120px;
bottom: 615px;
left: 493px;
background: grey;
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
div:nth-child(53) {
width: 3px;
height: 120px;
bottom: 615px;
left: 447px;
background: grey;
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
div:nth-child(54) {
width: 150px;
height: 20px;
bottom: 730px;
left: 397px;
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;
}
div:nth-child(55) {
width: 140px;
height: 60px;
bottom: 738px;
left: 402.5px;
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(56) {
width: 50px;
height: 30px;
bottom: 792px;
left: 447.5px;
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(57) {
width: 90px;
height: 110px;
bottom: 620px;
left: 472px;
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(58) {
width: 95px;
height: 110px;
bottom: 620px;
left: 377px;
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;
}
div:nth-child(59) {
width: 70px;
height: 10px;
bottom: 610px;
left: 436.5px;
background: grey;
border-radius: 50% 50% 10% 10% / 20% 20% 100% 100%;
box-shadow: 0 5px 5px black;
}
@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(60) {
width: 350px;
height: 700px;
bottom: 0px;
left: 25px;
background: rgba(255, 255, 0, 0.5);
background: linear-gradient(75deg, rgba(255, 255, 0, 0.15) 0%, rgba(255, 255, 0, 0.15) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
-webkit-filter: blur(20px);
filter: blur(20px);
z-index: -6;
}
div:nth-child(61) {
width: 300px;
height: 700px;
bottom: 0px;
left: -270px;
background: rgba(255, 255, 0, 0.5);
background: linear-gradient(100deg, rgba(255, 255, 0, 0) 0%, rgba(255, 255, 0, 0) 50%, rgba(255, 255, 0, 0.15) 50%, rgba(255, 255, 0, 0.15) 100%);
-webkit-filter: blur(20px);
filter: blur(20px);
z-index: -6;
}
div:nth-child(62) {
width: 300px;
height: 700px;
bottom: 0px;
left: 275px;
background: rgba(255, 255, 0, 0.5);
background: linear-gradient(75deg, rgba(255, 255, 0, 0.15) 0%, rgba(255, 255, 0, 0.15) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
-webkit-filter: blur(20px);
filter: blur(20px);
z-index: 1;
}
div:nth-child(63) {
width: 300px;
height: 700px;
bottom: 0px;
left: -50px;
backgound: rgba(255, 255, 0, 0.5);
background: linear-gradient(100deg, rgba(255, 255, 0, 0) 0%, rgba(255, 255, 0, 0) 50%, rgba(255, 255, 0, 0.15) 50%, rgba(255, 255, 0, 0.15) 100%);
-webkit-filter: blur(20px);
filter: blur(20px);
z-index: 1;
}
div:nth-child(64) {
width: 300px;
height: 700px;
bottom: 0px;
left: 475px;
background: rgba(255, 255, 0, 0.5);
background: linear-gradient(75deg, rgba(255, 255, 0, 0.15) 0%, rgba(255, 255, 0, 0.15) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
-webkit-filter: blur(20px);
filter: blur(20px);
z-index: -6;
}
div:nth-child(65) {
width: 300px;
height: 700px;
bottom: 0px;
left: 175px;
background: rgba(255, 255, 0, 0.5);
background: linear-gradient(100deg, rgba(255, 255, 0, 0) 0%, rgba(255, 255, 0, 0) 50%, rgba(255, 255, 0, 0.15) 50%, rgba(255, 255, 0, 0.15) 100%);
-webkit-filter: blur(20px);
filter: blur(20px);
z-index: -6;
}
div:nth-child(66) {
width: 400px;
height: 50px;
bottom: 10px;
left: -160px;
border-radius: 50%;
background: rgba(255, 255, 0, 0.15);
-webkit-filter: blur(5px);
filter: blur(5px);
z-index: -9;
}
div:nth-child(67) {
width: 450px;
height: 50px;
bottom: -50px;
left: 25px;
border-radius: 50%;
background: rgba(255, 255, 0, 0.3);
-webkit-filter: blur(5px);
filter: blur(5px);
}
div:nth-child(68) {
width: 400px;
height: 50px;
bottom: 10px;
left: 300px;
border-radius: 50%;
background: rgba(255, 255, 0, 0.15);
-webkit-filter: blur(5px);
filter: blur(5px);
z-index: -9;
}
div:nth-child(69) {
width: 50px;
height: 50px;
bottom: 625px;
border-radius: 50%;
background: white;
z-index: -5;
-webkit-animation: glow 5s linear infinite;
animation: glow 5s linear infinite;
}
div:nth-child(70) {
width: 50px;
height: 50px;
bottom: 605px;
left: 225px;
border-radius: 50%;
background: white;
z-index: -5;
-webkit-animation: glow 5s linear infinite;
animation: glow 5s linear infinite;
}
div:nth-child(71) {
width: 50px;
height: 50px;
bottom: 625px;
left: 447px;
border-radius: 50%;
background: white;
z-index: -5;
-webkit-animation: glow 5s linear infinite;
animation: glow 5s linear infinite;
}
@-webkit-keyframes glow {
0% {
-webkit-filter: blur(5px);
filter: blur(5px);
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-filter: blur(10px);
filter: blur(10px);
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes glow {
0% {
-webkit-filter: blur(5px);
filter: blur(5px);
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-filter: blur(10px);
filter: blur(10px);
-webkit-transform: scale(1);
transform: scale(1);
}
}
div:nth-child(72) {
width: 800px;
height: 200px;
bottom: 700px;
left: -150px;
-webkit-filter: blur(30px);
filter: blur(30px);
border-radius: 50%;
background: rgba(0, 0, 0, 0.3);
-webkit-animation: light 10s linear infinite alternate;
animation: light 10s linear infinite alternate;
}
@-webkit-keyframes light {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(800px);
transform: translateY(800px);
opacity: 0;
}
}
@keyframes light {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(800px);
transform: translateY(800px);
opacity: 0;
}
}
div:nth-child(73) {
width: 5px;
height: 5px;
bottom: calc(400px + 15%);
left: calc(50% + 45%);
border-radius: 50%;
background: black;
opacity: 0;
-webkit-animation: bugs73 5s linear 6.3s infinite alternate;
animation: bugs73 5s linear 6.3s infinite alternate;
}
@-webkit-keyframes bugs73 {
0% {
-webkit-transform: rotate(0deg) translate3d(0, 0, 0);
transform: rotate(0deg) translate3d(0, 0, 0);
opacity: 1;
}
25% {
-webkit-transform: rotate(90deg) translate3d(298px, 41px, 0);
transform: rotate(90deg) translate3d(298px, 41px, 0);
opacity: 1;
}
50% {
-webkit-transform: rotate(180deg) translate3d(-99px, -188px, 0);
transform: rotate(180deg) translate3d(-99px, -188px, 0);
opacity: 1;
}
75% {
-webkit-transform: rotate(270deg) translate3d(263px, 73px, 0);
transform: rotate(270deg) translate3d(263px, 73px, 0);
opacity: 1;
}
100% {
-webkit-transform: rotate(360deg) translate3d(-183px, -127px, 0);
transform: rotate(360deg) translate3d(-183px, -127px, 0);
opacity: 1;
}
}
@keyframes bugs73 {
0% {
-webkit-transform: rotate(0deg) translate3d(0, 0, 0);
transform: rotate(0deg) translate3d(0, 0, 0);
opacity: 1;
}
25% {
-webkit-transform: rotate(90deg) translate3d(298px, 41px, 0);
transform: rotate(90deg) translate3d(298px, 41px, 0);
opacity: 1;
}
50% {
-webkit-transform: rotate(180deg) translate3d(-99px, -188px, 0);
transform: rotate(180deg) translate3d(-99px, -188px, 0);
opacity: 1;
}
75% {
-webkit-transform: rotate(270deg) translate3d(263px, 73px, 0);
transform: rotate(270deg) translate3d(263px, 73px, 0);
opacity: 1;
}
100% {
-webkit-transform: rotate(360deg) translate3d(-183px, -127px, 0);
transform: rotate(360deg) translate3d(-183px, -127px, 0);
opacity: 1;
}
}
div:nth-child(74) {
width: 5px;
height: 5px;
bottom: calc(400px + 18%);
left: calc(50% + -44%);
border-radius: 50%;
background: black;
opacity: 0;
-webkit-animation: bugs74 5s linear 6.4s infinite alternate;
animation: bugs74 5s linear 6.4s infinite alternate;
}
@-webkit-keyframes bugs74 {
0% {
-webkit-transform: rotate(0deg) translate3d(0, 0, 0);
transform: rotate(0deg) translate3d(0, 0, 0);
opacity: 1;
}
25% {
-webkit-transform: rotate(90deg) translate3d(368px, 86px, 0);
transform: rotate(90deg) translate3d(368px, 86px, 0);
opacity: 1;
}
50% {
-webkit-transform: rotate(180deg) translate3d(-144px, -144px, 0);
transform: rotate(180deg) translate3d(-144px, -144px, 0);
opacity: 1;
}
75% {
-webkit-transform: rotate(270deg) translate3d(318px, 54px, 0);
transform: rotate(270deg) translate3d(318px, 54px, 0);
opacity: 1;
}
100% {
-webkit-transform: rotate(360deg) translate3d(-70px, -142px, 0);
transform: rotate(360deg) translate3d(-70px, -142px, 0);
opacity: 1;
}
}
@keyframes bugs74 {
0% {
-webkit-transform: rotate(0deg) translate3d(0, 0, 0);
transform: rotate(0deg) translate3d(0, 0, 0);
opacity: 1;
}
25% {
-webkit-transform: rotate(90deg) translate3d(368px, 86px, 0);
transform: rotate(90deg) translate3d(368px, 86px, 0);
opacity: 1;
}
50% {
-webkit-transform: rotate(180deg) translate3d(-144px, -144px, 0);
transform: rotate(180deg) translate3d(-144px, -144px, 0);
opacity: 1;
}
75% {
-webkit-transform: rotate(270deg) translate3d(318px, 54px, 0);
transform: rotate(270deg) translate3d(318px, 54px, 0);
opacity: 1;
}
100% {
-webkit-transform: rotate(360deg) translate3d(-70px, -142px, 0);
transform: rotate(360deg) translate3d(-70px, -142px, 0);
opacity: 1;
}
}
div:nth-child(75) {
width: 5px;
height: 5px;
bottom: calc(400px + -28%);
left: calc(50% + 38%);
border-radius: 50%;
background: black;
opacity: 0;
-webkit-animation: bugs75 5s linear 6.5s infinite alternate;
animation: bugs75 5s linear 6.5s infinite alternate;
}
@-webkit-keyframes bugs75 {
0% {
-webkit-transform: rotate(0deg) translate3d(0, 0, 0);
transform: rotate(0deg) translate3d(0, 0, 0);
opacity: 1;
}
25% {
-webkit-transform: rotate(90deg) translate3d(311px, 96px, 0);
transform: rotate(90deg) translate3d(311px, 96px, 0);
opacity: 1;
}
50% {
-webkit-transform: rotate(180deg) translate3d(-141px, -166px, 0);
transform: rotate(180deg) translate3d(-141px, -166px, 0);
opacity: 1;
}
75% {
-webkit-transform: rotate(270deg) translate3d(301px, 9px, 0);
transform: rotate(270deg) translate3d(301px, 9px, 0);
opacity: 1;
}
100% {
-webkit-transform: rotate(360deg) translate3d(-191px, -110px, 0);
transform: rotate(360deg) translate3d(-191px, -110px, 0);
opacity: 1;
}
}
@keyframes bugs75 {
0% {
-webkit-transform: rotate(0deg) translate3d(0, 0, 0);
transform: rotate(0deg) translate3d(0, 0, 0);
opacity: 1;
}
25% {
-webkit-transform: rotate(90deg) translate3d(311px, 96px, 0);
transform: rotate(90deg) translate3d(311px, 96px, 0);
opacity: 1;
}
50% {
-webkit-transform: rotate(180deg) translate3d(-141px, -166px, 0);
transform: rotate(180deg) translate3d(-141px, -166px, 0);
opacity: 1;
}
75% {
-webkit-transform: rotate(270deg) translate3d(301px, 9px, 0);
transform: rotate(270deg) translate3d(301px, 9px, 0);
opacity: 1;
}
100% {
-webkit-transform: rotate(360deg) translate3d(-191px, -110px, 0);
transform: rotate(360deg) translate3d(-191px, -110px, 0);
opacity: 1;
}
}
div:nth-child(76) {
width: 5px;
height: 5px;
bottom: calc(400px + 26%);
left: calc(50% + 22%);
border-radius: 50%;
background: black;
opacity: 0;
-webkit-animation: bugs76 5s linear 6.6s infinite alternate;
animation: bugs76 5s linear 6.6s infinite alternate;
}
@-webkit-keyframes bugs76 {
0% {
-webkit-transform: rotate(0deg) translate3d(0, 0, 0);
transform: rotate(0deg) translate3d(0, 0, 0);
opacity: 1;
}
25% {
-webkit-transform: rotate(90deg) translate3d(388px, 84px, 0);
transform: rotate(90deg) translate3d(388px, 84px, 0);
opacity: 1;
}
50% {
-webkit-transform: rotate(180deg) translate3d(-146px, -140px, 0);
transform: rotate(180deg) translate3d(-146px, -140px, 0);
opacity: 1;
}
75% {
-webkit-transform: rotate(270deg) translate3d(392px, 94px, 0);
transform: rotate(270deg) translate3d(392px, 94px, 0);
opacity: 1;
}
100% {
-webkit-transform: rotate(360deg) translate3d(-104px, -192px, 0);
transform: rotate(360deg) translate3d(-104px, -192px, 0);
opacity: 1;
}
}
@keyframes bugs76 {
0% {
-webkit-transform: rotate(0deg) translate3d(0, 0, 0);
transform: rotate(0deg) translate3d(0, 0, 0);
opacity: 1;
}
25% {
-webkit-transform: rotate(90deg) translate3d(388px, 84px, 0);
transform: rotate(90deg) translate3d(388px, 84px, 0);
opacity: 1;
}
50% {
-webkit-transform: rotate(180deg) translate3d(-146px, -140px, 0);
transform: rotate(180deg) translate3d(-146px, -140px, 0);
opacity: 1;
}
75% {
-webkit-transform: rotate(270deg) translate3d(392px, 94px, 0);
transform: rotate(270deg) translate3d(392px, 94px, 0);
opacity: 1;
}
100% {
-webkit-transform: rotate(360deg) translate3d(-104px, -192px, 0);
transform: rotate(360deg) translate3d(-104px, -192px, 0);
opacity: 1;
}
}
div:nth-child(77) {
width: 5px;
height: 5px;
bottom: calc(400px + 17%);
left: calc(50% + -49%);
border-radius: 50%;
background: black;
opacity: 0;
-webkit-animation: bugs77 5s linear 6.7s infinite alternate;
animation: bugs77 5s linear 6.7s infinite alternate;
}
@-webkit-keyframes bugs77 {
0% {
-webkit-transform: rotate(0deg) translate3d(0, 0, 0);
transform: rotate(0deg) translate3d(0, 0, 0);
opacity: 1;
}
25% {
-webkit-transform: rotate(90deg) translate3d(277px, 46px, 0);
transform: rotate(90deg) translate3d(277px, 46px, 0);
opacity: 1;
}
50% {
-webkit-transform: rotate(180deg) translate3d(-154px, -130px, 0);
transform: rotate(180deg) translate3d(-154px, -130px, 0);
opacity: 1;
}
75% {
-webkit-transform: rotate(270deg) translate3d(240px, 30px, 0);
transform: rotate(270deg) translate3d(240px, 30px, 0);
opacity: 1;
}
100% {
-webkit-transform: rotate(360deg) translate3d(-179px, -162px, 0);
transform: rotate(360deg) translate3d(-179px, -162px, 0);
opacity: 1;
}
}
@keyframes bugs77 {
0% {
-webkit-transform: rotate(0deg) translate3d(0, 0, 0);
transform: rotate(0deg) translate3d(0, 0, 0);
opacity: 1;
}
25% {
-webkit-transform: rotate(90deg) translate3d(277px, 46px, 0);
transform: rotate(90deg) translate3d(277px, 46px, 0);
opacity: 1;
}
50% {
-webkit-transform: rotate(180deg) translate3d(-154px, -130px, 0);
transform: rotate(180deg) translate3d(-154px, -130px, 0);
opacity: 1;
}
75% {
-webkit-transform: rotate(270deg) translate3d(240px, 30px, 0);
transform: rotate(270deg) translate3d(240px, 30px, 0);
opacity: 1;
}
100% {
-webkit-transform: rotate(360deg) translate3d(-179px, -162px, 0);
transform: rotate(360deg) translate3d(-179px, -162px, 0);
opacity: 1;
}
}
div:nth-child(78) {
width: 5px;
height: 5px;
bottom: calc(400px + -15%);
left: calc(50% + -9%);
border-radius: 50%;
background: black;
opacity: 0;
-webkit-animation: bugs78 5s linear 6.8s infinite alternate;
animation: bugs78 5s linear 6.8s infinite alternate;
}
@-webkit-keyframes bugs78 {
0% {
-webkit-transform: rotate(0deg) translate3d(0, 0, 0);
transform: rotate(0deg) translate3d(0, 0, 0);
opacity: 1;
}
25% {
-webkit-transform: rotate(90deg) translate3d(257px, 80px, 0);
transform: rotate(90deg) translate3d(257px, 80px, 0);
opacity: 1;
}
50% {
-webkit-transform: rotate(180deg) translate3d(-31px, -133px, 0);
transform: rotate(180deg) translate3d(-31px, -133px, 0);
opacity: 1;
}
75% {
-webkit-transform: rotate(270deg) translate3d(217px, 56px, 0);
transform: rotate(270deg) translate3d(217px, 56px, 0);
opacity: 1;
}
100% {
-webkit-transform: rotate(360deg) translate3d(-90px, -188px, 0);
transform: rotate(360deg) translate3d(-90px, -188px, 0);
opacity: 1;
}
}
@keyframes bugs78 {
0% {
-webkit-transform: rotate(0deg) translate3d(0, 0, 0);
transform: rotate(0deg) translate3d(0, 0, 0);
opacity: 1;
}
25% {
-webkit-transform: rotate(90deg) translate3d(257px, 80px, 0);
transform: rotate(90deg) translate3d(257px, 80px, 0);
opacity: 1;
}
50% {
-webkit-transform: rotate(180deg) translate3d(-31px, -133px, 0);
transform: rotate(180deg) translate3d(-31px, -133px, 0);
opacity: 1;
}
75% {
-webkit-transform: rotate(270deg) translate3d(217px, 56px, 0);
transform: rotate(270deg) translate3d(217px, 56px, 0);
opacity: 1;
}
100% {
-webkit-transform: rotate(360deg) translate3d(-90px, -188px, 0);
transform: rotate(360deg) translate3d(-90px, -188px, 0);
opacity: 1;
}
}
div:nth-child(79) {
width: 5px;
height: 5px;
bottom: calc(400px + 15%);
left: calc(50% + -10%);
border-radius: 50%;
background: black;
opacity: 0;
-webkit-animation: bugs79 5s linear 6.9s infinite alternate;
animation: bugs79 5s linear 6.9s infinite alternate;
}
@-webkit-keyframes bugs79 {
0% {
-webkit-transform: rotate(0deg) translate3d(0, 0, 0);
transform: rotate(0deg) translate3d(0, 0, 0);
opacity: 1;
}
25% {
-webkit-transform: rotate(90deg) translate3d(389px, 48px, 0);
transform: rotate(90deg) translate3d(389px, 48px, 0);
opacity: 1;
}
50% {
-webkit-transform: rotate(180deg) translate3d(-12px, -160px, 0);
transform: rotate(180deg) translate3d(-12px, -160px, 0);
opacity: 1;
}
75% {
-webkit-transform: rotate(270deg) translate3d(252px, 38px, 0);
transform: rotate(270deg) translate3d(252px, 38px, 0);
opacity: 1;
}
100% {
-webkit-transform: rotate(360deg) translate3d(-65px, -136px, 0);
transform: rotate(360deg) translate3d(-65px, -136px, 0);
opacity: 1;
}
}
@keyframes bugs79 {
0% {
-webkit-transform: rotate(0deg) translate3d(0, 0, 0);
transform: rotate(0deg) translate3d(0, 0, 0);
opacity: 1;
}
25% {
-webkit-transform: rotate(90deg) translate3d(389px, 48px, 0);
transform: rotate(90deg) translate3d(389px, 48px, 0);
opacity: 1;
}
50% {
-webkit-transform: rotate(180deg) translate3d(-12px, -160px, 0);
transform: rotate(180deg) translate3d(-12px, -160px, 0);
opacity: 1;
}
75% {
-webkit-transform: rotate(270deg) translate3d(252px, 38px, 0);
transform: rotate(270deg) translate3d(252px, 38px, 0);
opacity: 1;
}
100% {
-webkit-transform: rotate(360deg) translate3d(-65px, -136px, 0);
transform: rotate(360deg) translate3d(-65px, -136px, 0);
opacity: 1;
}
}
div:nth-child(80) {
width: 5px;
height: 5px;
bottom: calc(400px + 14%);
left: calc(50% + 19%);
border-radius: 50%;
background: black;
opacity: 0;
-webkit-animation: bugs80 5s linear 7s infinite alternate;
animation: bugs80 5s linear 7s infinite alternate;
}
@-webkit-keyframes bugs80 {
0% {
-webkit-transform: rotate(0deg) translate3d(0, 0, 0);
transform: rotate(0deg) translate3d(0, 0, 0);
opacity: 1;
}
25% {
-webkit-transform: rotate(90deg) translate3d(246px, 46px, 0);
transform: rotate(90deg) translate3d(246px, 46px, 0);
opacity: 1;
}
50% {
-webkit-transform: rotate(180deg) translate3d(-183px, -168px, 0);
transform: rotate(180deg) translate3d(-183px, -168px, 0);
opacity: 1;
}
75% {
-webkit-transform: rotate(270deg) translate3d(273px, 97px, 0);
transform: rotate(270deg) translate3d(273px, 97px, 0);
opacity: 1;
}
100% {
-webkit-transform: rotate(360deg) translate3d(-134px, -145px, 0);
transform: rotate(360deg) translate3d(-134px, -145px, 0);
opacity: 1;
}
}
@keyframes bugs80 {
0% {
-webkit-transform: rotate(0deg) translate3d(0, 0, 0);
transform: rotate(0deg) translate3d(0, 0, 0);
opacity: 1;
}
25% {
-webkit-transform: rotate(90deg) translate3d(246px, 46px, 0);
transform: rotate(90deg) translate3d(246px, 46px, 0);
opacity: 1;
}
50% {
-webkit-t.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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