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