div+css实现六边形粒子组成的彩色曲面球体动画效果代码-html代码-BFW代码库

div+css实现六边形粒子组成的彩色曲面球体动画效果代码

代码语言：html

所属分类：粒子

代码描述：div+css实现六边形粒子组成的彩色曲面球体动画效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
<style>
@property --p {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}
body {
  display: grid;
  overflow: hidden;
  margin: 0;
  min-height: 100vh;
  background: #000;
}

.hex {
  --i: calc(var(--arm)/var(--arm-n));
  --j: calc(var(--hex)/(var(--hex-n) - 1));
  --ax: calc((.5*(var(--i) + var(--j)) + var(--p, 0))*1turn);
  --ay: calc(var(--j)*180deg - 90deg);
  --rs: calc(2.5*1.25em/var(--tan));
  grid-area: 1/1;
  place-self: center;
  padding: 1.25em;
  transform: perspective(25em) translatez(calc(-1*var(--rs))) rotatex(calc(-1*var(--ax))) rotatey(var(--ay)) translatez(var(--rs)) rotatey(calc(-1*var(--ay))) rotatex(var(--ax));
  background: hsl(calc(var(--i)*360), 75%, 65%);
  mix-blend-mode: screen;
  clip-path: polygon(50% 0%, 93.3012701892% 25%, 93.3012701892% 75%, 50% 100%, 6.6987298108% 75%, 6.6987298108% 25%, 50% 0%, calc(50% + (50% - 6.9282032303px)*0) calc(50% + (50% - 6.9282032303px)*-1), calc(50% + (50% - 6.9282032303px)*-0.8660254038) calc(50% + (50% - 6.9282032303px)*-0.5), calc(50% + (50% - 6.9282032303px)*-0.8660254038) calc(50% + (50% - 6.9282032303px)*0.5), calc(50% + (50% - 6.9282032303px)*0) calc(50% + (50% - 6.9282032303px)*1), calc(50% + (50% - 6.9282032303px)*0.8660254038) calc(50% + (50% - 6.9282032303px)*0.5), calc(50% + (50% - 6.9282032303px)*0.8660254038) calc(50% + (50% - 6.9282032303px)*-0.5), calc(50% + (50% - 6.9282032303px)*0) calc(50% + (50% - 6.9282032303px)*-1));
  animation: p 8s linear infinite;
}

@keyframes p {
  to {
    --p: 1 ;
  }
}
</style>

</head>

<body  >
  <body style="--arm-n: 12; --hex-n: 20; --tan: 0.158">
  <style>.hex:nth-of-type(n + 1) { --arm: 0 }.hex:nth-of-type(n + 21) { --arm: 1 }.hex:nth-of-type(n + 41) { --arm: 2 }.hex:nth-of-type(n + 61) { --arm: 3 }.hex:nth-of-type(n + 81) { --arm: 4 }.hex:nth-of-type(n + 101) { --arm: 5 }.hex:nth-of-type(n + 121) { --arm: 6 }.hex:nth-of-type(n + 141) { --arm: 7 }.hex:nth-of-type(n + 161) { --arm: 8 }.hex:nth-of-type(n + 181) { --arm: 9 }.hex:nth-of-type(n + 201) { --arm: 10 }.hex:nth-of-type(n + 221) { --arm: 11 }.hex:nth-of-type(20n + 1) { --hex: 0 }.hex:nth-of-type(20n + 2) { --hex: 1 }.hex:nth-of-type(20n + 3) { --hex: 2 }.hex:nth-of-type(20n + 4) { --hex: 3 }.hex:nth-of-type(20n + 5) { --hex: 4 }..........完整代码请登录后点击上方下载按钮下载查看