div+css实现粒子线条扭曲动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：div+css实现粒子线条扭曲动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    html, body, .wrap {
  height: 100%;
}

body {
  background: black;
  overflow: hidden;
}

.wrap {
  transform-style: preserve-3d;
  perspective: 400px;
  animation: hue 4s infinite linear alternate;
}

.c {
  height: 3px;
  width: 3px;
  position: absolute;
  top: 50%;
  transform: rotateX(0) translate3d(0, 0, 0);
}

.c:nth-child(1) {
  animation: anim1 10s infinite linear alternate -9.95s;
  background: rgba(255, 0, 0, 0.8);
  left: 0.5%;
}

@keyframes anim1 {
  100% {
    transform: rotateX(50deg) translate3d(0, 0, 0px);
  }
}
.c:nth-child(2) {
  animation: anim2 10s infinite linear alternate -9.9s;
  background: rgba(255, 6, 0, 0.8);
  left: 1%;
}

@keyframes anim2 {
  100% {
    transform: rotateX(100deg) translate3d(0, 0, 5px);
  }
}
.c:nth-child(3) {
  animation: anim3 10s infinite linear alternate -9.85s;
  background: rgba(255, 13, 0, 0.8);
  left: 1.5%;
}

@keyframes anim3 {
  100% {
    transform: rotateX(150deg) translate3d(0, 0, 10px);
  }
}
.c:nth-child(4) {
  animation: anim4 10s infinite linear alternate -9.8s;
  background: rgba(255, 19, 0, 0.8);
  left: 2%;
}

@keyframes anim4 {
  100% {
    transform: rotateX(200deg) translate3d(0, 0, 15px);
  }
}
.c:nth-child(5) {
  animation: anim5 10s infinite linear alternate -9.75s;
  background: rgba(255, 26, 0, 0.8);
  left: 2.5%;
}

@keyframes anim5 {
  100% {
    transform: rotateX(250deg) translate3d(0, 0, 20px);
  }
}
.c:nth-child(6) {
  animation: anim6 10s infinite linear alternate -9.7s;
  background: rgba(255, 32, 0, 0.8);
  left: 3%;
}

@keyframes anim6 {
  100% {
    transform: rotateX(300deg) translate3d(0, 0, 25px);
  }
}
.c:nth-child(7) {
  animation: anim7 10s infinite linear alternate -9.65s;
  background: rgba(255, 38, 0, 0.8);
  left: 3.5%;
}

@keyframes anim7 {
  100% {
    transform: rotateX(350deg) translate3d(0, 0, 30px);
  }
}
.c:nth-child(8) {
  animation: anim8 10s infinite linear alternate -9.6s;
  background: rgba(255, 45, 0, 0.8);
  left: 4%;
}

@keyframes anim8 {
  100% {
    transform: rotateX(400deg) translate3d(0, 0, 35px);
  }
}
.c:nth-child(9) {
  animation: anim9 10s infinite linear alternate -9.55s;
  background: rgba(255, 51, 0, 0.8);
  left: 4.5%;
}

@keyframes anim9 {
  100% {
    transform: rotateX(450deg) translate3d(0, 0, 40px);
  }
}
.c:nth-child(10) {
  animation: anim10 10s infinite linear alternate -9.5s;
  background: rgba(255, 57, 0, 0.8);
  left: 5%;
}

@keyframes anim10 {
  100% {
    transform: rotateX(500deg) translate3d(0, 0, 45px);
  }
}
.c:nth-child(11) {
  animation: anim11 10s infinite linear alternate -9.45s;
  background: rgba(255, 64, 0, 0.8);
  left: 5.5%;
}

@keyframes anim11 {
  100% {
    transform: rotateX(550deg) translate3d(0, 0, 50px);
  }
}
.c:nth-child(12) {
  animation: anim12 10s infinite linear alternate -9.4s;
  background: rgba(255, 70, 0, 0.8);
  left: 6%;
}

@keyframes anim12 {
  100% {
    transform: rotateX(600deg) translate3d(0, 0, 55px);
  }
}
.c:nth-child(13) {
  animation: anim13 10s infinite linear alternate -9.35s;
  background: rgba(255, 77, 0, 0.8);
  left: 6.5%;
}

