gsap实现点线散列合并动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：gsap实现点线散列合并动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


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

<head>

  <meta charset="UTF-8">

  
  
<style>
body {
  background: radial-gradient(ellipse at bottom, #3f4b5b 0%, #0d0e16 100%);
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transform: rotateX(300deg);
  transform-style: preserve-3d;
  perspective: 200px;
}

.container {
  width: 516px;
  height: 511px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  transform: rotate(45deg);
  transform-style: preserve-3d;
}
.container .kvad {
  width: 57px;
  height: 57px;
  position: relative;
  margin: 2px;
}
.container .kvad .top,
.container .kvad .right,
.container .kvad .bottom,
.container .kvad .left {
  position: absolute;
  height: 1px;
  transform-origin: center;
}
.container .kvad .top:nth-of-type(1),
.container .kvad .right:nth-of-type(1),
.container .kvad .bottom:nth-of-type(1),
.container .kvad .left:nth-of-type(1) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(55deg);
}
.container .kvad .top:nth-of-type(2),
.container .kvad .right:nth-of-type(2),
.container .kvad .bottom:nth-of-type(2),
.container .kvad .left:nth-of-type(2) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(110deg);
}
.container .kvad .top:nth-of-type(3),
.container .kvad .right:nth-of-type(3),
.container .kvad .bottom:nth-of-type(3),
.container .kvad .left:nth-of-type(3) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(165deg);
}
.container .kvad .top:nth-of-type(4),
.container .kvad .right:nth-of-type(4),
.container .kvad .bottom:nth-of-type(4),
.container .kvad .left:nth-of-type(4) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(220deg);
}
.container .kvad .top:nth-of-type(5),
.container .kvad .right:nth-of-type(5),
.container .kvad .bottom:nth-of-type(5),
.container .kvad .left:nth-of-type(5) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(275deg);
}
.container .kvad .top:nth-of-type(6),
.container .kvad .right:nth-of-type(6),
.container .kvad .bottom:nth-of-type(6),
.container .kvad .left:nth-of-type(6) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(330deg);
}
.container .kvad .top:nth-of-type(7),
.container .kvad .right:nth-of-type(7),
.container .kvad .bottom:nth-of-type(7),
.container .kvad .left:nth-of-type(7) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(385deg);
}
.container .kvad .top:nth-of-type(8),
.container .kvad .right:nth-of-type(8),
.container .kvad .bottom:nth-of-type(8),
.container .kvad .left:nth-of-type(8) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(440deg);
}
.container .kvad .top:nth-of-type(9),
.container .kvad .right:nth-of-type(9),
.container .kvad .bottom:nth-of-type(9),
.container .kvad .left:nth-of-type(9) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(495deg);
}
.container .kvad .top:nth-of-type(10),
.container .kvad .right:nth-of-type(10),
.container .kvad .bottom:nth-of-type(10),
.container .kvad .left:nth-of-type(10) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(550deg);
}
.container .kvad .top:nth-of-type(11),
.container .kvad .right:nth-of-type(11),
.container .kvad .bottom:nth-of-type(11),
.container .kvad .left:nth-of-type(11) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(605deg);
}
.container .kvad .top:nth-of-type(12),
.container .kvad .right:nth-of-type(12),
.container .kvad .bottom:nth-of-type(12),
.container .kvad .left:nth-of-type(12) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(660deg);
}
.container .kvad .top:nth-of-type(13),
.container .kvad .right:nth-of-type(13),
.container .kvad .bottom:nth-of-type(13),
.container .kvad .left:nth-of-type(13) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(715deg);
}
.container .kvad .top:nth-of-type(14),
.container .kvad .right:nth-of-type(14),
.container .kvad .bottom:nth-of-type(14),
.container .kvad .left:nth-of-type(14) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(770deg);
}
.container .kvad .top:nth-of-type(15),
.container .kvad .right:nth-of-type(15),
.container .kvad .bottom:nth-of-type(15),
.container .kvad .left:nth-of-type(15) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(825deg);
}
.container .kvad .top:nth-of-type(16),
.container .kvad .right:nth-of-type(16),
.container .kvad .bottom:nth-of-type(16),
.container .kvad .left:nth-of-type(16) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(880deg);
}
.container .kvad .top:nth-of-type(17),
.container .kvad .right:nth-of-type(17),
.container .kvad .bottom:nth-of-type(17),
.container .kvad .left:nth-of-type(17) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(935deg);
}
.container .kvad .top:nth-of-type(18),
.container .kvad .right:nth-of-type(18),
.container .kvad .bottom:nth-of-type(18),
.container .kvad .left:nth-of-type(18) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(990deg);
}
.container .kvad .top:nth-of-type(19),
.container .kvad .right:nth-of-type(19),
.container .kvad .bottom:nth-of-type(19),
.container .kvad .left:nth-of-type(19) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(1045deg);
}
.container .kvad .top:nth-of-type(20),
.container .kvad .right:nth-of-type(20),
.container .kvad .bottom:nth-of-type(20),
.container .kvad .left:nth-of-type(20) {
.........完整代码请登录后点击上方下载按钮下载查看