纯css实现三维游戏场景效果
代码语言：html
所属分类：三维
代码描述：纯css实现三维游戏场景效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.X00 {
background-color: black;
}
.XFD {
background-color: #cccccc;
}
.XFE {
background-color: #00acee;
}
.XFF {
background-color: transparent;
}
.X01 {
background-color: #281b0a;
}
.X02 {
background-color: #2c1e0e;
}
.X03 {
background-color: #865334;
}
.X04 {
background-color: #302872;
}
.X05 {
background-color: #3f3f3f;
}
.X06 {
background-color: #26180b;
}
.X07 {
background-color: #281a0d;
}
.X08 {
background-color: #26215b;
}
.X09 {
background-color: #261a0a;
}
.X0A {
background-color: #2d1d0e;
}
.X0B {
background-color: #9a6344;
}
.X0C {
background-color: #271b0b;
}
.X0D {
background-color: #291c0c;
}
.X0E {
background-color: #261a0c;
}
.X0F {
background-color: #62432f;
}
.X10 {
background-color: #2b1e0e;
}
.X11 {
background-color: #231709;
}
.X12 {
background-color: #2c1e11;
}
.X13 {
background-color: #9d6a4f;
}
.X14 {
background-color: #9c6748;
}
.X15 {
background-color: #5649cc;
}
.X16 {
background-color: #463aa5;
}
.X17 {
background-color: #6b6b6b;
}
.X18 {
background-color: #322310;
}
.X19 {
background-color: #281b0b;
}
.X1A {
background-color: #87583a;
}
.X1B {
background-color: #845231;
}
.X1C {
background-color: #965f41;
}
.X1D {
background-color: #3a3189;
}
.X1E {
background-color: #2d2010;
}
.X1F {
background-color: #2b1e0d;
}
.X20 {
background-color: #24180a;
}
.X21 {
background-color: #9c6345;
}
.X22 {
background-color: #8a593b;
}
.X23 {
background-color: #332411;
}
.X24 {
background-color: #2f2211;
}
.X25 {
background-color: #3a2814;
}
.X26 {
background-color: #885a39;
}
.X27 {
background-color: #75472f;
}
.X28 {
background-color: #74482f;
}
.X29 {
background-color: #2a1d0d;
}
.X2A {
background-color: #241808;
}
.X2B {
background-color: #2f200d;
}
.X2C {
background-color: #aa7d66;
}
.X2D {
background-color: #b4846d;
}
.X2E {
background-color: #9c6346;
}
.X2F {
background-color: #905e43;
}
.X30 {
background-color: #6f452c;
}
.X31 {
background-color: #282828;
}
.X32 {
background-color: #2f1f0f;
}
.X33 {
background-color: #b6896c;
}
.X34 {
background-color: #ffffff;
}
.X35 {
background-color: #b37b62;
}
.X36 {
background-color: #965f40;
}
.X37 {
background-color: #6d432a;
}
.X38 {
background-color: #bd8e72;
}
.X39 {
background-color: #523d89;
}
.X3A {
background-color: #b78272;
}
.X3B {
background-color: #774235;
}
.X3C {
background-color: #815339;
}
.X3D {
background-color: #281c0b;
}
.X3E {
background-color: #c69680;
}
.X3F {
background-color: #ad806d;
}
.X40 {
background-color: #b57b67;
}
.X41 {
background-color: #6a4030;
}
.X42 {
background-color: #422a12;
}
.X43 {
background-color: #bd8b72;
}
.X44 {
background-color: #9c725c;
}
.X45 {
background-color: #bb8972;
}
.X46 {
background-color: #7a4e33;
}
.X47 {
background-color: #1f100b;
}
.X48 {
background-color: #3f2a15;
}
.X49 {
background-color: #bd8e74;
}
.X4A {
background-color: #be886c;
}
.X4B {
background-color: #83553b;
}
.X4C {
background-color: #ac765a;
}
.X4D {
background-color: #9c694c;
}
.X4E {
background-color: #a26a47;
}
.X4F {
background-color: #8f5e3e;
}
.X50 {
background-color: #342512;
}
.X51 {
background-color: #805334;
}
.X52 {
background-color: #007f7f;
}
.X53 {
background-color: #006868;
}
.X54 {
background-color: #005b5b;
}
.X55 {
background-color: #232323;
}
.X56 {
background-color: #9f6849;
}
.X57 {
background-color: #9a644a;
}
.X58 {
background-color: #00cccc;
}
.X59 {
background-color: #009999;
}
.X5A {
background-color: #00a8a8;
}
.X5B {
background-color: #00afaf;
}
.X5C {
background-color: #009e9e;
}
.X5D {
background-color: #522826;
}
.X5E {
background-color: #006060;
}
.X5F {
background-color: #87553b;
}
.X60 {
background-color: #966f5b;
}
.X61 {
background-color: #513125;
}
.X62 {
background-color: #e68583;
}
.X63 {
background-color: #e67973;
}
.X64 {
background-color: #c6615a;
}
.X65 {
background-color: #e6918b;
}
.X66 {
background-color: #e4686a;
}
.X67 {
background-color: #f19e98;
}
.X68 {
background-color: #894746;
}
.X69 {
background-color: #ff9392;
}
.X6A {
background-color: #eea5a4;
}
.X6B {
background-color: #fbbebe;
}
.X6C {
background-color: #be504d;
}
.X6D {
background-color: #4e772a;
}
.X6E {
background-color: #4f782b;
}
.X6F {
background-color: #56832f;
}
.X70 {
background-color: #3e5f22;
}
.X71 {
background-color: #56822e;
}
.X72 {
background-color: #517b2c;
}
.X73 {
background-color: #436524;
}
.X74 {
background-color: #4c7329;
}
.X75 {
background-color: #588630;
}
.X76 {
background-color: #50792b;
}
.X77 {
background-color: #527d2c;
}
.X78 {
background-color: #466a26;
}
.X79 {
background-color: #629635;
}
.X7A {
background-color: #446825;
}
.X7B {
background-color: #466b26;
}
.X7C {
background-color: #679d38;
}
.X7D {
background-color: #4a7128;
}
.X7E {
background-color: #4b7128;
}
.X7F {
background-color: #456926;
}
.X80 {
background-color: #507a2c;
}
.X81 {
background-color: #537d2d;
}
.X82 {
background-color: #476d27;
}
.X83 {
background-color: #456925;
}
.X84 {
background-color: #547f2d;
}
.X85 {
background-color: #5c8b32;
}
.X86 {
background-color: #598730;
}
.X87 {
background-color: #55812e;
}
.X88 {
background-color: #4f792b;
}
.X89 {
background-color: #4e762a;
}
.X8A {
background-color: #426424;
}
.X8B {
background-color: #496f28;
}
.X8C {
background-color: #406022;
}
.X8D {
background-color: #57852f;
}
.X8E {
background-color: #537e2d;
}
.X8F {
background-color: #609234;
}
.X90 {
background-color: #619334;
}
.X91 {
background-color: #476c26;
}
.X92 {
background-color: #669a37;
}
.X93 {
background-color: #486d27;
}
.X94 {
background-color: #588530;
}
.X95 {
background-color: #4c7429;
}
.X96 {
background-color: #4a7028;
}
.X97 {
background-color: #5a8931;
}
.X98 {
background-color: #4d752a;
}
.X99 {
background-color: #416323;
}
.X9A {
background-color: #496e27;
}
.X9B {
background-color: #5b8a31;
}
.X9C {
background-color: #5f9033;
}
.X9D {
background-color: #57842f;
}
.X9E {
background-color: #446725;
}
.X9F {
background-color: #5c8c32;
}
.XA0 {
background-color: #426423;
}
.XA1 {
background-color: #5b8931;
}
.XA2 {
background-color: #436624;
}
.XA3 {
background-color: #4b7229;
}
.XA4 {
background-color: #416223;
}
.XA5 {
background-color: #598830;
}
.XA6 {
background-color: #54802e;
}
.XA7 {
background-color: #3e5e21;
}
.XA8 {
background-color: #406123;
}
.XA9 {
background-color: #659a37;
}
.XAA {
background-color: #3f6022;
}
.XAB {
background-color: #3b5a20;
}
.XAC {
background-color: #74b44a;
}
.XAD {
background-color: #75b54b;
}
.XAE {
background-color: #8dbc5d;
}
.XAF {
background-color: #593d29;
}
.XB0 {
background-color: #966c4a;
}
.XB1 {
background-color: #79553a;
}
.XB2 {
background-color: #b9855c;
}
.XB3 {
background-color: #76b64c;
}
.XB4 {
background-color: #6cac42;
}
.XB5 {
background-color: #6c6c6c;
}
.XB6 {
background-color: #73b349;
}
.XB7 {
background-color: #8ab95a;
}
.XB8 {
background-color: #9ccb6c;
}
.XB9 {
background-color: #66a63c;
}
.XBA {
background-color: #81b051;
}
.XBB {
background-color: #64a43a;
}
.XBC {
background-color: #83b253;
}
.XBD {
background-color: #69a93f;
}
.XBE {
background-color: #71b147;
}
.XBF {
background-color: #878787;
}
.XC0 {
background-color: #745844;
}
.XC1 {
background-color: #6faf45;
}
.XC2 {
background-color: #5f9f35;
}
.XC3 {
background-color: #68a83e;
}
.XC4 {
background-color: #70b046;
}
.XC5 {
background-color: #62a238;
}
.XC6 {
background-color: #7ebe54;
}
.XC7 {
background-color: #93c263;
}
.XC8 {
background-color: #7fbf55;
}
.XC9 {
background-color: #6aaa40;
}
.XCA {
background-color: #90bf60;
}
.XCB {
background-color: #92c162;
}
.XCC {
background-color: #6dad43;
}
.XCD {
background-color: #67a73d;
}
.XCE {
background-color: #97c667;
}
.XCF {
background-color: #61a137;
}
.XD0 {
background-color: #57972d;
}
.XD1 {
background-color: #509026;
}
.XD2 {
background-color: #60a036;
}
.XD3 {
background-color: #6bab41;
}
.poly > div {
display: flex;
position: relative;
}
.poly > div > div {
height: 2vh;
position: relative;
}
@media screen and (orientation: portrait) {
.poly > div > div {
height: 2vw;
}
}
.r-1 {
width: 2vh;
}
@media screen and (orientation: portrait) {
.r-1 {
width: 2vw;
}
}
.r-2 {
width: 4vh;
}
@media screen and (orientation: portrait) {
.r-2 {
width: 4vw;
}
}
.r-3 {
width: 6vh;
}
@media screen and (orientation: portrait) {
.r-3 {
width: 6vw;
}
}
.r-4 {
width: 8vh;
}
@media screen and (orientation: portrait) {
.r-4 {
width: 8vw;
}
}
.r-5 {
width: 10vh;
}
@media screen and (orientation: portrait) {
.r-5 {
width: 10vw;
}
}
.r-6 {
width: 12vh;
}
@media screen and (orientation: portrait) {
.r-6 {
width: 12vw;
}
}
.r-7 {
width: 14vh;
}
@media screen and (orientation: portrait) {
.r-7 {
width: 14vw;
}
}
.r-8 {
width: 16vh;
}
@media screen and (orientation: portrait) {
.r-8 {
width: 16vw;
}
}
.r-9 {
width: 18vh;
}
@media screen and (orientation: portrait) {
.r-9 {
width: 18vw;
}
}
.r-10 {
width: 20vh;
}
@media screen and (orientation: portrait) {
.r-10 {
width: 20vw;
}
}
.control {
position: absolute;
height: 8vh;
width: 8vh;
margin: 0;
opacity: 0;
top: 4vh;
z-index: 2;
}
.control.control-pig {
left: 4vh;
}
.control.control-pig:checked ~ .stage .pig {
display: block;
}
.control.control-pig:checked ~ .icon-pig {
filter: none;
}
.control.control-steve {
left: 16vh;
}
.control.control-steve:checked ~ .stage .steve {
display: block;
}
.control.control-steve:checked ~ .icon-steve {
filter: none;
}
.control.control-terrain {
left: 28vh;
}
.control.control-terrain:checked ~ .stage .environment {
display: block;
}
.control.control-terrain:checked ~ .icon-terrain {
filter: none;
}
.icon {
top: 4vh;
z-index: 1;
filter: grayscale(100%);
}
.icon .r-1 {
width: 1vh;
}
.icon .r-2 {
width: 2vh;
}
.icon .r-3 {
width: 3vh;
}
.icon .r-4 {
width: 4vh;
}
.icon .r-5 {
width: 5vh;
}
.icon .r-6 {
width: 6vh;
}
.icon .r-7 {
width: 7vh;
}
.icon .r-8 {
width: 8vh;
}
.icon > div {
display: flex;
position: relative;
}
.icon > div > div {
height: 1vh;
position: relative;
}
.icon.icon-pig {
left: 4vh;
}
.icon.icon-steve {
left: 16vh;
}
.icon.icon-terrain {
left: 28vh;
}
@keyframes move {
50% {
offset-distance: 50%;
transform: rotateX(90deg) translateY(0);
}
55% {
offset-distance: 55%;
transform: rotateX(90deg) translateY(-200px);
}
60% {
offset-distance: 60%;
transform: rotateX(90deg) translateY(0);
}
100% {
offset-distance: 100%;
}
}
.reverse {
animation-direction: alternate-reverse !important;
}
.s__8__8__8 > div:nth-child(1) {
transform: rotateY(-90deg) translateZ(16vh) translateY(-8vh) translateX(0vh);
}
.s__8__8__8 > div:nth-child(2) {
transform: translateZ(8vh) translateX(-8vh) translateY(-8vh);
}
.s__8__8__8 > div:nth-child(3) {
transform: rotateY(90deg) translateZ(0vh) translateY(-8vh) translateX(0vh);
}
.s__8__8__8 > div:nth-child(4) {
transform: rotateY(180deg) translateZ(8vh) translateX(8vh) translateY(-8vh);
}
.s__8__8__8 > div:nth-child(5) {
transform: rotateX(90deg) translateZ(16vh) translateX(-8vh) translateY(0vh);
}
.s__8__8__8 > div:nth-child(6) {
transform: rotateX(90deg) translateZ(0vh) translateX(-8vh) translateY(0vh);
}
@media screen and (orientation: portrait) {
.s__8__8__8 > div:nth-child(1) {
transform: rotateY(-90deg) translateZ(16vw) translateY(-8vw) translateX(0vw);
}
.s__8__8__8 > div:nth-child(2) {
transform: translateZ(8vw) translateX(-8vw) translateY(-8vw);
}
.s__8__8__8 > div:nth-child(3) {
transform: rotateY(90deg) translateZ(0vw) translateY(-8vw) translateX(0vw);
}
.s__8__8__8 > div:nth-child(4) {
transform: rotateY(180deg) translateZ(8vw) translateX(8vw) translateY(-8vw);
}
.s__8__8__8 > div:nth-child(5) {
transform: rotateX(90deg) translateZ(16vw) translateX(-8vw) translateY(0vw);
}
.s__8__8__8 > div:nth-child(6) {
transform: rotateX(90deg) translateZ(0vw) translateX(-8vw) translateY(0vw);
}
}
.s__8__12__4 > div:nth-child(1) {
transform: rotateY(-90deg) translateZ(12vh) translateY(-12vh) translateX(0vh);
}
.s__8__12__4 > div:nth-child(2) {
transform: translateZ(4vh) translateX(-8vh) translateY(-12vh);
}
.s__8__12__4 > div:nth-child(3) {
transform: rotateY(90deg) translateZ(4vh) translateY(-12vh) translateX(0vh);
}
.s__8__12__4 > div:nth-child(4) {
transform: rotateY(180deg) translateZ(4vh) translateX(8vh) translateY(-12vh);
}
.s__8__12__4 > div:nth-child(5) {
transform: rotateX(90deg) translateZ(16vh) translateX(-8vh) translateY(0vh);
}
.s__8__12__4 > div:nth-child(6) {
transform: rotateX(90deg) translateZ(-8vh) translateX(-8vh) translateY(0vh);
}
@media screen and (orientation: portrait) {
.s__8__12__4 > div:nth-child(1) {
transform: rotateY(-90deg) translateZ(12vw) translateY(-12vw) translateX(0vw);
}
.s__8__12__4 > div:nth-child(2) {
transform: translateZ(4vw) translateX(-8vw) translateY(-12vw);
}
.s__8__12__4 > div:nth-child(3) {
transform: rotateY(90deg) translateZ(4vw) translateY(-12vw) translateX(0vw);
}
.s__8__12__4 > div:nth-child(4) {
transform: rotateY(180deg) translateZ(4vw) translateX(8vw) translateY(-12vw);
}
.s__8__12__4 > div:nth-child(5) {
transform: rotateX(90deg) translateZ(16vw) translateX(-8vw) translateY(0vw);
}
.s__8__12__4 > div:nth-child(6) {
transform: rotateX(90deg) translateZ(-8vw) translateX(-8vw) translateY(0vw);
}
}
.s__4__12__4 > div:nth-child(1) {
transform: rotateY(-90deg) translateZ(8vh) translateY(-12vh) translateX(0vh);
}
.s__4__12__4 > div:nth-child(2) {
transform: translateZ(4vh) translateX(-4vh) translateY(-12vh);
}
.s__4__12__4 > div:nth-child(3) {
transform: rotateY(90deg) translateZ(0vh) translateY(-12vh) translateX(0vh);
}
.s__4__12__4 > div:nth-child(4) {
transform: rotateY(180deg) translateZ(4vh) translateX(4vh) translateY(-12vh);
}
.s__4__12__4 > div:nth-child(5) {
transform: rotateX(90deg) translateZ(16vh) translateX(-4vh) translateY(0vh);
}
.s__4__12__4 > div:nth-child(6) {
transform: rotateX(90deg) translateZ(-8vh) translateX(-4vh) translateY(0vh);
}
@media screen and (orientation: portrait) {
.s__4__12__4 > div:nth-child(1) {
transform: rotateY(-90deg) translateZ(8vw) translateY(-12vw) translateX(0vw);
}
.s__4__12__4 > div:nth-child(2) {
transform: translateZ(4vw) translateX(-4vw) translateY(-12vw);
}
.s__4__12__4 > div:nth-child(3) {
transform: rotateY(90deg) translateZ(0vw) translateY(-12vw) translateX(0vw);
}
.s__4__12__4 > div:nth-child(4) {
transform: rotateY(180deg) translateZ(4vw) translateX(4vw) translateY(-12vw);
}
.s__4__12__4 > div:nth-child(5) {
transform: rotateX(90deg) translateZ(16vw) translateX(-4vw) translateY(0vw);
}
.s__4__12__4 > div:nth-child(6) {
transform: rotateX(90deg) translateZ(-8vw) translateX(-4vw) translateY(0vw);
}
}
.s__4__3__1 > div:nth-child(1) {
transform: rotateY(-90deg) translateZ(5vh) translateY(-2vh) translateX(1vh);
}
.s__4__3__1 > div:nth-child(2) {
transform: translateZ(2vh) translateX(-4vh) translateY(-2vh);
}
.s__4__3__1 > div:nth-child(3) {
transform: rotateY(90deg) translateZ(3vh) translateY(-2vh) translateX(-1vh);
}
.s__4__3__1 > div:nth-child(4) {
transform: rotateY(180deg) translateZ(1vh) translateX(4vh) translateY(-2vh);
}
.s__4__3__1 > div:nth-child(5) {
transform: rotateX(90deg) translateZ(3vh) translateX(-4vh) translateY(1vh);
}
.s__4__3__1 > div:nth-child(6) {
transform: rotateX(90deg) translateZ(-3vh) translateX(-4vh) translateY(1vh);
}
@media screen and (orientation: portrait) {
.s__4__3__1 > div:nth-child(1) {
transform: rotateY(-90deg) translateZ(5vw) translateY(-2vw) translateX(1vw);
}
.s__4__3__1 > div:nth-child(2) {
transform: translateZ(2vw) translateX(-4vw) translateY(-2vw);
}
.s__4__3__1 > div:nth-child(3) {
transform: rotateY(90deg) translateZ(3vw) translateY(-2vw) translateX(-1vw);
}
.s__4__3__1 > div:nth-child(4) {
transform: rotateY(180deg) translateZ(1vw) translateX(4vw) translateY(-2vw);
}
.s__4__3__1 > div:nth-child(5) {
transform: rotateX(90deg) translateZ(3vw) translateX(-4vw) translateY(1vw);
}
.s__4__3__1 > div:nth-child(6) {
transform: rotateX(90deg) translateZ(-3vw) translateX(-4vw) translateY(1vw);
}
}
.s__10__16__8 > div:nth-child(1) {
transform: rotateY(-90deg) translateZ(18vh) translateY(-16vh) translateX(0vh);
}
.s__10__16__8 > div:nth-child(2) {
transform: translateZ(8vh) translateX(-10vh) translateY(-16vh);
}
.s__10__16__8 > div:nth-child(3) {
transform: rotateY(90deg) translateZ(2vh) translateY(-16vh) translateX(0vh);
}
.s__10__16__8 > div:nth-child(4) {
transform: rotateY(180deg) translateZ(8vh) translateX(10vh) translateY(-16vh);
}
.s__10__16__8 > div:nth-child(5) {
transform: rotateX(90deg) translateZ(24vh) translateX(-10vh) translateY(0vh);
}
.s__10__16__8 > div:nth-child(6) {
transform: rotateX(90deg) translateZ(-8vh) translateX(-10vh) translateY(0vh);
}
@media screen and (orientation: portrait) {
.s__10__16__8 > div:nth-child(1) {
transform: rotateY(-90deg) translateZ(18vw) translateY(-16vw) translateX(0vw);
}
.s__10__16__8 > div:nth-child(2) {
transform: translateZ(8vw) translateX(-10vw) translateY(-16vw);
}
.s__10__16__8 > div:nth-child(3) {
transform: rotateY(90deg) translateZ(2vw) translateY(-16vw) translateX(0vw);
}
.s__10__16__8 > div:nth-child(4) {
transform: rotateY(180deg) translateZ(8vw) translateX(10vw) translateY(-16vw);
}
.s__10__16__8 > div:nth-child(5) {
transform: rotateX(90deg) translateZ(24vw) translateX(-10vw) translateY(0vw);
}
.s__10__16__8 > div:nth-child(6) {
transform: rotateX(90deg) translateZ(-8vw) translateX(-10vw) translateY(0vw);
}
}
.s__4__6__4 > div:nth-child(1) {
transform: rotateY(-90deg) translateZ(8vh) translateY(-6vh) translateX(0vh);
}
.s__4__6__4 > div:nth-child(2) {
transform: translateZ(4vh) translateX(-4vh) translateY(-6vh);
}
.s__4__6__4 > div:nth-child(3) {
transform: rotateY(90deg) translateZ(0vh) translateY(-6vh) translateX(0vh);
}
.s__4__6__4 > div:nth-child(4) {
transform: rotateY(180deg) translateZ(4vh) translateX(4vh) translateY(-6vh);
}
.s__4__6__4 > div:nth-child(5) {
transform: rotateX(90deg) translateZ(10vh) translateX(-4vh) translateY(0vh);
}
.s__4__6__4 > div:nth-child(6) {
transform: rotateX(90deg) translateZ(-2vh) translateX(-4vh) translateY(0vh);
}
@media screen and (orientation: portrait) {
.s__4__6__4 > div:nth-child(1) {
transform: rotateY(-90deg) translateZ(8vw) translateY(-6vw) translateX(0vw);
}
.s__4__6__4 > div:nth-child(2) {
transform: translateZ(4vw) translateX(-4vw) translateY(-6vw);
}
.s__4__6__4 > div:nth-child(3) {
transform: rotateY(90deg) translateZ(0vw) translateY(-6vw) translateX(0vw);
}
.s__4__6__4 > div:nth-child(4) {
transform: rotateY(180deg) translateZ(4vw) translateX(4vw) translateY(-6vw);
}
.s__4__6__4 > div:nth-child(5) {
transform: rotateX(90deg) translateZ(10vw) translateX(-4vw) translateY(0vw);
}
.s__4__6__4 > div:nth-child(6) {
transform: rotateX(90deg) translateZ(-2vw) translateX(-4vw) translateY(0vw);
}
}
.l__0__-10__0 {
transform: translateX(0vh) translateY(-20vh) translateZ(0vh);
}
@keyframes swing__0__-10__0 {
0% {
transform: translateX(0vh) translateY(-20vh) translateZ(0vh) rotateX(45deg);
}
100% {
transform: translateX(0vh) translateY(-20vh) translateZ(0vh) rotateX(-45deg);
}
}
@keyframes swing__0__-10__0__p {
0% {
transform: translateX(0vw) translateY(-20vw) translateZ(0vw) rotateX(45deg);
}
100% {
transform: translateX(0vw) translateY(-20vw) translateZ(0vw) rotateX(-45deg);
}
}
@keyframes bob__0__-10__0 {
0% {
transform: translateX(0vh) translateY(-20vh) translateZ(0vh) rotateX(0deg);
}
10% {
transform: translateX(0vh) translateY(-20vh) translateZ(0vh) rotateX(0deg);
}
20% {
transform: translateX(0vh) translateY(-20vh) translateZ(0vh) rotateX(-45deg);
}
30% {
transform: translateX(0vh) translateY(-20vh) translateZ(0vh) rotateX(-15deg);
}
40% {
transform: translateX(0vh) translateY(-20vh) translateZ(0vh) rotateX(-45deg);
}
50% {
transform: translateX(0vh) translateY(-20vh) translateZ(0vh) rotateX(-15deg);
}
60% {
transform: translateX(0vh) translateY(-20vh) translateZ(0vh) rotateX(-45deg);
}
70% {
transform: translateX(0vh) translateY(-20vh) translateZ(0vh) rotateX(0deg);
}
100% {
transform: translateX(0vh) translateY(-20vh) translateZ(0vh) rotateX(0deg);
}
}
@keyframes bob__0__-10__0__p {
0% {
transform: translateX(0vw) translateY(-20vw) translateZ(0vw) rotateX(0deg);
}
10% {
transform: translateX(0vw) translateY(-20vw) translateZ(0vw) rotateX(0deg);
}
20% {
transform: translateX(0vw) translateY(-20vw) translateZ(0vw) rotateX(-45deg);
}
30% {
transform: translateX(0vw) translateY(-20vw) translateZ(0vw) rotateX(-15deg);
}
40% {
transform: translateX(0vw) translateY(-20vw) translateZ(0vw) rotateX(-45deg);
}
50% {
transform: translateX(0vw) translateY(-20vw) translateZ(0vw) rotateX(-15deg);
}
60% {
transform: translateX(0vw) translateY(-20vw) translateZ(0vw) rotateX(-45deg);
}
70% {
transform: translateX(0vw) translateY(-20vw) translateZ(0vw) rotateX(0deg);
}
100% {
transform: translateX(0vw) translateY(-20vw) translateZ(0vw) rotateX(0deg);
}
}
.l__0__-10__0.swing {
animation: swing__0__-10__0 0.5s infinite linear alternate;
}
.l__0__-10__0.bob {
animation: bob__0__-10__0 2s infinite linear;
}
@media screen and (orientation: portrait) {
.l__0__-10__0 {
transform: translateX(0vw) translateY(-20vw) translateZ(0vw);
}
.l__0__-10__0.swing {
animation: swing__0__-10__0__p 0.5s infinite linear alternate;
}
.l__0__-10__0.bob {
animation: bob__0__-10__0__p 2s infinite linear;
}
}
.l__0__0__0 {
transform: translateX(0vh) translateY(0vh) translateZ(0vh);
}
@keyframes swing__0__0__0 {
0% {
transform: translateX(0vh) translateY(0vh) translateZ(0vh) rotateX(45deg);
}
100% {
transform: translateX(0vh) translateY(0vh) translateZ(0vh) rotateX(-45deg);
}
}
@keyframes swing__0__0__0__p {
0% {
transform: translateX(0vw) translateY(0vw) translateZ(0vw) rotateX(45deg);
}
100% {
transform: translateX(0vw) translateY(0vw) translateZ(0vw) rotateX(-45deg);
}
}
@keyframes bob__0__0__0 {
0% {
transform: translateX(0vh) translateY(0vh) translateZ(0vh) rotateX(0deg);
}
10% {
transform: translateX(0vh) translateY(0vh) translateZ(0vh) rotateX(0deg);
}
20% {
transform: translateX(0vh) translateY(0vh) translateZ(0vh) rotateX(-45deg);
}
30% {
transform: translateX(0vh) translateY(0vh) translateZ(0vh) rotateX(-15deg);
}
40% {
transform: translateX(0vh) translateY(0vh) translateZ(0vh) rotateX(-45deg);
}
50% {
transform: translateX(0vh) translateY(0vh) translateZ(0vh) rotateX(-15deg);
}
60% {
transform: translateX(0vh) translateY(0vh) translateZ(0vh) rotateX(-45deg);
}
70% {
transform: translateX(0vh) translateY(0vh) translateZ(0vh) rotateX(0deg);
}
100% {
transform: translateX(0vh) translateY(0vh) translateZ(0vh) rotateX(0deg);
}
}
@keyframes bob__0__0__0__p {
0% {
transform: translateX(0vw) translateY(0vw) translateZ(0vw) rotateX(0deg);
}
10% {
transform: translateX(0vw) translateY(0vw) translateZ(0vw) rotateX(0deg);
}
20% {
transform: translateX(0vw) translateY(0vw) translateZ(0vw) rotateX(-45deg);
}
30% {
transform: translateX(0vw) translateY(0vw) translateZ(0vw) rotateX(-15deg);
}
40% {
transform: translateX(0vw) translateY(0vw) translateZ(0vw) rotateX(-45deg);
}
50% {
transform: translateX(0vw) translateY(0vw) translateZ(0vw) rotateX(-15deg);
}
60% {
transform: translateX(0vw) translateY(0vw) translateZ(0vw) rotateX(-45deg);
}
70% {
transform: translateX(0vw) translateY(0vw) translateZ(0vw) rotateX(0deg);
}
100% {
transform: translateX(0vw) translateY(0vw) translateZ(0vw) rotateX(0deg);
}
}
.l__0__0__0.swing {
animation: swing__0__0__0 0.5s infinite linear alternate;
}
.l__0__0__0.bob {
animation: bob__0__0__0 2s infinite linear;
}
@media screen and (orientation: portrait) {
.l__0__0__0 {
transform: translateX(0vw) translateY(0vw) translateZ(0vw);
}
.l__0__0__0.swing {
animation: swing__0__0__0__p 0.5s infinite linear alternate;
}
.l__0__0__0.bob {
animation: bob__0__0__0__p 2s infinite linear;
}
}
.l__-6__0__0 {
transform: translateX(-12vh) translateY(0vh) translateZ(0vh);
}
@keyframes swing__-6__0__0 {
0% {
transform: translateX(-12vh) translateY(0vh) translateZ(0vh) rotateX(45deg);
}
100% {
transform: translateX(-12vh) translateY(0vh) translateZ(0vh) rotateX(-45deg);
}
}
@keyframes swing__-6__0__0__p {
0% {
transform: translateX(-12vw) translateY(0vw) translateZ(0vw) rotateX(45deg);
}
100% {
transform: translateX(-12vw) translateY(0vw) translateZ(0vw) rotateX(-45deg);
}
}
@keyframes bob__-6__0__0 {
0% {
transform: translateX(-12vh) translateY(0vh) translateZ(0vh) rotateX(0deg);
}
10% {
transform: translateX(-12vh) translateY(0vh) translateZ(0vh) rotateX(0deg);
}
20% {
transform: translateX(-12vh) translateY(0vh) translateZ(0vh) rotateX(-45deg);
}
30% {
transform: translateX(-12vh) translateY(0vh) translateZ(0vh) rotateX(-15deg);
}
40% {
transform: translateX(-12vh) translateY(0vh) translateZ(0vh) rotateX(-45deg);
}
50% {
transform: translateX(-12vh) translateY(0vh) translateZ(0vh) rotateX(-15deg);
}
60% {
transform: translateX(-12vh) translateY(0vh) translateZ(0vh) rotateX(-45deg);
}
70% {
transform: translateX(-12vh) translateY(0vh) translateZ(0vh) rotateX(0deg);
}
100% {
transform: translateX(-12vh) translateY(0vh) translateZ(0vh) rotateX(0deg);
}
}
@keyframes bob__-6__0__0__p {
0% {
transform: translateX(-12vw) translateY(0vw) translateZ(0vw) rotateX(0deg);
}
10% {
transform: translateX(-12vw) translateY(0vw) translateZ(0vw) rotateX(0deg);
}
20% {
transform: translateX(-12vw) translateY(0vw) translateZ(0vw) rotateX(-45deg);
}
30% {
transform: translateX(-12vw) translateY(0vw) translateZ(0vw) rotateX(-15deg);
}
40% {
transform: translateX(-12vw) translateY(0vw) translateZ(0vw) rotateX(-45deg);
}
50% {
transform: translateX(-12vw) translateY(0vw) translateZ(0vw) rotateX(-15deg);
}
60% {
transform: translateX(-12vw) translateY(0vw) translateZ(0vw) rotateX(-45deg);
}
70% {
transform: translateX(-12vw) translateY(0vw) translateZ(0vw) rotateX(0deg);
}
100% {
transform: translateX(-12vw) translateY(0vw) translateZ(0vw) rotateX(0deg);
}
}
.l__-6__0__0.swing {
animation: swing__-6__0__0 0.5s infinite linear alternate;
}
.l__-6__0__0.bob {
animation: bob__-6__0__0 2s infinite linear;
}
@media screen and (orientation: portrait) {
.l__-6__0__0 {
transform: translateX(-12vw) translateY(0vw) translateZ(0vw);
}
.l__-6__0__0.swing {
animation: swing__-6__0__0__p 0.5s infinite linear alternate;
}
.l__-6__0__0.bob {
animation: bob__-6__0__0__p 2s infinite linear;
}
}
.l__6__0__0 {
transform: translateX(12vh) translateY(0vh) translateZ(0vh);
}
@keyframes swing__6__0__0 {
0% {
transform: translateX(12vh) translateY(0vh) translateZ(0vh) rotateX(45deg);
}
100% {
transform: translateX(12vh) translateY(0vh) translateZ(0vh) rotateX(-45deg);
}
}
@keyframes swing__6__0__0__p {
0% {
transform: translateX(12vw) translateY(0vw) translateZ(0vw) rotateX(45deg);
}
100% {
transform: translateX(12vw) translateY(0vw) translateZ(0vw) rotateX(-45deg);
}
}
@keyframes bob__6__0__0 {
0% {
transform: translateX(12vh) translateY(0vh) translateZ(0vh) rotateX(0deg);
}
10% {
transform: translateX(12vh) translateY(0vh) translateZ(0vh) rotateX(0deg);
}
20% {
transform: translateX(12vh) translateY(0vh) translateZ(0vh) rotateX(-45deg);
}
30% {
transform: translateX(12vh) translateY(0vh) translateZ(0vh) rotateX(-15deg);
}
40% {
transform: translateX(12vh) translateY(0vh) translateZ(0vh) rotateX(-45deg);
}
50% {
transform: translateX(12vh) translateY(0vh) translateZ(0vh) rotateX(-15deg);
}
60% {
transform: translateX(12vh) translateY(0vh) translateZ(0vh) rotateX(-45deg);
}
70% {
transform: translateX(12vh) translateY(0vh) translateZ(0vh) rotateX(0deg);
}
100% {
transform: translateX(12vh) translateY(0vh) translateZ(0vh) rotateX(0deg);
}
}
@keyframes bob__6__0__0__p {
0% {
transform: translateX(12vw) translateY(0vw) translateZ(0vw) rotateX(0deg);
}
10% {
transform: translateX(12vw) translateY(0vw) translateZ(0vw) rotateX(0deg);
}
20% {
transform: translateX(12vw) translateY(0vw) translateZ(0vw) rotateX(-45deg);
}
30% {
transform: translateX(12vw) translateY(0vw) translateZ(0vw) rotateX(-15deg);
}
40% {
transform: translateX(12vw) translateY(0vw) translateZ(0vw) rotateX(-45deg);
}
50% {
transform: translateX(12vw) translateY(0vw) translateZ(0vw) rotateX(-15deg);
}
60% {
transform: translateX(12vw) translateY(0vw) translateZ(0vw) rotateX(-45deg);
}
70% {
transform: translateX(12vw) translateY(0vw) translateZ(0vw) rotateX(0deg);
}
100% {
transform: translateX(12vw) translateY(0vw) translateZ(0vw) rotateX(0deg);
}
}
.l__6__0__0.swing {
animation: swing__6__0__0 0.5s infinite linear alternate;
}
.l__6__0__0.bob {
animation: bob__6__0__0 2s infinite linear;
}
@media screen and (orientation: portrait) {
.l__6__0__0 {
transform: translateX(12vw) translateY(0vw) translateZ(0vw);
}
.l__6__0__0.swing {
animation: swing__6__0__0__p 0.5s infinite linear alternate;
}
.l__6__0__0.bob {
animation: bob__6__0__0__p 2s infinite linear;
}
}
.l__-2__12__0 {
transform: translateX(-4vh) translateY(24vh) translateZ(0vh);
}
@keyframes swing__-2__12__0 {
0% {
transform: translateX(-4vh) translateY(24vh) translateZ(0vh) rotateX(45deg);
}
100% {
transform: translateX(-4vh) translateY(24vh) translateZ(0vh) rotateX(-45deg);
}
}
@keyframes swing__-2__12__0__p {
0% {
transform: translateX(-4vw) translateY(24vw) translateZ(0vw) rotateX(45deg);
}
100% {
transform: translateX(-4vw) translateY(24vw) translateZ(0vw) rotateX(-45deg);
}
}
@keyframes bob__-2__12__0 {
0% {
transform: translateX(-4vh) translateY(24vh) translateZ(0vh) rotateX(0deg);
}
10% {
transform: translateX(-4vh) translateY(24vh) translateZ(0vh) rotateX(0deg);
}
20% {
transform: translateX(-4vh) translateY(24vh) translateZ(0vh) rotateX(-45deg);
}
30% {
transform: translateX(-4vh) translateY(24vh) translateZ(0vh) rotateX(-15deg);
}
40% {
transform: translateX(-4vh) translateY(24vh) translateZ(0vh) rotateX(-45deg);
}
50% {
transform: translateX(-4vh) translateY(24vh) translateZ(0vh) rotateX(-15deg);
}
60% {
transform: translateX(-4vh) translateY(24vh) translateZ(0vh) rotateX(-45deg);
}
70% {
transform: translateX(-4vh) translateY(24vh) translateZ(0vh) rotateX(0deg);
}
100% {
transform: translateX(-4vh) translateY(24vh) translateZ(0vh) rotateX(0deg);
}
}
@keyframes bob__-2__12__0__p {
0% {
transform: translateX(-4vw) translateY(24vw) translateZ(0vw) rotateX(0deg);
}
10% {
transform: translateX(-4vw) translateY(24vw) translateZ(0vw) rotateX(0deg);
}
20% {
transform: translateX(-4vw) translateY(24vw) translateZ(0vw) rotateX(-45deg);
}
30% {
transform: translateX(-4vw) translateY(24vw) translateZ(0vw) rotateX(-15deg);
}
40% {
transform: translateX(-4vw) translateY(24vw) translateZ(0vw) rotateX(-45deg);
}
50% {
transform: translateX(-4vw) translateY(24vw) translateZ(0vw) rotateX(-15deg);
}
60% {
transform: translateX(-4vw) translateY(24vw) translateZ(0vw) rotateX(-45deg);
}
70% {
transform: translateX(-4vw) translateY(24vw) translateZ(0vw) rotateX(0deg);
}
100% {
transform: translateX(-4vw) translateY(24vw) translateZ(0vw) rotateX(0deg);
}
}
.l__-2__12__0.swing {
animation: swing__-2__12__0 0.5s infinite linear alternate;
}
.l__-2__12__0.bob {
animation: bob__-2__12__0 2s infinite linear;
}
@media screen and (orientation: portrait) {
.l__-2__12__0 {
transform: translateX(-4vw) translateY(24vw) translateZ(0vw);
}
.l__-2__12__0.swing {
animation: swing__-2__12__0__p 0.5s infinite linear alternate;
}
.l__-2__12__0.bob {
animation: bob__-2__12__0__p 2s infinite linear;
}
}
.l__2__12__0 {
transform: translateX(4vh) translateY(24vh) translateZ(0vh);
}
@keyframes swing__2__12__0 {
0% {
transform: translateX(4vh) translateY(24vh) translateZ(0vh) rotateX(45deg);
}
100% {
transform: translateX(4vh) translateY(24vh) translateZ(0vh) rotateX(-45deg);
}
}
@keyframes swing__2__12__0__p {
0% {
transform: translateX(4vw) translateY(24vw) translateZ(0vw) rotateX(45deg);
}
100% {
transform: translateX(4vw) translateY(24vw) translateZ(0vw) rotateX(-45deg);
}
}
@keyframes bob__2__12__0 {
0% {
transform: translateX(4vh) translateY(24vh) translateZ(0vh) rotateX(0deg);
}
10% {
transform: translateX(4vh) translateY(24vh) translateZ(0vh) rotateX(0deg);
}
20% {
transform: translateX(4vh) translateY(24vh) translateZ(0vh) rotateX(-45deg);
}
30% {
transform: translateX(4vh) translateY(24vh) translateZ(0vh) rotateX(-15deg);
}
40% {
transform: translateX(4vh) translateY(24vh) translateZ(0vh) rotateX(-45deg);
}
50% {
transform: translateX(4vh) translateY(24vh) translateZ(0vh) rotateX(-15deg);
}
60% {
transform: translateX(4vh) translateY(24vh) translateZ(0vh) rotateX(-45deg);
}
70% {
transform: translateX(4vh) translateY(24vh) translateZ(0vh) rotateX(0deg);
}
100% {
transform: translateX(4vh) translateY(24vh) translateZ(0vh) rotateX(0deg);
}
}
@keyframes bob__2__12__0__p {
0% {
transform: translateX(4vw) translateY(24vw) translateZ(0vw) rotateX(0deg);
}
10% {
transform: translateX(4vw) translateY(24vw) translateZ(0vw) rotateX(0deg);
}
20% {
transform: translateX(4vw) translateY(24vw) translateZ(0vw) rotateX(-45deg);
}
30% {
transform: translateX(4vw) translateY(24vw) translateZ(0vw) rotateX(-15deg);
}
40% {
transform: translateX(4vw) translateY(24vw) translateZ(0vw) rotateX(-45deg);
}
50% {
transform: translateX(4vw) translateY(24vw) translateZ(0vw) rotateX(-15deg);
}
60% {
transform: translateX(4vw) translateY(24vw) translateZ(0vw) rotateX(-45deg);
}
70% {
transform: translateX(4vw) translateY(24vw) translateZ(0vw) rotateX(0deg);
}
100% {
transform: translateX(4vw) translateY(24vw) translateZ(0vw) rotateX(0deg);
}
}
.l__2__12__0.swing {
animation: swing__2__12__0 0.5s infinite linear alternate;
}
.l__2__12__0.bob {
animation: bob__2__12__0 2s infinite linear;
}
@media screen and (orientation: portrait) {
.l__2__12__0 {
transform: translateX(4vw) translateY(24vw) translateZ(0vw);
}
.l__2__12__0.swing {
animation: swing__2__12__0__p 0.5s infinite linear alternate;
}
.l__2__12__0.bob {
animation: bob__2__12__0__p 2s infinite linear;
}
}
.l__0__-2__10 {
transform: translateX(0vh) translateY(-4vh) translateZ(20vh);
}
@keyframes swing__0__-2__10 {
0% {
transform: translateX(0vh) translateY(-4vh) translateZ(20vh) rotateX(45deg);
}
100% {
transform: translateX(0vh) translateY(-4vh) translateZ(20vh) rotateX(-45deg);
}
}
@keyframes swing__0__-2__10__p {
0% {
transform: translateX(0vw) translateY(-4vw) translateZ(20vw) rotateX(45deg);
}
100% {
transform: translateX(0vw) translateY(-4vw) translateZ(20vw) rotateX(-45deg);
}
}
@keyframes bob__0__-2__10 {
0% {
transform: translateX(0vh) translateY(-4vh) translateZ(20vh) rotateX(0deg);
}
10% {
transform: translateX(0vh) translateY(-4vh) translateZ(20vh) rotateX(0deg);
}
20% {
transform: translateX(0vh) translateY(-4vh) translateZ(20vh) rotateX(-45deg);
}
30% {
transform: translateX(0vh) translateY(-4vh) translateZ(20vh) rotateX(-15deg);
}
40% {
transform: translateX(0vh) translateY(-4vh) translateZ(20vh) rotateX(-45deg);
}
50% {
transform: translateX(0vh) translateY(-4vh) translateZ(20vh) rotateX(-15deg);
}
60% {
transform: translateX(0vh) translateY(-4vh) translateZ(20vh) rotateX(-45deg);
}
70% {
transform: translateX(0vh) translateY(-4vh) translateZ(20vh) rotateX(0deg);
}
100% {
transform: translateX(0vh) translateY(-4vh) translateZ(20vh) rotateX(0deg);
}
}
@keyframes bob__0__-2__10__p {
0% {
transform: translateX(0vw) translateY(-4vw) translateZ(20vw) rotateX(0deg);
}
10% {
transform: translateX(0vw) translateY(-4vw) translateZ(20vw) rotateX(0deg);
}
20% {
transform: translateX(0vw) translateY(-4vw) translateZ(20vw) rotateX(-45deg);
}
30% {
transform: translateX(0vw) translateY(-4vw) translateZ(20vw) rotateX(-15deg);
}
40% {
transform: translateX(0vw) translateY(-4vw) translateZ(20vw) rotateX(-45deg);
}
50% {
transform: translateX(0vw) translateY(-4vw) translateZ(20vw) rotateX(-15deg);
}
60% {
transform: translateX(0vw) translateY(-4vw) translateZ(20vw) rotateX(-45deg);
}
70% {
transform: translateX(0vw) translateY(-4vw) translateZ(20vw) rotateX(0deg);
}
100% {
transform: translateX(0vw) translateY(-4vw) translateZ(20vw) rotateX(0deg);
}
}
.l__0__-2__10.swing {
animation: swing__0__-2__10 0.5s infinite linear alternate;
}
.l__0__-2__10.bob {
animation: bob__0__-2__10 2s infinite linear;
}
@media screen and (orientation: portrait) {
.l__0__-2__10 {
transform: translateX(0vw) translateY(-4vw) translateZ(20vw);
}
.l__0__-2__10.swing {
animation: swing__0__-2__10__p 0.5s infinite linear alternate;
}
.l__0__-2__10.bob {
animation: bob__0__-2__10__p 2s infinite linear;
}
}
.l__0__-1__14 {
transform: translateX(0vh) translateY(-2vh) translateZ(28vh);
}
@keyframes swing__0__-1__14 {
0% {
transform: translateX(0vh) translateY(-2vh) translateZ(28vh) rotateX(45deg);
}
100% {
transform: translateX(0vh) translateY(-2vh) translateZ(28vh) rotateX(-45deg);
}
}
@keyframes swing__0__-1__14__p {
0% {
transform: translateX(0vw) translateY(-2vw) translateZ(28vw) rotateX(45deg);
}
100% {
transform: translateX(0vw) translateY(-2vw) translateZ(28vw) rotateX(-45deg);
}
}
@keyframes bob__0__-1__14 {
0% {
transform: translateX(0vh) translateY(-2vh) translateZ(28vh) rotateX(0deg);
}
10% {
transform: translateX(0vh) translateY(-2vh) translateZ(28vh) rotateX(0deg);
}
20% {
transform: translateX(0vh) translateY(-2vh) translateZ(28vh) rotateX(-45deg);
}
30% {
transform: translateX(0vh) translateY(-2vh) translateZ(28vh) rotateX(-15deg);
}
40% {
transform: translateX(0vh) translateY(-2vh) translateZ(28vh) rotateX(-45deg);
}
50% {
transform: translateX(0vh) translateY(-2vh) translateZ(28vh) rotateX(-15deg);
}
60% {
transform: translateX(0vh) translateY(-2vh) translateZ(28vh) rotateX(-45deg);
}
70% {
transform: translateX(0vh) translateY(-2vh) translateZ(28vh) rotateX(0deg);
}
100% {
transform: translateX(0vh) translateY(-2vh) translateZ(28vh) rotateX(0deg);
}
}
@keyframes bob__0__-1__14__p {
0% {
transform: translateX(0vw) translateY(-2vw) translateZ(28vw) rotateX(0deg);
}
10% {
transform: translateX(0vw) translateY(-2vw) translateZ(28vw) rotateX(0deg);
}
20% {
transform: translateX(0vw) translateY(-2vw) translateZ(28vw) rotateX(-45deg);
}
30% {
transform: translateX(0vw) translateY(-2vw) translateZ(28vw) rotateX(-15deg);
}
40% {
transform: translateX(0vw) translateY(-2vw) translateZ(28vw) rotateX(-45deg);
}
50% {
transform: translateX(0vw) translateY(-2vw) translateZ(28vw) rotateX(-15deg);
}
60% {
transform: translateX(0vw) translateY(-2vw) translateZ(28vw) rotateX(-45deg);
}
70% {
transform: translateX(0vw) translateY(-2vw) translateZ(28vw) rotateX(0deg);
}
100% {
transform: translateX(0vw) translateY(-2vw) translateZ(28vw) rotateX(0deg);
}
}
.l__0__-1__14.swing {
animation: swing__0__-1__14 0.5s infinite linear alternate;
}
.l__0__-1__14.bob {
animation: bob__0__-1__14 2s infinite linear;
}
@media screen and (orientation: portrait) {
.l__0__-1__14 {
transform: translateX(0vw) translateY(-2vw) translateZ(28vw);
}
.l__0__-1__14.swing {
animation: swing__0__-1__14__p 0.5s infinite linear alternate;
}
.l__0__-1__14.bob {
animation: bob__0__-1__14__p 2s infinite linear;
}
}
.l__-3__7__5 {
transform: translateX(-6vh) translateY(14vh) translateZ(10vh);
}
@keyframes swing__-3__7__5 {
0% {
transform: translateX(-6vh) translateY(14vh) translateZ(10vh) rotateX(45deg);
}
100% {
transform: translateX(-6vh) translateY(14vh) translateZ(10vh) rotateX(-45deg);
}
}
@keyframes swing__-3__7__5__p {
0% {
transform: translateX(-6vw) translateY(14vw) translateZ(10vw) rotateX(45deg);
}
100% {
transform: translateX(-6vw) translateY(14vw) translateZ(10vw) rotateX(-45deg);
}
}
@keyframes bob__-3__7__5 {
0% {
transform: translateX(-6vh) translateY(14vh) translateZ(10vh) rotateX(0deg);
}
10% {
transform: translateX(-6vh) translateY(14vh) translateZ(10vh) rotateX(0deg);
}
20% {
transform: translateX(-6vh) translateY(14vh) translateZ(10vh) rotateX(-45deg);
}
30% {
transform: translateX(-6vh) translateY(14vh) translateZ(10vh) rotateX(-15deg);
}
40% {
transform: translateX(-6vh) translateY(14vh) translateZ(10vh) rotateX(-45deg);
}
50% {
transform: translateX(-6vh) translateY(14vh) translateZ(10vh) rotateX(-15deg);
}
60% {
transform: translateX(-6vh) translateY(14vh) translateZ(10vh) rotateX(-45deg);
}
70% {
transform: translateX(-6vh) translateY(14vh) translateZ(10vh) rotateX(0deg);
}
100% {
transform: translateX(-6vh) translateY(14vh) translateZ(10vh) rotateX(0deg);
}
}
@keyframes bob__-3__7__5__p {
0% {
transform: translateX(-6vw) translateY(14vw) translateZ(10vw) rotateX(0deg);
}
10% {
transform: translateX(-6vw) translateY(14vw) translateZ(10vw) rotateX(0deg);
}
20% {
transform: translateX(-6vw) translateY(14vw) translateZ(10vw) rotateX(-45deg);
}
30% {
transform: translateX(-6vw) translateY(14vw) translateZ(10vw) rotateX(-15deg);
}
40% {
transform: translateX(-6vw) t.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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