@keyframes anim13 {
  100% {
    transform: rotateX(650deg) translate3d(0, 0, 60px);
  }
}
.c:nth-child(14) {
  animation: anim14 10s infinite linear alternate -9.3s;
  background: rgba(255, 83, 0, 0.8);
  left: 7%;
}

@keyframes anim14 {
  100% {
    transform: rotateX(700deg) translate3d(0, 0, 65px);
  }
}
.c:nth-child(15) {
  animation: anim15 10s infinite linear alternate -9.25s;
  background: rgba(255, 89, 0, 0.8);
  left: 7.5%;
}

@keyframes anim15 {
  100% {
    transform: rotateX(750deg) translate3d(0, 0, 70px);
  }
}
.c:nth-child(16) {
  animation: anim16 10s infinite linear alternate -9.2s;
  background: rgba(255, 96, 0, 0.8);
  left: 8%;
}

@keyframes anim16 {
  100% {
    transform: rotateX(800deg) translate3d(0, 0, 75px);
  }
}
.c:nth-child(17) {
  animation: anim17 10s infinite linear alternate -9.15s;
  background: rgba(255, 102, 0, 0.8);
  left: 8.5%;
}

@keyframes anim17 {
  100% {
    transform: rotateX(850deg) translate3d(0, 0, 80px);
  }
}
.c:nth-child(18) {
  animation: anim18 10s infinite linear alternate -9.1s;
  background: rgba(255, 108, 0, 0.8);
  left: 9%;
}

@keyframes anim18 {
  100% {
    transform: rotateX(900deg) translate3d(0, 0, 85px);
  }
}
.c:nth-child(19) {
  animation: anim19 10s infinite linear alternate -9.05s;
  background: rgba(255, 115, 0, 0.8);
  left: 9.5%;
}

@keyframes anim19 {
  100% {
    transform: rotateX(950deg) translate3d(0, 0, 90px);
  }
}
.c:nth-child(20) {
  animation: anim20 10s infinite linear alternate -9s;
  background: rgba(255, 121, 0, 0.8);
  left: 10%;
}

@keyframes anim20 {
  100% {
    transform: rotateX(1000deg) translate3d(0, 0, 95px);
  }
}
.c:nth-child(21) {
  animation: anim21 10s infinite linear alternate -8.95s;
  background: rgba(255, 128, 0, 0.8);
  left: 10.5%;
}

@keyframes anim21 {
  100% {
    transform: rotateX(1050deg) translate3d(0, 0, 100px);
  }
}
.c:nth-child(22) {
  animation: anim22 10s infinite linear alternate -8.9s;
  background: rgba(255, 134, 0, 0.8);
  left: 11%;
}

@keyframes anim22 {
  100% {
    transform: rotateX(1100deg) translate3d(0, 0, 95px);
  }
}
.c:nth-child(23) {
  animation: anim23 10s infinite linear alternate -8.85s;
  background: rgba(255, 140, 0, 0.8);
  left: 11.5%;
}

@keyframes anim23 {
  100% {
    transform: rotateX(1150deg) translate3d(0, 0, 90px);
  }
}
.c:nth-child(24) {
  animation: anim24 10s infinite linear alternate -8.8s;
  background: rgba(255, 147, 0, 0.8);
  left: 12%;
}

@keyframes anim24 {
  100% {
    transform: rotateX(1200deg) translate3d(0, 0, 85px);
  }
}
.c:nth-child(25) {
  animation: anim25 10s infinite linear alternate -8.75s;
  background: rgba(255, 153, 0, 0.8);
  left: 12.5%;
}

@keyframes anim25 {
  100% {
    transform: rotateX(1250deg) translate3d(0, 0, 80px);
  }
}
.c:nth-child(26) {
  animation: anim26 10s infinite linear alternate -8.7s;
  background: rgba(255, 159, 0, 0.8);
  left: 13%;
}

