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

css实现三维网格动画效果代码

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