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