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