div+css实现三维方块构成的爬行蠕虫动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：div+css实现三维方块构成的爬行蠕虫动画效果代码

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


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

<head>

  <meta charset="UTF-8">


  
  
<style>
.box {
  --d2: calc(var(--d) / 2);
  position: absolute;
  width: var(--w);
  height: var(--h);
  transform: translate3d(var(--x), var(--y), var(--z)) rotatex(var(--rx)) rotatey(var(--ry)) rotatez(var(--rz));
}
.box div {
  position: absolute;
}
.box .lt {
  width: var(--d);
  height: var(--h);
  left: 0;
  transform: rotateY(-90deg) translatez(var(--d2));
}
.box .rt {
  width: var(--d);
  height: var(--h);
  right: 0;
  transform: rotateY(90deg) translatez(var(--d2));
}
.box .tp {
  width: var(--w);
  height: var(--d);
  top: 0;
  transform: rotateX(90deg) translateZ(var(--d2));
}
.box .bt {
  width: var(--w);
  height: var(--d);
  bottom: 0;
  transform: rotateX(-90deg) translateZ(var(--d2));
}
.box .ft {
  width: var(--w);
  height: var(--h);
  transform: translateZ(var(--d2));
}
.box .bk {
  width: var(--w);
  height: var(--h);
  transform: rotateY(180deg) translateZ(var(--d2));
}

