css实现三维网格动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css实现三维网格动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  background: darkblue;
  background: linear-gradient(0deg, #050057 0%, #0b0bb0 100%);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  overflow: hidden;
}

div,
div::after {
  position: absolute;
  width: 55vw;
  height: 10vh;
  left: 0;
  top: -100px;
  transform-origin: top left;
  border-bottom: 1px solid hotpink;
  border-radius: 0 0 0 100%;
}

div::after {
  content: "";
  left: 100%;
  top: 100%;
  border-radius: 0 100% 0 0;
  border-top: 1px solid deeppink;
  border-bottom: none;
}

div::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 6px;
  background: #ffffff;
  box-shadow: 0 0 20px #ffffff;
  top: 0;
  left: 0;
  border-radius: 999px;
  animation: spark 6000ms linear infinite;
  transform: scale(0.1) translate(-20vw, 0);
  animation-delay: inherit;
}

body div:nth-of-type(1) {
  top: -95px;
  transform: rotate(-9.5deg);
  animation-delay: 4399ms;
}

body div:nth-of-type(2) {
  top: -90px;
  transform: rotate(-9deg);
  animation-delay: 657ms;
}

body div:nth-of-type(3) {
  top: -85px;
  transform: rotate(-8.5deg);
  animation-delay: 3758ms;
}

body div:nth-of-type(4) {
  top: -80px;
  transform: rotate(-8deg);
  animation-delay: 5267ms;
}

body div:nth-of-type(5) {
  top: -75px;
  transform: rotate(-7.5deg);
  animation-delay: 4446ms;
}

body div:nth-of-type(6) {
  top: -70px;
  transform: rotate(-7deg);
  animation-delay: 5175ms;
}

body div:nth-of-type(7) {
  top: -65px;
  transform: rotate(-6.5deg);
  animation-delay: 868ms;
}

body div:nth-of-type(8) {
  top: -60px;
  transform: rotate(-6deg);
  animation-delay: 3459ms;
}

body div:nth-of-type(9) {
  top: -55px;
  transform: rotate(-5.5deg);
  animation-delay: 3785ms;
}

body div:nth-of-type(10) {
  top: -50px;
  transform: rotate(-5deg);
  animation-delay: 5930ms;
}

body div:nth-of-type(11) {
  top: -45px;
  transform: rotate(-4.5deg);
  animation-delay: 953ms;
}

body div:nth-of-type(12) {
  top: -40px;
  transform: rotate(-4deg);
  animation-delay: 834ms;
}

body div:nth-of-type(13) {
  top: -35px;
  transform: rotate(-3.5deg);
  animation-delay: 3799ms;
}

body div:nth-of-type(14) {
  top: -30px;
  transform: rotate(-3deg);
  animation-delay: 4098ms;
}

body div:nth-of-type(15) {
  top: -25px;
  transform: rotate(-2.5deg);
  animation-delay: 163ms;
}

body div:nth-of-type(16) {
  top: -20px;
  transform: rotate(-2deg);
  animation-delay: 805ms;
}

body div:nth-of-type(17) {
  top: -15px;
  transform: rotate(-1.5deg);
  animation-delay: 3093ms;
}

body div:nth-of-type(18) {
  top: -10px;
  transform: rotate(-1deg);
  animation-delay: 3202ms;
}

body div:nth-of-type(19) {
  top: -5px;
  transform: rotate(-0.5deg);
  animation-delay: 1216ms;
}

body div:nth-of-type(20) {
  top: 0px;
  transform: rotate(0deg);
  animation-delay: 3335ms;
}

body div:nth-of-type(21) {
  top: 5px;
  transform: rotate(0.5deg);
  animation-delay: 5646ms;
}

body div:nth-of-type(22) {
  top: 10px;
  transform: rotate(1deg);
  animation-delay: 2350ms;
}

body div:nth-of-type(23) {
  top: 15px;
  transform: rotate(1.5deg);
  animation-delay: 3119ms;
}