@keyframes anim26 {
  100% {
    transform: rotateX(1300deg) translate3d(0, 0, 75px);
  }
}
.c:nth-child(27) {
  animation: anim27 10s infinite linear alternate -8.65s;
  background: rgba(255, 166, 0, 0.8);
  left: 13.5%;
}

@keyframes anim27 {
  100% {
    transform: rotateX(1350deg) translate3d(0, 0, 70px);
  }
}
.c:nth-child(28) {
  animation: anim28 10s infinite linear alternate -8.6s;
  background: rgba(255, 172, 0, 0.8);
  left: 14%;
}

@keyframes anim28 {
  100% {
    transform: rotateX(1400deg) translate3d(0, 0, 65px);
  }
}
.c:nth-child(29) {
  animation: anim29 10s infinite linear alternate -8.55s;
  background: rgba(255, 179, 0, 0.8);
  left: 14.5%;
}

@keyframes anim29 {
  100% {
    transform: rotateX(1450deg) translate3d(0, 0, 60px);
  }
}
.c:nth-child(30) {
  animation: anim30 10s infinite linear alternate -8.5s;
  background: rgba(255, 185, 0, 0.8);
  left: 15%;
}

@keyframes anim30 {
  100% {
    transform: rotateX(1500deg) translate3d(0, 0, 55px);
  }
}
.c:nth-child(31) {
  animation: anim31 10s infinite linear alternate -8.45s;
  background: rgba(255, 191, 0, 0.8);
  left: 15.5%;
}

@keyframes anim31 {
  100% {
    transform: rotateX(1550deg) translate3d(0, 0, 50px);
  }
}
.c:nth-child(32) {
  animation: anim32 10s infinite linear alternate -8.4s;
  background: rgba(255, 198, 0, 0.8);
  left: 16%;
}

@keyframes anim32 {
  100% {
    transform: rotateX(1600deg) translate3d(0, 0, 45px);
  }
}
.c:nth-child(33) {
  animation: anim33 10s infinite linear alternate -8.35s;
  background: rgba(255, 204, 0, 0.8);
  left: 16.5%;
}

@keyframes anim33 {
  100% {
    transform: rotateX(1650deg) translate3d(0, 0, 40px);
  }
}
.c:nth-child(34) {
  animation: anim34 10s infinite linear alternate -8.3s;
  background: rgba(255, 210, 0, 0.8);
  left: 17%;
}

@keyframes anim34 {
  100% {
    transform: rotateX(1700deg) translate3d(0, 0, 35px);
  }
}
.c:nth-child(35) {
  animation: anim35 10s infinite linear alternate -8.25s;
  background: rgba(255, 217, 0, 0.8);
  left: 17.5%;
}

@keyframes anim35 {
  100% {
    transform: rotateX(1750deg) translate3d(0, 0, 30px);
  }
}
.c:nth-child(36) {
  animation: anim36 10s infinite linear alternate -8.2s;
  background: rgba(255, 223, 0, 0.8);
  left: 18%;
}

@keyframes anim36 {
  100% {
    transform: rotateX(1800deg) translate3d(0, 0, 25px);
  }
}
.c:nth-child(37) {
  animation: anim37 10s infinite linear alternate -8.15s;
  background: rgba(255, 230, 0, 0.8);
  left: 18.5%;
}

@keyframes anim37 {
  100% {
    transform: rotateX(1850deg) translate3d(0, 0, 20px);
  }
}
.c:nth-child(38) {
  animation: anim38 10s infinite linear alternate -8.1s;
  background: rgba(255, 236, 0, 0.8);
  left: 19%;
}

@keyframes anim38 {
  100% {
    transform: rotateX(1900deg) translate3d(0, 0, 15px);
  }
}
.c:nth-child(39) {
  animation: anim39 10s infinite linear alternate -8.05s;
  background: rgba(255, 242, 0, 0.8);
  left: 19.5%;
}

@keyframes anim39 {
  100% {
    transform: rotateX(1950deg) translate3d(0, 0, 10px);
  }
}
.c:nth-child(40) {
  animation: anim40 10s infinite linear alternate -8s;
  background: rgba(255, 249, 0, 0.8);
  left: 20%;
}

