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