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