@keyframes anim40 {
  100% {
    transform: rotateX(2000deg) translate3d(0, 0, 5px);
  }
}
.c:nth-child(41) {
  animation: anim41 10s infinite linear alternate -7.95s;
  background: rgba(255, 255, 0, 0.8);
  left: 20.5%;
}

@keyframes anim41 {
  100% {
    transform: rotateX(2050deg) translate3d(0, 0, 0px);
  }
}
.c:nth-child(42) {
  animation: anim42 10s infinite linear alternate -7.9s;
  background: rgba(249, 255, 0, 0.8);
  left: 21%;
}

@keyframes anim42 {
  100% {
    transform: rotateX(2100deg) translate3d(0, 0, 5px);
  }
}
.c:nth-child(43) {
  animation: anim43 10s infinite linear alternate -7.85s;
  background: rgba(242, 255, 0, 0.8);
  left: 21.5%;
}

@keyframes anim43 {
  100% {
    transform: rotateX(2150deg) translate3d(0, 0, 10px);
  }
}
.c:nth-child(44) {
  animation: anim44 10s infinite linear alternate -7.8s;
  background: rgba(236, 255, 0, 0.8);
  left: 22%;
}

@keyframes anim44 {
  100% {
    transform: rotateX(2200deg) translate3d(0, 0, 15px);
  }
}
.c:nth-child(45) {
  animation: anim45 10s infinite linear alternate -7.75s;
  background: rgba(230, 255, 0, 0.8);
  left: 22.5%;
}

@keyframes anim45 {
  100% {
    transform: rotateX(2250deg) translate3d(0, 0, 20px);
  }
}
.c:nth-child(46) {
  animation: anim46 10s infinite linear alternate -7.7s;
  background: rgba(223, 255, 0, 0.8);
  left: 23%;
}

@keyframes anim46 {
  100% {
    transform: rotateX(2300deg) translate3d(0, 0, 25px);
  }
}
.c:nth-child(47) {
  animation: anim47 10s infinite linear alternate -7.65s;
  background: rgba(217, 255, 0, 0.8);
  left: 23.5%;
}

@keyframes anim47 {
  100% {
    transform: rotateX(2350deg) translate3d(0, 0, 30px);
  }
}
.c:nth-child(48) {
  animation: anim48 10s infinite linear alternate -7.6s;
  background: rgba(210, 255, 0, 0.8);
  left: 24%;
}

@keyframes anim48 {
  100% {
    transform: rotateX(2400deg) translate3d(0, 0, 35px);
  }
}
.c:nth-child(49) {
  animation: anim49 10s infinite linear alternate -7.55s;
  background: rgba(204, 255, 0, 0.8);
  left: 24.5%;
}

@keyframes anim49 {
  100% {
    transform: rotateX(2450deg) translate3d(0, 0, 40px);
  }
}
.c:nth-child(50) {
  animation: anim50 10s infinite linear alternate -7.5s;
  background: rgba(198, 255, 0, 0.8);
  left: 25%;
}

@keyframes anim50 {
  100% {
    transform: rotateX(2500deg) translate3d(0, 0, 45px);
  }
}
.c:nth-child(51) {
  animation: anim51 10s infinite linear alternate -7.45s;
  background: rgba(191, 255, 0, 0.8);
  left: 25.5%;
}

@keyframes anim51 {
  100% {
    transform: rotateX(2550deg) translate3d(0, 0, 50px);
  }
}
.c:nth-child(52) {
  animation: anim52 10s infinite linear alternate -7.4s;
  background: rgba(185, 255, 0, 0.8);
  left: 26%;
}

@keyframes anim52 {
  100% {
    transform: rotateX(2600deg) translate3d(0, 0, 55px);
  }
}
.c:nth-child(53) {
  animation: anim53 10s infinite linear alternate -7.35s;
  background: rgba(179, 255, 0, 0.8);
  left: 26.5%;
}