body div:nth-of-type(24) {
  top: 20px;
  transform: rotate(2deg);
  animation-delay: 2169ms;
}

body div:nth-of-type(25) {
  top: 25px;
  transform: rotate(2.5deg);
  animation-delay: 5807ms;
}

body div:nth-of-type(26) {
  top: 30px;
  transform: rotate(3deg);
  animation-delay: 1967ms;
}

body div:nth-of-type(27) {
  top: 35px;
  transform: rotate(3.5deg);
  animation-delay: 1106ms;
}

body div:nth-of-type(28) {
  top: 40px;
  transform: rotate(4deg);
  animation-delay: 4128ms;
}

body div:nth-of-type(29) {
  top: 45px;
  transform: rotate(4.5deg);
  animation-delay: 4237ms;
}

body div:nth-of-type(30) {
  top: 50px;
  transform: rotate(5deg);
  animation-delay: 2684ms;
}

body div:nth-of-type(31) {
  top: 55px;
  transform: rotate(5.5deg);
  animation-delay: 4066ms;
}

body div:nth-of-type(32) {
  top: 60px;
  transform: rotate(6deg);
  animation-delay: 92ms;
}

body div:nth-of-type(33) {
  top: 65px;
  transform: rotate(6.5deg);
  animation-delay: 1468ms;
}

body div:nth-of-type(34) {
  top: 70px;
  transform: rotate(7deg);
  animation-delay: 5823ms;
}

body div:nth-of-type(35) {
  top: 75px;
  transform: rotate(7.5deg);
  animation-delay: 2442ms;
}

body div:nth-of-type(36) {
  top: 80px;
  transform: rotate(8deg);
  animation-delay: 783ms;
}

body div:nth-of-type(37) {
  top: 85px;
  transform: rotate(8.5deg);
  animation-delay: 2884ms;
}

body div:nth-of-type(38) {
  top: 90px;
  transform: rotate(9deg);
  animation-delay: 1828ms;
}

body div:nth-of-type(39) {
  top: 95px;
  transform: rotate(9.5deg);
  animation-delay: 1139ms;
}

body div:nth-of-type(40) {
  top: 100px;
  transform: rotate(10deg);
  animation-delay: 1260ms;
}

body div:nth-of-type(41) {
  top: 105px;
  transform: rotate(10.5deg);
  animation-delay: 4196ms;
}

body div:nth-of-type(42) {
  top: 110px;
  transform: rotate(11deg);
  animation-delay: 4559ms;
}

body div:nth-of-type(43) {
  top: 115px;
  transform: rotate(11.5deg);
  animation-delay: 4026ms;
}

body div:nth-of-type(44) {
  top: 120px;
  transform: rotate(12deg);
  animation-delay: 1128ms;
}

body div:nth-of-type(45) {
  top: 125px;
  transform: rotate(12.5deg);
  animation-delay: 1268ms;
}

body div:nth-of-type(46) {
  top: 130px;
  transform: rotate(13deg);
  animation-delay: 4706ms;
}

body div:nth-of-type(47) {
  top: 135px;
  transform: rotate(13.5deg);
  animation-delay: 2701ms;
}

body div:nth-of-type(48) {
  top: 140px;
  transform: rotate(14deg);
  animation-delay: 3722ms;
}

body div:nth-of-type(49) {
  top: 145px;
  transform: rotate(14.5deg);
  animation-delay: 489ms;
}

body div:nth-of-type(50) {
  top: 150px;
  transform: rotate(15deg);
  animation-delay: 696ms;
}

body div:nth-of-type(51) {
  top: 155px;
  transform: rotate(15.5deg);
  animation-delay: 870ms;
}

body div:nth-of-type(52) {
  top: 160px;
  transform: rotate(16deg);
  animation-delay: 3768ms;
}

body div:nth-of-type(53) {
  top: 165px;
  transform: rotate(16.5deg);
  animation-delay: 3336ms;
}

