div+css实现三维方块构成的爬行蠕虫动画效果代码
代码语言：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 .body-segment .right-leg .toe:nth-child(4) {
--x: calc((4.25vmin / 4) * (4 - 1));
--rx: calc(20deg / 4 * (4 - 4));
}
.tardigrade .body-segment.ft {
--delay: 0s;
}
.tardigrade .body-segment.ft_mid {
--delay: 0s;
transform: translate3d(-2.5vmin, -1.5vmin, -15vmin);
}
.tardigrade .body-segment.bk_mid {
--delay: 0.25s;
transform: translate3d(-2.5vmin, -1.5vmin, -24vmin);
}
.tardigrade .body-segment.bk {
--delay: 0.25s;
transform: translate3d(-2.5vmin, -1.5vmin, -32vmin);
}
.tardigrade .body-segment.bk .chunk {
--w: calc(14 * 1vmin);
--h: calc(12 * 1vmin);
--d: calc(6 * 1vmin);
--x: calc(0 * 1vmin);
--y: calc(0.5 * 1vmin);
--z: calc(0 * 1vmin);
--rx: calc(0 * 1deg);
--ry: calc(0 * 1deg);
--rz: calc(0 * 1deg);
}
:root {
--ease: ease-in-out;
--dur: 2s;
}
.head {
animation: head-wiggle var(--dur) ease-in-out infinite alternate-reverse;
}
.leg-ani.forward {
-webkit-animation: swim var(--dur) var(--ease) var(--delay) infinite alternate;
animation: swim var(--dur) var(--ease) var(--delay) infinite alternate;
}
.leg-ani.forward .toes {
-webkit-animation: swim-toes var(--dur) var(--ease) var(--delay) infinite alternate;
animation: swim-toes var(--dur) var(--ease) var(--delay) infinite alternate;
}
.leg-ani.reverse {
animation: swim var(--dur) var(--ease) var(--delay) infinite alternate-reverse;
}
.leg-ani.reverse .toes {
animation: swim-toes var(--dur) var(--ease) var(--delay) infinite alternate-reverse;
}
.body-ani {
width: 14vmin;
}
.body-ani.forwards {
-webkit-animation: body-wiggle var(--dur) var(--ease) var(--delay) infinite alternate;
animation: body-wiggle var(--dur) var(--ease) var(--delay) infinite alternate;
}
.body-ani.reverse {
animation: body-wiggle var(--dur) var(--ease) var(--delay) infinite alternate-reverse;
}
.particle-1 {
--w: calc(1 * 1vmin);
--h: calc(1 * 1vmin);
--d: calc(1 * 1vmin);
--x: calc(40 * 1vmin);
--y: calc(0 * 1vmin);
--z: calc(15 * 1vmin);
--rx: calc(0 * 1deg);
--ry: calc(0 * 1deg);
--rz: calc(0 * 1deg);
}
.particle-1 .ft {
background: #41dcd9;
}
.particle-1 .tp {
background: #74e5e3;
}
.particle-1 .lt {
background: #24c1be;
}
.particle-1 .bk {
background: #1c9593;
}
.particle-1 .rt {
background: #50dfdc;
}
.particle-1 .bt {
background: #1ea2a0;
}
.particle-2 {
--w: calc(1 * 1vmin);
--h: calc(1 * 1vmin);
--d: calc(1 * 1vmin);
--x: calc(30 * 1vmin);
--y: calc(-8 * 1vmin);
--z: calc(12 * 1vmin);
--rx: calc(0 * 1deg);
--ry: calc(0 * 1deg);
--rz: calc(0 * 1deg);
}
.particle-2 .ft {
background: #41dcd9;
}
.particle-2 .tp {
background: #74e5e3;
}
.particle-2 .lt {
background: #24c1be;
}
.particle-2 .bk {
background: #1c9593;
}
.particle-2 .rt {
background: #50dfdc;
}
.particle-2 .bt {
background: #1ea2a0;
}
.particle-3 {
--w: calc(1 * 1vmin);
--h: calc(1 * 1vmin);
--d: calc(1 * 1vmin);
--x: calc(20 * 1vmin);
--y: calc(-2 * 1vmin);
--z: calc(30 * 1vmin);
--rx: calc(0 * 1deg);
--ry: calc(0 * 1deg);
--rz: calc(0 * 1deg);
}
.particle-3 .ft {
background: #41dcd9;
}
.particle-3 .tp {
background: #74e5e3;
}
.particle-3 .lt {
background: #24c1be;
}
.particle-3 .bk {
background: #1c9593;
}
.particle-3 .rt {
background: #50dfdc;
}
.particle-3 .bt {
background: #1ea2a0;
}
.particle {
-webkit-animation: particle var(--dur) linear infinite;
animation: particle var(--dur) linear infinite;
}
@-webkit-keyframes body-wiggle {
from {
transform: rotatey(-4deg);
}
to {
transform: rotatey(4deg);
}
}
@keyframes body-wiggle {
from {
transform: rotatey(-4deg);
}
to {
transform: rotatey(4deg);
}
}
@-webkit-keyframes head-wiggle {
from {
transform: rotatey(-10deg);
}
to {
transform: rotatey(10deg);
}
}
@keyframes head-wiggle {
from {
transform: rotatey(-10deg);
}
to {
transform: rotatey(10deg);
}
}
@-webkit-keyframes swim {
from {
transform: rotatex(20deg);
}
to {
transform: rotatex(-20deg);
}
}
@keyframes swim {
from {
transform: rotatex(20deg);
}
to {
transform: rotatex(-20deg);
}
}
@-webkit-keyframes swim-toes {
from {
transform: translatey(6.75vmin) translatez(1.5vmin) rotatex(25deg);
}
to {
transform: translatey(6.75vmin) translatez(1.5vmin) rotatex(-25deg);
}
}
@keyframes swim-toes {
from {
transform: translatey(6.75vmin) translatez(1.5vmin) rotatex(25deg);
}
to {
transform: translatey(6.75vmin) translatez(1.5vmin) rotatex(-25deg);
}
}
@-webkit-keyframes particle {
0% {
transform: translatez(0px);
}
100% {
transform: translatez(-65vmin);
}
}
@keyframes particle {
0% {
transform: translatez(0px);
}
100% {
transform: translatez(-65vmin);
}
}
</style>
</head>
<body >
<div class="scene">
<div class="particle" style="--dur: 20s">
<div class="box particle-1">
<div class="lt"></div>
<div class="rt"></div>
<div class="tp"></div>
<div class="bt"></div>
<div class="ft"></div>
<div class="bk"></div>
</div>
</div>
<div class="particle" style="--dur: 25s">
<div class="box particle-2">
<div class="lt"></div>
<div class="rt"></div>
<div class="tp"></div>
<div class="bt"></div>
<div class="ft"></div>
<div class="bk"></div>
</div>
</div>
<div class="particle" style="--dur: 30s">
<div class="box particle-3">
<div class="lt"></div>
<div class="rt"></div>
<div class="tp"></div>
<div class="bt"></div>
<div class="ft"></div>
<div class="bk"></div>
</div>
</div>
<div class="tardigrade">
<div class="head">
<div class="box head-large">
<div class="lt"></div>
<div class="rt"></div>
<div class="tp"></div>
<div class="bt"></div>
<div class="ft"></div>
<div class="bk"></div>
</div>
<div class="box head-small">
<div class="lt"></div>
<div class="rt"></div>
<div class="tp"></div>
<div class="bt"></div>
<div class="ft"></div>
<div class="bk"></div>
</div>
<div class="mouth-group">
<div class="box mouth">
<div class="lt"></div>
<div class="rt"></div>
<div class="tp"></div>
<div class="bt"></div>
<div class="ft"></div>
<div class="bk"></div>
</div>
<div class="box mouth">
<div class="lt"></div>
<div class="rt"></div>
<div class="tp"></div>
<div class="bt"></div>
<div class="ft"></div>
<div class="bk"></div>
</div>
<div class="box mouth">
<div class="lt"></div>
<div class="rt"></div>
<div class="tp"></div>
<div class="bt"></div>
<div class="ft"></div>
<div class="bk"></div>
</div>
<div class="box mouth">
<div class="lt"></div>
<div class="rt"></div>
<div class="tp"></div>
<div class="bt"></div>
<div class="ft"></div>
<div class="bk"></div>
</div>
<div class="box mouth">
<div class="lt"></div>
<div class="rt"></div>
<div class="tp"></div>
<div class="bt"></div>
<div class="ft"></div>
<div class="bk"></div>
</div>
<div class="box mouth">
<div class="lt"></div>
<div class="rt"></div>
<div class="tp"></div>
<div class="bt"></div>
<div class="ft"></div>
<div class="bk"></div>
</div>
</div>
</div>
<div class="body-segment ft">
<div class="body-ani reverse">
<div class="box chunk">
<div class="lt"></div>
<div class="rt"></div>
<div class="tp"></div>
<div class="bt"></div>
<div class="ft"></div>
<div class="bk"></div>
</div>
<div class="box chunk-small">
<div class="lt"></div>
<div class="rt"></div>
<div class="tp"></div>
<div class="bt"></div>
<div class="ft"></div>
<div class="bk"></div>
</div>
<div class="left-leg">
<div class="leg-ani forward">
<div class="box leg">
<div class="lt"></div>
<div class="rt"></div>
<div class="tp"></div>
<div class="bt"></div>
<div class="ft"></div>
<div class="bk"></div>
</div>
<div class="toes">
<div class="box toe">
<div class="lt"></div>
<div class="rt"></div>
<div class="tp"></div>
<div class="bt"></div>
<div class="ft"></div>
<div class="bk"></div>
</div>
<div class="box toe">
<div class="lt"></div>
<div class="rt"></div>
<div class="tp"></div>
<div class="bt"></div>
<div class="ft"></div>
<div class="bk"></div>
</div>
<div class="box toe">
<div class="lt"></div>
<div class="rt"></div>
<div class="tp"></div>
<div class="bt"></div>
<div class="ft"></div>
<div class="bk"></div>
</div>
<div class="box toe">
<div class="lt"></div>
<div class="rt"></div>
<div class="tp"></div>
<div class="bt"></div>
<div class="ft"></div>
<div class="bk"></div>
</div>
</div>
</div>
</div>
<div class="right-leg">
<div class="leg-ani reverse">
<div class="box leg">
<div class="lt"></div>
<div class="rt"></div>
<div class="tp"></div>
<div class="bt"></div>
<div class="ft"></div>
<div class="bk"></div>
</div>
<div class="toes">
<div class="box toe">
<div class="lt"></div>
<div class="rt.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0