纯CSS三维八角环旋转效果-html代码-BFW代码库

纯CSS三维八角环旋转效果

代码语言：html

所属分类：三维

代码描述：纯CSS三维八角环旋转效果

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


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

<style>
body {
  overflow: hidden;
  margin: 0;
  height: 100vh;
  perspective: 35em;
  background: #333;
}

div {
  position: absolute;
  transform-style: preserve-3d;
}

.a3d {
  --ba: calc(1turn/var(--m));
  --base-ri: 1em;
  --base-rc: calc(var(--base-ri)/var(--cos));
  --w: calc(4*var(--base-ri));
  --o: calc(.5*var(--w));
  top: 50%;
  left: 50%;
}

@keyframes ry {
  to {
    transform: rotatey(0.5turn);
  }
}
.s3d {
  --ri: calc((2*(var(--idx) + 1))*var(--base-ri));
  --rc: calc(var(--ri)/var(--cos));
  --l: calc(2*var(--ri)*var(--tan));
  --c: HSL(var(--hue), var(--sat), var(--lum));
  --fn: cubic-bezier(calc(var(--idx)/var(--n)), calc(-.1*var(--idx)), calc(1 - var(--idx)/var(--n)), calc(1 + .1*var(--idx)));
  animation: ry calc(var(--n)*1s) var(--fn) infinite;
}

.lat {
  --in: 0;
  --sgn-in: calc(1 - 2*var(--in));
  --dif: var(--q)-1-var(--in);
  --xor: calc(var(--dif)*var(--dif));
  --sgn-xor: calc(1 - 2*var(--xor));
  --end: calc(var(--in)*var(--base-ri)*var(--tan));
  margin: calc(var(--end) - .5*var(--l)) calc(-1*var(--o));
  width: var(--w);
  height: calc(var(--l)  - 2*var(--end));
  transform: rotatex(calc((var(--i) + 1)*var(--ba))) translatez(calc(var(--in)*var(--base-ri) + var(--sgn-in)*var(--ri)));
  box-shadow: 0 1px 1px var(--c), 0 -1px 1px var(--c);
  background: radial-Gradient(HSL(var(--hue), calc(.9*var(--sat)), calc(1.05*var(--lum))), HSL(var(--hue), calc(1.25*var(--sat)), calc(.9*var(--lum))) 65%, HSL(var(--hue), var(--sat), calc(1.15*var(--lum)))) 50%/300%;
  filter: brightness(calc(1 + var(--sgn-xor)*.2));
  animation: shade calc(var(--n)*1s) var(--fn) infinite;
}
.lat:nth-child(2n) {
  --in: 1;
}

@keyframes shade {
  to {
    filter: brightness(calc(1 - var(--sgn-xor)*.2));
  }
}
.base {
  --sgn-j: calc(1 - 2*var(--j));
  margin: calc(-1*var(--rc));
  width: 0;
  padding: var(--rc);
  transform: rotatey(calc(var(--sgn-j)*90deg)) translatez(var(--o)) rotate(var(--oa));
  background: repeating-conic-gradient(var(--c) 0%, 0.25deg, HSL(var(--hue), var(--sat), calc(1.05*var(--lum))) calc(.0125*var(--ba)), HSL(var(--hue), calc(1.15*var(--sat)), calc(.9*var(--lum))) calc(.05*var(--ba)), HSL(var(--hue), calc(.95*var(--sat)), calc(1.05*var(--lum))) calc(.35*var(--ba)) calc(.65*var(--ba)), HSL(var(--hue), calc(1.15*var(--sat)), calc(.9*var(--lum))) calc(.95*var(--ba)), HSL(var(--hue), var(--sat), calc(1.05*var(--lum))) calc(.9875*var(--ba)), var(--c) calc(var(--ba) - .25deg) var(--ba));
  clip-path: polygon(var(--vx));
}
</style>

</head>
<body translate="no">
<div .........完整代码请登录后点击上方下载按钮下载查看