body div:nth-of-type(54) {
  top: 170px;
  transform: rotate(17deg);
  animation-delay: 4378ms;
}

body div:nth-of-type(55) {
  top: 175px;
  transform: rotate(17.5deg);
  animation-delay: 2725ms;
}

body div:nth-of-type(56) {
  top: 180px;
  transform: rotate(18deg);
  animation-delay: 2301ms;
}

body div:nth-of-type(57) {
  top: 185px;
  transform: rotate(18.5deg);
  animation-delay: 2200ms;
}

body div:nth-of-type(58) {
  top: 190px;
  transform: rotate(19deg);
  animation-delay: 597ms;
}

body div:nth-of-type(59) {
  top: 195px;
  transform: rotate(19.5deg);
  animation-delay: 4084ms;
}

body div:nth-of-type(60) {
  top: 200px;
  transform: rotate(20deg);
  animation-delay: 3444ms;
}

body div:nth-of-type(61) {
  top: 205px;
  transform: rotate(20.5deg);
  animation-delay: 2696ms;
}

body div:nth-of-type(62) {
  top: 210px;
  transform: rotate(21deg);
  animation-delay: 4758ms;
}

body div:nth-of-type(63) {
  top: 215px;
  transform: rotate(21.5deg);
  animation-delay: 3726ms;
}

body div:nth-of-type(64) {
  top: 220px;
  transform: rotate(22deg);
  animation-delay: 969ms;
}

body div:nth-of-type(65) {
  top: 225px;
  transform: rotate(22.5deg);
  animation-delay: 4077ms;
}

body div:nth-of-type(66) {
  top: 230px;
  transform: rotate(23deg);
  animation-delay: 3718ms;
}

body div:nth-of-type(67) {
  top: 235px;
  transform: rotate(23.5deg);
  animation-delay: 5024ms;
}

body div:nth-of-type(68) {
  top: 240px;
  transform: rotate(24deg);
  animation-delay: 5851ms;
}

body div:nth-of-type(69) {
  top: 245px;
  transform: rotate(24.5deg);
  animation-delay: 4319ms;
}

body div:nth-of-type(70) {
  top: 250px;
  transform: rotate(25deg);
  animation-delay: 692ms;
}

body div:nth-of-type(71) {
  top: 255px;
  transform: rotate(25.5deg);
  animation-delay: 196ms;
}

body div:nth-of-type(72) {
  top: 260px;
  transform: rotate(26deg);
  animation-delay: 2647ms;
}

body div:nth-of-type(73) {
  top: 265px;
  transform: rotate(26.5deg);
  animation-delay: 5434ms;
}

body div:nth-of-type(74) {
  top: 270px;
  transform: rotate(27deg);
  animation-delay: 5765ms;
}

body div:nth-of-type(75) {
  top: 275px;
  transform: rotate(27.5deg);
  animation-delay: 1277ms;
}

body div:nth-of-type(76) {
  top: 280px;
  transform: rotate(28deg);
  animation-delay: 5041ms;
}

body div:nth-of-type(77) {
  top: 285px;
  transform: rotate(28.5deg);
  animation-delay: 1683ms;
}

body div:nth-of-type(78) {
  top: 290px;
  transform: rotate(29deg);
  animation-delay: 2277ms;
}

body div:nth-of-type(79) {
  top: 295px;
  transform: rotate(29.5deg);
  animation-delay: 2550ms;
}

body div:nth-of-type(80) {
  top: 300px;
  transform: rotate(30deg);
  animation-delay: 320ms;
}

body div:nth-of-type(81) {
  top: 305px;
  transform: rotate(30.5deg);
  animation-delay: 283ms;
}

body div:nth-of-type(82) {
  top: 310px;
  transform: rotate(31deg);
  animation-delay: 4608ms;
}

body div:nth-of-type(83) {
  top: 315px;
  transform: rotate(31.5deg);
  animation-delay: 5804ms;
}

body div:nth-of-type(.........完整代码请登录后点击上方下载按钮下载查看