css实现三维扫雷机爬行机器人效果代码
代码语言：html
所属分类：三维
代码描述：css实现三维扫雷机爬行机器人效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
box-sizing: border-box;
}
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0;
position: relative;
overflow: hidden;
}
/* The stage. Set the perspective and origin here. */
.canvas {
width: 100%;
height: 100%;
position: absolute;
perspective: 500px;
--offsetPerspectiveX: 0px;
--offsetPerspectiveY: 0px;
perspective-origin: calc(50% + var(--offsetPerspectiveX)) calc(50% + var(--offsetPerspectiveY));
transition: perspective-origin 0.25s ease;
}
/* 3D Canvas transform-style */
.canvas * {
transform-style: preserve-3d;
}
/* Auto center the camera */
.canvas > * {
position: absolute;
top: 50%;
left: 50%;
}
/* Apply camera rotation here. */
.globalCamera {
}
/* Framework internals and test */
@keyframes _rotateTest {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
@keyframes _rotateYTest {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
@keyframes _rotateZTest {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
@keyframes _rotateXTest {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(360deg);
}
}
.reusableBox {
--width: 10px;
--length: 10px;
--height: 10px;
}
._reusableBox__boxFace {
position: absolute;
}
._reusableBox__boxFront, ._reusableBox__boxBack {
width: var(--length);
height: var(--height);
left: calc(var(--length) / -2);
top: calc(var(--height) / -2);
}
._reusableBox__boxLeft, ._reusableBox__boxRight {
width: var(--width);
height: var(--height);
left: calc(var(--width) / -2);
top: calc(var(--height) / -2);
}
._reusableBox__boxBottom, ._reusableBox__boxTop {
width: var(--length);
height: var(--width);
left: calc(var(--length) / -2);
top: calc(var(--width) / -2);
}
._reusableBox__boxFront {
transform: rotateY(0deg) translateZ(calc(var(--width) / 2));
}
._reusableBox__boxBack {
transform: rotateY(180deg) translateZ(calc(var(--width) / 2));
}
._reusableBox__boxLeft {
transform: rotateY(-90deg) translateZ(calc(var(--length) / 2));
}
._reusableBox__boxRight {
transform: rotateY(90deg) translateZ(calc(var(--length) / 2));
}
._reusableBox__boxTop {
transform: rotateX(90deg) translateZ(calc(var(--height) / 2));
}
._reusableBox__boxBottom {
transform: rotateX(-90deg) translateZ(calc(var(--height) / 2));
}
._test ._reusableBox__boxFront {
background: rgba(255, 0, 0, 0.5);
}
._test ._reusableBox__boxBack {
background: rgba(0, 128, 255, 0.5);
}
._test ._reusableBox__boxLeft {
background: rgba(0, 255, 34, 0.5);
}
._test ._reusableBox__boxRight {
background: rgba(221, 0, 255, 0.5);
}
._test ._reusableBox__boxBottom {
background: rgba(230, 255, 0, 0.5);
}
._test ._reusableBox__boxTop {
background: rgba(230, 255, 0, 0.5);
}
html {
background: #c2f3ff;
}
body {
}
.canvas {
--offsetPerspectiveY: -200px;
perspective: 1500px;
}
.globalCamera {
transform: rotateX(-10deg) rotateY(20deg);
/*transition: transform 0.1s ease;*/
/*animation: _rotateYTest 10s linear infinite;*/
}
.creeper {
/*transform: rotateY(30deg);*/
--unitSize: 2.5vh;
}
.creeperHead {
--width: calc(var(--unitSize) * 8);
--height: calc(var(--unitSize) * 8);
--length: calc(var(--unitSize) * 8);
transform: translateY(calc(var(--unitSize) * -10));
}
.creeperLegs {
transform: translateY(calc(var(--unitSize) * 9));
}
.creeperLeg {
--width: calc(var(--unitSize) * 4);
--height: calc(var(--unitSize) * 6);
--length: calc(var(--unitSize) * 4);
transform-origin: 0 calc(var(--height) / -2) calc(var(--length) / -2);
animation: walk 2s ease-in-out infinite;
}
.leg3 .creeperLeg, .leg2 .creeperLeg {
transform-origin: 0 calc(var(--height) / -2) calc(var(--length) / 2);
}
.leg2 .creeperLeg, .leg4 .creeperLeg {
animation-delay: -1s;
}
@keyframes walk {
0% {
transform: rotateX(7deg);
}
50% {
transform: rotateX(-7deg);
}
100% {
transform: rotateX(7deg);
}
}
.leg1 {
transform: translate3d(calc(var(--unitSize) * -2), 0, calc(var(--unitSize) * 4));
}
.leg2 {
transform: translate3d(calc(var(--unitSize) * -2), 0, calc(var(--unitSize) * -4));
}
.leg3 {
transform: translate3d(calc(var(--unitSize) * 2), 0, calc(var(--unitSize) * -4));
}
.leg4 {
transform: translate3d(calc(var(--unitSize) * 2), 0, calc(var(--unitSize) * 4));
}
.creeper ._reusableBox__boxFace {
display: grid;
/*filter: drop-shadow(1px 0 #00000088) drop-shadow(-1px 0 #00000088) drop-shadow(0 1px #00000088) drop-shadow(0 -1px #00000088);*/
filter: saturate(1.2) drop-shadow(0 0 1px #000a);
}
.creeperHead ._reusableBox__boxFace {
grid-template-rows: repeat(8, 1fr);
grid-template-columns: repeat(8, 1fr);
}
.creeperBody {
--length: calc(var(--unitSize) * 8);
--width: calc(var(--unitSize) * 4);
--height: calc(var(--unitSize) * 12);
}
.explode ._reusableBox__boxFace {
animation: flash 0.5s ease-out forwards;
}
.explode .creeperLeg {
animation: none;
}
.explode {
animation: expand 2s cubic-bezier(1, 0, 1, 0.5) forwards;
}
@keyframes flash {
0% {
filter: brightness(3) saturate(1.2) drop-shadow(0 0 1px #000a);
}
100% {
filter: brightness(1.2) saturate(1.2) drop-shadow(0 0 1px #000a);
}
}
@keyframes expand {
0% {
transform: scale(1);
}
100% {
transform: scale3d(1.3, 1.3, 1.3);
}
}
</style>
</head>
<body>
<div class="canvas">
<div class="globalCamera">
<div class="creeper">
<div class="reusableBox creeperBody">
<div class="_reusableBox__boxFace _reusableBox__boxBack" style="grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(12, 1fr);">
<div style="background: rgb(111, 197, 96);"></div>
<div style="background: rgb(116, 200, 99);"></div>
<div style="background: rgb(127, 208, 119);"></div>
<div style="background: rgb(104, 195, 89);"></div>
<div style="background: rgb(84, 179, 68);"></div>
<div style="background: rgb(80, 188, 76);"></div>
<div style="background: rgb(87, 152, 86);"></div>
<div style="background: rgb(94, 195, 78);"></div>
<div style="background: rgb(26, 171, 25);"></div>
<div style="background: rgb(147, 210, 132);"></div>
<div style="background: rgb(89, 184, 74);"></div>
<div style="background: rgb(72, 140, 69);"></div>
<div style="background: rgb(151, 215, 144);"></div>
<div style="background: rgb(109, 193, 94);"></div>
<div style="background: rgb(75, 204, 60);"></div>
<div style="background: rgb(219, 226, 216);"></div>
<div style="background: rgb(92, 182, 77);"></div>
<div style="background: rgb(96, 202, 78);"></div>
<div style="background: rgb(76, 179, 65);"></div>
<div style="background: rgb(150, 212, 140);"></div>
<div style="background: rgb(34, 157, 34);"></div>
<div style="background: rgb(28, 79, 20);"></div>
<div style="background: rgb(195, 215, 190);"></div>
<div style="background: rgb(63, 135, 56);"></div>
<div style="background: rgb(223, 231, 219);"></div>
<div style="background: rgb(26, 171, 25);"></div>
<div style="background: rgb(80, 177, 67);"></div>
<div style="background: rgb(90, 144, 90);"></div>
<div style="background: rgb(172, 220, 163);"></div>
<div style="background: rgb(112, 220, 93);"></div>
<div style="background: rgb(161, 203, 161);"></div>
<div style="background: rgb(63, 135, 56);"></div>
<div style="background: rgb(186, 206, 186);"></div>
<div style="background: rgb(30, 78, 24);"></div>
<div style="background: rgb(111, 197, 96);"></div>
<div style="background: rgb(94, 208, 76);"></div>
<div style="background: rgb(154, 215, 142);"></div>
<div style="background: rgb(86, 147, 85);"></div>
<div style="background: rgb(101, 188, 85);"></div>
<div style="background: rgb(90, 145, 88);"></div>
<div style="background: rgb(87, 152, 86);"></div>
<div style="background: rgb(88, 136, 87);"></div>
<div style="background: rgb(72, 150, 69);"></div>
<div style="background: rgb(191, 223, 185);"></div>
<div style="background: rgb(55, 140, 49);"></div>
<div style="background: rgb(121, 214, 103);"></div>
<div style="background: rgb(101, 192, 85);"></div>
<div style="background: rgb(119, 220, 100);"></div>
<div style="background: rgb(161, 203, 161);"></div>
<div style="background: rgb(114, 202, 96);"></div>
<div style="background: rgb(121, 206, 105);"></div>
<div style="background: rgb(41, 147, 38);"></div>
<div style="background: rgb(203, 223, 199);"></div>
<div style="background: rgb(161, 203, 161);"></div>
<div style="background: rgb(91, 139, 89);"></div>
<div style="background: rgb(30, 78, 24);"></div>
<div style="background: rgb(118, 220, 99);"></div>
<div style="background: rgb(95, 135, 95);"></div>
<div style="background: rgb(107, 183, 93);"></div>
<div style="background: rgb(111, 218, 93);"></div>
<div style="background: rgb(95, 179, 82);"></div>
<div style="background: rgb(119, 197, 105);"></div>
<div style="background: rgb(188, 223, 180);"></div>
<div style="background: rgb(114, 202, 96);"></div>
<div style="background: rgb(155, 215, 149);"></div>
<div style="background: rgb(119, 203, 102);"></div>
<div style="background: rgb(130, 222, 112);"></div>
<div style="background: rgb(82, 150, 81);"></div>
<div style="background: rgb(208, 215, 205);"></div>
<div style="background: rgb(30, 78, 24);"></div>
<div style="background: rgb(71, 178, 57);"></div>
<div style="background: rgb(112, 220, 93);"></div>
<div style="background: rgb(87, 208, 71);"></div>
<div style="background: rgb(191, 210, 187);"></div>
<div style="background: rgb(163, 208, 158);"></div>
<div style="background: rgb(172, 208, 163);"></div>
<div style="background: rgb(85, 184, 83);"></div>
<div style="background: rgb(154, 215, 142);"></div>
<div style="background: rgb(70, 186, 58);"></div>
<div style="background: rgb(96, 195, 81);"></div>
<div style="background: rgb(226, 226, 226);"></div>
<div style="background: rgb(77, 144, 74);"></div>
<div style="background: rgb(31, 84, 23);"></div>
<div style="background: rgb(95, 135, 95);"></div>
<div style="background: rgb(195, 210, 192);"></div>
<div style="background: rgb(30, 78, 24);"></div>
<div style="background: rgb(139, 210, 130);"></div>
<div style="background: rgb(105, 207, 87);"></div>
<div style="background: rgb(76, 145, 72);"></div>
<div style="background: rgb(90, 145, 88);"></div>
<div style="background: rgb(127, 208, 119);"></div>
<div style="background: rgb(95, 197, 89);"></div>
<div style="background: rgb(194, 226, 187);"></div>
<div style="background: rgb(77, 186, 76);"></div>
<div style="background: rgb(76, 157, 73);"></div>
<div style="background: rgb(105, 203, 90);"></div>
</div>
<div class="_reusableBox__boxFace _reusableBox__boxFront" style="grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(12, 1fr);">
<div style="background: rgb(83, 148, 80);"></div>
<div style="background: rgb(80, 147, 78);"></div>
<div style="background: rgb(101, 192, 86);"></div>
<div style="background: rgb(75, 200, 62);"></div>
<div style="background: rgb(110, 203, 106);"></div>
<div style="background: rgb(87, 144, 86);"></div>
<div style="background: rgb(172, 220, 161);"></div>
<div style="background: rgb(191, 220, 185);"></div>
<div style="background: rgb(72, 147, 70);"></div>
<div style="background: rgb(93, 210, 75);"></div>
<div style="background: rgb(196, 223, 192);"></div>
<div style="background: rgb(11, 161, 11);"></div>
<div style="background: rgb(104, 195, 89);"></div>
<div style="background: rgb(188, 210, 185);"></div>
<div style="background: rgb(31, 84, 23);"></div>
<div style="background: rgb(130, 222, 112);"></div>
<div style="background: rgb(101, 188, 85);"></div>
<div style="background: rgb(147, 210, 132);"></div>
<div style="background: rgb(93, 210, 75);"></div>
<div style="background: rgb(151, 210, 141);"></div>
<div style="background: rgb(207, 223, 203);"></div>
<div style="background: rgb(114, 191, 99);"></div>
<div style="background: rgb(150, 212, 140);"></div>
<div style="background: rgb(118, 196, 104);"></div>
<div style="background: rgb(208, 215, 205);"></div>
<div style="background: rgb(89, 210, 74);"></div>
<div style="background: rgb(68, 139, 65);"></div>
<div style="background: rgb(148, 215, 142);"></div>
<div style="background: rgb(131, 210, 124);"></div>
<div style="background: rgb(120, 198, 106);"></div>
<div style="background: rgb(176, 210, 170);"></div>
<div style="background: rgb(133, 220, 116);"></div>
<div style="background: rgb(91, 144, 91);"></div>
<div style="background: rgb(194, 218, 190);"></div>
<div style="background: rgb(84, 146, 82);"></div>
<div style="background: rgb(83, 148, 80);"></div>
<div style="background: rgb(115, 189, 101);"></div>
<div style="background: rgb(197, 228, 192);"></div>
<div style="background: rgb(105, 177, 92);"></div>
<div style="background: rgb(100, 158, 99);"></div>
<div style="background: rgb(89, 210, 74);"></div>
<div style="background: rgb(96, 184, 81);"></div>
<div style="background: rgb(75, 141, 73);"></div>
<div style="background: rgb(139, 210, 130);"></div>
<div style="background: rgb(74, 198, 58);"></div>
<div style="background: rgb(130, 208, 119);"></div>
<div style="background: rgb(164, 210, 154);"></div>
<div style="background: rgb(98, 209, 83);"></div>
<div style="background: rgb(94, 208, 76);"></div>
<div style="background: rgb(63, 135, 56);"></div>
<div style="background: rgb(146, 206, 135);"></div>
<div style="background: rgb(120, 217, 101);"></div>
<div style="background: rgb(87, 144, 86);"></div>
<div style="background: rgb(178, 215, 170);"></div>
<div style="background: rgb(147, 215, 140);"></div>
<div style="background: rgb(95, 155, 93);"></div>
<div style="background: rgb(161, 213, 149);"></div>
<div style="background: rgb(91, 131, 90);"></div>
<div style="background: rgb(198, 228, 1.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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