纯css线条散列排布动画效果-html代码-BFW代码库

纯css线条散列排布动画效果

代码语言：html

代码描述：纯css线条散列排布动画效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  margin: 0;
  height: 100vh;
  background: #000;
}

div, ::before, ::after {
  position: absolute;
  top: 50%;
  left: 50%;
}

.a3d {
  transform-style: preserve-3d;
}

.bar {
  --k: 0;
  --f: 1;
  --p: var(--i)/var(--n);
  margin: -1px -4em;
  width: 8em;
  height: 2px;
  transform-style: preserve-3d;
  --ini:
  	rotate(calc(var(--p)*1turn))
  	translate(13em)
  	rotatey(calc(var(--k)*1turn))
  	scalex(calc(1/var(--f)));
  transform-origin: calc(var(--f)*50%) 50%;
  transform: var(--ini);
  background: HSL(calc(var(--p)*360), 85%, 65%);
  animation: k 5s linear calc(var(--p)*-15s) infinite, f 2.5s ease-in-out calc(var(--p)*-15s) infinite alternate;
}
.bar::before, .bar::after {
  left: calc(var(--s, 0)*100%);
  margin: -.255em;
  padding: .255em;
  border-radius: 50%;
  transform: scalex(calc(var(--f))) rotatey(calc(var(--k)*-1turn));
  background: inherit;
  content: "";
}
.bar::after {
  --s: 1 ;
}

@keyframes f {
  to {
    --f: .5 ;
  }
}
@keyframes k {
  to {
    --k: 1 ;
  }
}
</style>

</head>
<body translate="no">
<div class="a3d" style="--n: 64">
<div class="bar" style="--i: 63"></div>
<div class="bar" style="--i: 62"></div>
<div class="bar" style="--i: 61"></div>
<div class="bar" style="--i: 60"></div>
<div class="bar" style="--i: 59"></div>
<div class="bar" style="--i: 58"></div>
<div class="bar" style="--i: 57"></div>
<div class="bar" style="--i: 56"></div>
<div class="bar" style="--i: 55"></div>
<div class="bar" style="--i: 54"></div>
<div class="bar" style="--i: 53"></div>
<div class="bar" style="--i: 52"></div>
<div class="bar" style="--i: 51"></div>
<div class="bar" style="--i: 50"></div>
<div class="bar" style="--i: 49"></div>
<div class="bar" style="--i: 48"></div>
<div class="bar" style="--i: 47"></div>
<div class="bar" style="--i: 46"></div>
<div class="bar" style="--i: 45"></div>
<div class="bar" style="--i: 44"></div>
<div class="bar" style="--i: 43"></div>
<div class="bar" style="--i: 42"></div>
<div class="bar" style="--i: 41"></div>
<d.........完整代码请登录后点击上方下载按钮下载查看