:root {
  --scene-width: 60vmin;
  --scene-height: 20vmin;
  --scene-depth: 60vmin;
  --scene-scale: 1.3;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  overflow: hidden;
  perspective: 700px;
  background: radial-gradient(white 0%, black 100%), radial-gradient(#2CD8D5 0%, #C5C1FF 48%, #FFBAC3 100%);
  background-blend-mode: soft-light;
}

.scene {
  --rx: -20deg;
  --ry: -20deg;
  position: relative;
  transform-style: preserve-3d;
  width: var(--scene-width);
  height: var(--scene-height);
  cursor: -webkit-grab;
  cursor: grab;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) scale3d(var(--scene-scale), var(--scene-scale), var(--scene-scale));
}
.scene * {
  box-sizing: border-box;
  transform-style: preserve-3d;
}
.scene:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.tardigrade {
  transform: translate3d(25vmin, 0vmin, 12vmin);
}
.tardigrade .ft {
  background: #b0437b;
}
.tardigrade .tp {
  background: #c9729e;
}
.tardigrade .lt {
  background: #88345f;
}
.tardigrade .bk {
  background: #692849;
}
.tardigrade .rt {
  background: #bb4d85;
}
.tardigrade .bt {
  background: #732c50;
}
.tardigrade .head {
  width: 9vmin;
}
.tardigrade .head .head-large {
  --w: calc(9 * 1vmin);
  --h: calc(9 * 1vmin);
  --d: calc(8 * 1vmin);
  --x: calc(0 * 1vmin);
  --y: calc(0 * 1vmin);
  --z: calc(0 * 1vmin);
  --rx: calc(0 * 1deg);
  --ry: calc(0 * 1deg);
  --rz: calc(0 * 1deg);
}
.tardigrade .head .head-small {
  --w: calc(5 * 1vmin);
  --h: calc(5 * 1vmin);
  --d: calc(2 * 1vmin);
  --x: calc(2 * 1vmin);
  --y: calc(2 * 1vmin);
  --z: calc(5 * 1vmin);
  --rx: calc(0 * 1deg);
  --ry: calc(0 * 1deg);
  --rz: calc(0 * 1deg);
}
.tardigrade .head .head-small .ft {
  background: #b74680;
}
.tardigrade .head .head-small .tp {
  background: #cb76a2;
}
.tardigrade .head .head-small .lt {
  background: #8f3664;
}
.tardigrade .head .head-small .bk {
  background: #6e2a4d;
}
.tardigrade .head .head-small .rt {
  background: #be538a;
}
.tardigrade .head .head-small .bt {
  background: #782e54;
}
.tardigrade .head .mouth-group {
  transform: translate3d(3.75vmin, 3.75vmin, 6.5vmin);
}
.tardigrade .head .mouth-group .mouth {
  --w: calc(1.5 * 1vmin);
  --h: calc(0.5 * 1vmin);
  --d: calc(1.25 * 1vmin);
  --x: calc(0 * 1vmin);
  --y: calc(0 * 1vmin);
  --z: calc(0 * 1vmin);
  --rx: calc(0 * 1deg);
  --ry: calc(0 * 1deg);
  --rz: calc(0 * 1deg);
}
.tardigrade .head .mouth-group .mouth:nth-child(1) {
  --y: -0.5vmin;
}
.tardigrade .head .mouth-group .mouth:nth-child(2) {
  --x: 1vmin;
  --rz: 60deg;
}
.tardigrade .head .mouth-group .mouth:nth-child(3) {
  --x: 1vmin;
  --y: 1vmin;
  --rz: 120deg;
}
.tardigrade .head .mouth-group .mouth:nth-child(4) {
  --y: 1.6vmin;
}
.tardigrade .head .mouth-group .mouth:nth-child(5) {
  --x: -1vmin;
  --y: 1vmin;
  --rz: 240deg;
}
.tardigrade .head .mouth-group .mouth:nth-child(6) {
  --x: -1vmin;
  --rz: 300deg;
}
.tardigrade .body-segment {
  transform: translate3d(-2.5vmin, -1.5vmin, -6vmin);
}
.tardigrade .body-segment .chunk {
  --w: calc(14 * 1vmin);
  --h: calc(12 * 1vmin);
  --d: calc(8 * 1vmin);
  --x: calc(0 * 1vmin);
  --y: calc(0 * 1vmin);
  --z: calc(0 * 1vmin);
  --rx: calc(0 * 1deg);
  --ry: calc(0 * 1deg);
  --rz: calc(0 * 1deg);
}
.tardigrade .body-segment .chunk-small {
  --w: calc(13 * 1vmin);
  --h: calc(11 * 1vmin);
  --d: calc(4 * 1vmin);
  --x: calc(0.5 * 1vmin);
  --y: calc(0.5 * 1vmin);
  --z: calc(-4 * 1vmin);
  --rx: calc(0 * 1deg);
  --ry: calc(0 * 1deg);
  --rz: calc(0 * 1deg);
}
.tardigrade .body-segment .leg {
  --w: calc(4 * 1vmin);
  --h: calc(7 * 1vmin);
  --d: calc(4 * 1vmin);
  --x: calc(0 * 1vmin);
  --y: calc(0 * 1vmin);
  --z: calc(0 * 1vmin);
  --rx: calc(0 * 1deg);
  --ry: calc(0 * 1deg);
  --rz: calc(0 * 1deg);
}
.tardigrade .body-segment .leg .ft {
  background: #b94882;
}
.tardigrade .body-segment .leg .tp {
  background: #cc79a3;
}
.tardigrade .body-segment .leg .lt {
  background: #923866;
}
.tardigrade .body-segment .leg .bk {
  background: #712b4f;
}
.tardigrade .body-segment .leg .rt {
  background: #bf568c;
}
.tardigrade .body-segment .leg .bt {
  background: #7b2f56;
}
.tardigrade .body-segment .toes {
  width: 4vmin;
  transform: translatey(6.75vmin) translatez(1.5vmin);
}
.tardigrade .body-segment .toe {
  --w: calc(0.5 * 1vmin);
  --h: calc(2 * 1vmin);
  --d: calc(0.75 * 1vmin);
  --x: calc(0 * 1vmin);
  --y: calc(0 * 1vmin);
  --z: calc(0 * 1vmin);
  --rx: calc(10 * 1deg);
  --ry: calc(0 * 1deg);
  --rz: calc(0 * 1deg);
}
.tardigrade .body-segment .left-leg {
  transform-origin: 50% 100% 50%;
  transform: rotate(6deg) translate3d(1.5vmin, 10vmin, 0);
}
.tardigrade .body-segment .left-leg .toe:nth-child(1) {
  --x: calc((4.25vmin / 4) * (1 - 1));
  --rx: calc(20deg / 4 * 1);
}
.tardigrade .body-segment .left-leg .toe:nth-child(2) {
  --x: calc((4.25vmin / 4) * (2 - 1));
  --rx: calc(20deg / 4 * 2);
}
.tardigrade .body-segment .left-leg .toe:nth-child(3) {
  --x: calc((4.25vmin / 4) * (3 - 1));
  --rx: calc(20deg / 4 * 3);
}
.tardigrade .body-segment .left-leg .toe:nth-child(4) {
  --x: calc((4.25vmin / 4) * (4 - 1));
  --rx: calc(20deg / 4 * 4);
}
.tardigrade .body-segment .right-leg {
  transform-origin: 50% 100% 50%;
  transform: rotate(-6deg) translate3d(8.5vmin, 10vmin, 0);
}
.tardigrade .body-segment .right-leg .toe:nth-child(1) {
  --x: calc((4.25vmin / 4) * (1 - 1));
  --rx: calc(20deg / 4 * (4 - 1));
}
.tardigrade .body-segment .right-leg .toe:nth-child(2) {
  --x: calc((4.25vmin / 4) * (2 - 1));
  --rx: calc(20deg / 4 * (4 - 2));
}
.tardigrade .body-segment .right-leg .toe:nth-child(3) {
  --x: calc((4.25vmin / 4) * (3 - 1));
  --rx: calc(20deg / 4 * (4 - 3));
}
.tardigrade .........完整代码请登录后点击上方下载按钮下载查看