纯css构建的长方体水母运动效果-html代码-BFW代码库

纯css构建的长方体水母运动效果

代码语言：html

所属分类：动画

代码描述：纯css构建的长方体水母运动效果

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


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

<style>
body {
  display: grid;
  place-content: center;
  overflow: hidden;
  margin: 0;
  height: 100vh;
  background: #302440;
}

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

.a3d {
  display: grid;
  grid-template: repeat(var(--n), 1.25em)/repeat(var(--n), 1.25em);
  transform: rotatex(55deg) rotate(45deg);
}

.s3d {
  --lim: calc(.5*(var(--n) - 1));
  --abs-i: max(calc(var(--i) - var(--lim)), calc(var(--lim) - var(--i)));
  --abs-j: max(calc(var(--j) - var(--lim)), calc(var(--lim) - var(--j)));
  position: relative;
  background: #efca98;
  transform: translatez(2.5em);
  --dt: calc(.5*(var(--abs-i)*var(--abs-i) + var(--abs-j)*var(--abs-j))/var(--lim)/var(--lim)*-1s);
  animation: a 1s ease-in-out var(--dt) infinite alternate;
}
.s3d::before, .s3d::after {
  --k: 0;
  position: absolute;
  top: 50%;
  width: 1.25em;
  height: 2.5em;
  transform-origin: 50% 0;
  transform: rotate(calc(var(--k)*-90deg)) translatey(0.625em) rotatex(-90deg);
  background: linear-gradient(90deg, #9699B6 50%, #8d6986 0) calc(var(--k)*100%)/200%;
  content: "";
}
.s3d::after {
  --k: 1 ;
}

@keyframes a {
  to {
    transform: translatez(-2.5em) scale(0.1);
  }
}
</style>

</head>
<body translate="no">
<style>.a3d { --n: 15; --i: 0; --j: 0 }.s3d:nth-child(15n + 2) { --j: 1 }
  .s3d:nth-child(n + 16) { --i: 1 }.s3d:nth-child(15n + 3) { --j: 2 }
  .s3d:nth-child(n + 31) { --i: 2 }.s3d:nth-child(15n + 4) { --j: 3 }
  .s3d:nth-child(n + 46) { --i: 3 }.s3d:nth-child(15n + 5) { --j: 4 }
  .s3d:nth-child(n + 61) { --i: 4 }.s3d:nth-child(15n + 6) { --j: 5 }
  .s3d:nth-child(n + 76) { --i: 5 }.s3d:nth-child(15n + 7) { --j: 6 }
  .s3d:nth-child(n + 91) { --i: 6 }.s3d:nth-child(15n + 8) { --j: 7 }
  .s3d:nth-child(n + 106) { --i: 7 }.s3d:nth-child(15n + 9) { --j: 8 }
  .s3d:nth-child(n + 121) { --i: 8 }.s3d:nth-child(15n + 10) { --j: 9 }
  .s3d:nth-child(n + 136) { --i: 9 }.s3d:nth-child(15n + 11) { --j: 10 }
  .s3d:nth-child(n + 151) { --i: 10 }.s3d:nth-child.........完整代码请登录后点击上方下载按钮下载查看