@keyframes anim53 {
  100% {
    transform: rotateX(2650deg) translate3d(0, 0, 60px);
  }
}
.c:nth-child(54) {
  animation: anim54 10s infinite linear alternate -7.3s;
  background: rgba(172, 255, 0, 0.8);
  left: 27%;
}

@keyframes anim54 {
  100% {
    transform: rotateX(2700deg) translate3d(0, 0, 65px);
  }
}
.c:nth-child(55) {
  animation: anim55 10s infinite linear alternate -7.25s;
  background: rgba(166, 255, 0, 0.8);
  left: 27.5%;
}

@keyframes anim55 {
  100% {
    transform: rotateX(2750deg) translate3d(0, 0, 70px);
  }
}
.c:nth-child(56) {
  animation: anim56 10s infinite linear alternate -7.2s;
  background: rgba(159, 255, 0, 0.8);
  left: 28%;
}

@keyframes anim56 {
  100% {
    transform: rotateX(2800deg) translate3d(0, 0, 75px);
  }
}
.c:nth-child(57) {
  animation: anim57 10s infinite linear alternate -7.15s;
  background: rgba(153, 255, 0, 0.8);
  left: 28.5%;
}

@keyframes anim57 {
  100% {
    transform: rotateX(2850deg) translate3d(0, 0, 80px);
  }
}
.c:nth-child(58) {
  animation: anim58 10s infinite linear alternate -7.1s;
  background: rgba(147, 255, 0, 0.8);
  left: 29%;
}

@keyframes anim58 {
  100% {
    transform: rotateX(2900deg) translate3d(0, 0, 85px);
  }
}
.c:nth-child(59) {
  animation: anim59 10s infinite linear alternate -7.05s;
  background: rgba(140, 255, 0, 0.8);
  left: 29.5%;
}

@keyframes anim59 {
  100% {
    transform: rotateX(2950deg) translate3d(0, 0, 90px);
  }
}
.c:nth-child(60) {
  animation: anim60 10s infinite linear alternate -7s;
  background: rgba(134, 255, 0, 0.8);
  left: 30%;
}

@keyframes anim60 {
  100% {
    transform: rotateX(3000deg) translate3d(0, 0, 95px);
  }
}
.c:nth-child(61) {
  animation: anim61 10s infinite linear alternate -6.95s;
  background: rgba(128, 255, 0, 0.8);
  left: 30.5%;
}

@keyframes anim61 {
  100% {
    transform: rotateX(3050deg) translate3d(0, 0, 100px);
  }
}
.c:nth-child(62) {
  animation: anim62 10s infinite linear alternate -6.9s;
  background: rgba(121, 255, 0, 0.8);
  left: 31%;
}

@keyframes anim62 {
  100% {
    transform: rotateX(3100deg) translate3d(0, 0, 95px);
  }
}
.c:nth-child(63) {
  animation: anim63 10s infinite linear alternate -6.85s;
  background: rgba(115, 255, 0, 0.8);
  left: 31.5%;
}

@keyframes anim63 {
  100% {
    transform: rotateX(3150deg) translate3d(0, 0, 90px);
  }
}
.c:nth-child(64) {
  animation: anim64 10s infinite linear alternate -6.8s;
  background: rgba(108, 255, 0, 0.8);
  left: 32%;
}

@keyframes anim64 {
  100% {
    transform: rotateX(3200deg) translate3d(0, 0, 85px);
  }
}
.c:nth-child(65) {
  animation: anim65 10s infinite linear alternate -6.75s;
  background: rgba(102, 255, 0, 0.8);
  left: 32.5%;
}

@keyframes anim65 {
  100% {
    transform: rotateX(3250deg) translate3d(0, 0, 80px);
  }
}
.c:nth-child(66) {
  animation: anim66 10s infinite linear alternate -6.7s;
  background: rgba(96, 255, 0, 0.8);
  left: 33%;
}

@keyframes anim66 {
  100% {
    transform: rotateX(3300deg) translate3d(0, 0, 75px);
  }
}
.c:nth-child(67) {
  animation: anim67 10s infinite linear alternate -6.65s;
  background: rgba(89, 255, 0, 0.8);
  left: 33.5%;
}

@keyframes anim67 {
  100% {
    transform: rotateX(3350deg) translate3d(0, 0, 70px);
  }
}
.c:nth-child(68) {
  animation: anim68 10s infinite linear alternate -6.6s;
  background: rgba(83, 255, 0, 0.8);
  left: 34%;
}

@keyframes anim68 {
  100% {
    transform: rotateX(3400deg) translate3d(0, 0, 65px);
  }
}
.c:nth-child(69) {
  animation: anim69 10s infinite linear alternate -6.55s;
  background: rgba(77, 255, 0, 0.8);
  left: 34.5%;
}

@keyframes anim69 {
  100% {
    transform: rotateX(3450deg) translate3d(0, 0, 60px);
  }
}
.c:nth-child(70) {
  animation: anim70 10s infinite linear alternate -6.5s;
  background: rgba(70, 255, 0, 0.8);
  left: 35%;
}

@keyframes anim70 {
  100% {
    transform: rotateX(3500deg) translate3d(0, 0, 55px);
  }
}
.c:nth-child(71) {
  animation: anim71 10s infinite linear alternate -6.45s;
  background: rgba(64, 255, 0, 0.8);
  left: 35.5%;
}

@keyframes anim71 {
  100% {
    transform: rotateX(3550deg) translate3d(0, 0, 50px);
  }
}
.c:nth-child(72) {
  animation: anim72 10s infinite linear alternate -6.4s;
  background: rgba(57, 255, 0, 0.8);
  left: 36%;
}

@keyframes anim72 {
  100% {
    transform: rotateX(3600deg) translate3d(0, 0, 45px);
  }
}
.c:nth-child(73) {
  animation: anim73 10s infinite linear alternate -6.35s;
  background: rgba(51, 255, 0, 0.8);
  left: 36.5%;
}

@keyframes anim73 {
  100% {
    transform: rotateX(3650deg) translate3d(0, 0, 40px);
  }
}
.c:nth-child(74) {
  animation: anim74 10s infinite linear alternate -6.3s;
  background: rgba(45, 255, 0, 0.8);
  left: 37%;
}

@keyframes anim74 {
  100% {
    transform: rotateX(3700deg) translate3d(0, 0, 35px);
  }
}
.c:nth-child(75) {
  animation: anim75 10s infinite linear alternate -6.25s;
  background: rgba(38, 255, 0, 0.8);
  left: 37.5%;
}

@keyframes anim75 {
  100% {
    transform: rotateX(3750deg) translate3d(0, 0, 30px);
  }
}
.c:nth-child(76) {
  animation: anim76 10s infinite linear alternate -6.2s;
  background: rgba(32, 255, 0, 0.8);
  left: 38%;
}

@keyframes anim76 {
  100% {
    transform: rotateX(3800deg) translate3d(0, 0, 25px);
  }
}
.c:nth-child(77) {
  animation: anim77 10s infinite linear alternate -6.15s;
  background: rgba(26, 255, 0, 0.8);
  left: 38.5%;
}

@keyframes anim77 {
  100% {
    transform: rotateX(3850deg) translate3d(0, 0, 20px);
  }
}
.c:nth-child(78) {
  animation: anim78 10s infinite linear alternate -6.1s;
  background: rgba(19, 255, 0, 0.8);
  left: 39%;
}

@keyframes anim78 {
  100% {
    transform: rotateX(3900deg) translate3d(0, 0, 15px);
  }
}
.c:nth-child(79) {
  animation: anim79 10s infinite linear alternate -6.05s;
  background: rgba(13, 255, 0, 0.8);
  left: 39.5%;
}

@keyframes anim79 {
  100% {
    transform: rotateX(3950deg) translate3d(0, 0, 10px);
  }
}
.c:nth-child(80) {
  animation: anim80 10s infinite linear alternate -6s;
  background: rgba(6, 255, 0, 0.8);
  left: 40%;
}

@keyframes anim80 {
  100% {
    transform: rotateX(4000deg) translate3d(0, 0, 5px);
  }
}
.c:nth-child(81) {
  animation: anim81.........完整代码请登录后点击上方下载按钮下载查看