div+scss实现三维走出迷宫游戏代码
代码语言：html
所属分类：游戏
代码描述：div+scss实现三维走出迷宫游戏代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style type = 'text/scss'>
$blk: #1a0606;
$none: rgba(#fff,0);
$key: #BDBBAF;
$white: lighten($key,20);
$floor: #D73A4D;
$red: $floor;
$body: #4B4640;
$kk: rgba($key,.5);
$blk2: lighten($blk,5);
:root {
--white: #e6e0e0;
--floor: #D73A4D;
}
:root:has(#gfx1:checked) {
--white: #574444;
--floor: #69262e;
div:before, darkness {
display: none;
}
}
html {
font-size: clamp(6px, 1vh, 22px);
background: $blk;
}
@media (orientation: portrait) {
html {
font-size: .8vh;
}
}
body {
margin: 0;
text-align: center;
color: $none;
font-size: 2rem;
height: 100vh;
font-family: Arial, Helvetica, sans-serif;
& > div {
overflow: hidden;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
&:before {
content: '';
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
}
@media (min-width: 480px) {
&:before {
background: radial-gradient($none, rgba($blk,.7));
box-shadow: inset 0 1rem 3rem $blk,inset 0 -1rem 3rem $blk,inset 0 0 5rem $blk;
transform: translate3d(0,0,0);
}
}
}
content *, content *:before, content *:after {
box-sizing: border-box;
position: absolute;
content: '';
left: 0;
top: 0;
transform-style: preserve-3d;
}
}
content, room {
width: 100rem;
height: 100rem;
}
content {
margin: auto;
position: absolute;
perspective: 100rem;
display: block;
inset: 0;
left: -100rem;
right: -100rem;
@media (max-width: 480px) {
transform: scale(.8);
}
}
input {
position: relative;
z-index: 1;
margin-top: 1rem;
display: none;
}
#top-view:checked {
~ content > w {
transform: translate3d(50rem,200rem,-600rem) rotateX(-90deg) !important;
}
}
#bottom-floor:checked {
~ content > w > x > y > z:nth-of-type(1) room {
display: none;
}
}
w, x, y, z {
width: 100%;
height: 100%;
}
w {
transform-origin: 50rem -50rem 0;
transition: all 1s ease-in-out;
animation: enter 1s ease-in-out backwards;
transform: translate3d(0,100rem,0);
@keyframes enter {
0% {
transform: translate3d(50rem,300rem,-800rem) rotateX(-90deg);
}
}
}
y {
transform-origin: -50rem 0;
}
x {
transform-origin: 50rem 0 50rem;
}
z {
transform-origin: 0 0;
}
$starscolour: #fff,lighten($red,20 );
@function stars ($a, $b) {
$value: '#{random(100)}vw #{random(90)}vh '+ $b + ' ' + '#{nth($starscolour, random(length($starscolour)))}';
@for $i from 2 through $a {
$value: '#{$value} , #{random(100)}vw #{random(90)}vh '+ $b + ' ' + '#{nth($starscolour, random(length($starscolour)))}';
}
@return unquote($value);
}
$stars: stars(50, .1rem);
w {
&:before, &:after {
transform: translate3d(-500vw,-600vh, -1000rem) scale(10);
content: '';
width: .3rem;
height: .3rem;
background: #fff;
box-shadow: $stars;
right: 0;
margin: auto;
}
}
graphics, numbers {
bottom: 1rem;
left: 1rem;
position: absolute;
z-index: 2;
label {
padding: .5rem 1rem;
background: $blk;
color: $white;
border-radius: 1rem;
cursor: pointer;
font-size: 1.5rem;
}
}
#gfx2:checked ~ graphics > [for="gfx2"],
#gfx1:checked ~ graphics > [for="gfx1"],
#numon:checked ~ numbers > [for="numon"],
#numoff:checked ~ numbers > [for="numoff"] {
display: none;
}
numbers {
bottom: 1rem;
left: 14rem;
position: absolute;
z-index: 2;
}
:root:has(#numoff:checked) {
body, room {
color: #fff;
}
input {
display: inline;
}
}
.d-none {
display: none !important;
}
//@import "css-sig";
sig {
&, * {
height: 9.25em;
overflow: hidden;
border-radius: .5em;
}
position: absolute;
right: 1rem;
top: 1rem;
font-size: .5rem;
color: $white;
width: 10em;
transform: skewX(10deg) scaleY(.45) rotate(2deg);
mix-blend-mode: difference;
&:before, *:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5em;
height: 5em;
background: currentColor;
transform: translate3d(-2.5em,0,0) rotate(-45deg);
box-shadow: -3em 3em 0 0 currentColor;
border-radius: .5em 2em .5em 2em;
}
* {
width: 5em;
transform: translate3d(3.75em,0,0) scaleY(.95);
display: block !important;
&:before {
transform: translate3d(-3em,-2em,0) rotate(-45deg);
box-shadow: -3em 3em 0 0 currentColor, -6em 6em 0 0 currentColor;
border-radius: .5em;
}
}
}
//@import "maze";
room {
transform: translate3d(0,0,0) rotateX(90deg);
transform-origin: 0 0 0;
color: $none;
font-size: 30rem;
background: var(--floor);
&:before, &:after {
width: 100%;
height: 100%;
background: var(--white);
transform-origin: 0 0 0;
}
&:before {
transform: translate3d(0,0,100rem) rotateY(90deg);
}
&:after {
transform: translate3d(100rem,0,0) rotateY(-90deg);
}
}
z:nth-of-type(1) room {
&:nth-of-type(36), //
&:nth-of-type(37), //
&:nth-of-type(39), //
&:nth-of-type(40), //
&:nth-of-type(41), //
&:nth-of-type(42), //
&:nth-of-type(35), //
&:nth-of-type(28) {
&:after {
filter: brightness(.5);
}
}
&:nth-of-type(14), //
&:nth-of-type(6), //
&:nth-of-type(38), //
&:nth-of-type(5), //
&:nth-of-type(12), //
&:nth-of-type(26), //
&:nth-of-type(33) {
&:before {
filter: brightness(.5);
}
}
&:nth-of-type(22), //
&:nth-of-type(8), //
&:nth-of-type(38), //
&:nth-of-type(7), //
&:nth-of-type(21), //
&:nth-of-type(18), //
&:nth-of-type(17) {
&:after {
filter: brightness(.75);
}
}
&:nth-of-type(31), //
&:nth-of-type(14), //
&:nth-of-type(36), //
&:nth-of-type(22), //
&:nth-of-type(8), //
&:nth-of-type(16), //
&:nth-of-type(21), //
&:nth-of-type(35), //
&:nth-of-type(42), //
&:nth-of-type(28), //
&:nth-of-type(4) {
&:before {
filter: brightness(.75);
}
}
&:nth-of-type(1) {
transform: translate3d(-300rem, 0, -400rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(2) {
transform: translate3d(-200rem, 0, -400rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(3) {
transform: translate3d(-100rem, 0, -400rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(4) {
transform: translate3d(-100rem, 0, -400rem) rotateX(90deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(5) {
transform: translate3d(0,0,-400rem) rotateX(90deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(6) {
transform: translate3d(100rem,0,-300rem) rotateX(90deg) rotateZ(-90deg);
}
&:nth-of-type(7) {
transform: translate3d(200rem,0,-400rem) rotateX(90deg);
&:before {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(8) {
transform: translate3d(-300rem, 0, -200rem) rotateX(90deg) rotateZ(180deg);
&:before {
transform: translate3d(100rem, -100rem, 100rem) rotateY(90deg) rotateX(0deg);
}
}
&:nth-of-type(9) {
transform: translate3d(-300rem, 0, -300rem) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(10) {
transform: translate3d(-200rem, 0, -300rem) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(11) {
transform: translate3d(-100rem, 0, -300rem) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(12) {
transform: translate3d(0,0,-300rem) rotateX(90deg);
}
&:nth-of-type(13) {
transform: translate3d(100rem, 0, -300rem) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(14) {
transform: translate3d(300rem, 0, -300rem) rotateX(90deg) rotateZ(90deg);
&:before {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(15) {
transform: translate3d(-400rem, 0, -200rem) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(16) {
transform: translate3d(-200rem, 0, -100rem) rotateX(90deg) rotateZ(-180deg);
&:before {
transform: translate3d(0, 100rem, 100rem) rotateY(90deg) rotateX(90deg);
}
}
&:nth-of-type(17) {
transform: translate3d(-200rem,0,-100rem) rotateX(90deg) rotateZ(-90deg);
}
&:nth-of-type(18) {
transform: translate3d(0,0,-100rem) rotateX(90deg) rotateZ(-180deg);
&:after {
transform: translate3d(0,100rem,0) rotateY(-90deg) rotateX(-90deg);
}
&:before {
transform: translate3d(100rem,0,100rem) rotateY(90deg) rotateX(-90deg);
}
}
&:nth-of-type(19) {
transform: translate3d(0,0,-200rem) rotateX(90deg);
&:before {
display: none;
}
}
&:nth-of-type(20) {
transform: translate3d(100rem,0,-200rem) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(21) {
transform: translate3d(200rem, 0, -200rem) rotateX(90deg);
&:after {
transform: translate3d(-100rem,100rem,0) rotateY(-90deg) rotateX(-90deg);
}
&:before {
transform: translate3d(100rem,0,100rem) rotateY(90deg);
}
}
&:nth-of-type(22) {
transform: translate3d(-300rem, 0, 0) rotateX(90deg) rotateZ(180deg);
&:before {
transform: translate3d(100rem, -100rem, 100rem) rotateY(90deg) rotateX(0deg);
}
}
&:nth-of-type(23) {
transform: translate3d(-200rem, 0, 0) rotateX(90deg) rotateZ(-180deg);
&:before {
display: none;
}
}
&:nth-of-type(24) {
transform: translate3d(-200rem, 0, -100rem) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(25) {
transform: translate3d(-100rem, 0, -100rem) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(26) {
transform: translate3d(0,0,-100rem) rotateX(90deg);
}
&:nth-of-type(27) {
transform: translate3d(100rem,0,-100rem) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(28) {
transform: translate3d(300rem, 0, 0rem) rotateX(90deg) rotateZ(180deg);
}
&:nth-of-type(29) {
transform: translate3d(-400rem,0,0) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(30) {
transform: translate3d(-200rem, 0, 100rem) rotateX(90deg) rotateZ(-180deg);
&:before {
display: none;
}
}
&:nth-of-type(31) {
transform: translate3d(-200rem, 0, 0rem) rotateX(90deg) rotateZ(0deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(32) {
transform: translate3d(0,0,0) rotateX(90deg) rotateZ(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(34) {
transform: translate3d(100rem,0,0) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(35) {
transform: translate3d(300rem, 0, 100rem) rotateX(90deg) rotateZ(180deg);
}
&:nth-of-type(36) {
transform: translate3d(-300rem, 0, 100rem) rotateX(90deg) rotateZ(90deg);
&:before {
transform: translate3d(0, 100rem, 100rem) rotateY(90deg) rotateX(90deg);
}
}
&:nth-of-type(37) {
transform: translate3d(-200rem, 0, 100rem) rotateX(90deg) rotateZ(90deg);
&:before {
display: none;
}
}
&:nth-of-type(38) {
transform: translate3d(-200rem, 0, 200rem) rotateX(90deg) rotateZ(-90deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(39) {
transform: translate3d(0,0,100rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(40) {
transform: translate3d(100rem,0,200rem) rotateX(90deg) rotateZ(180deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(41) {
transform: translate3d(200rem, 0, 200rem) rotateX(90deg) rotateZ(180deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
&:before {
display: none;
}
}
&:nth-of-type(42) {
transform: translate3d(300rem, 0, 200rem) rotateX(90deg) rotateZ(180deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
}
z:nth-of-type(2) room {
transform: translate3d(0,100rem,0) rotateX(90deg);
&:nth-of-type(36), //
&:nth-of-type(37), //
&:nth-of-type(39), //
&:nth-of-type(40), //
&:nth-of-type(41), //
&:nth-of-type(42), //
&:nth-of-type(38), //
&:nth-of-type(2), //
&:nth-of-type(3) {
&:after {
filter: brightness(.5);
}
}
&:nth-of-type(14), //
&:nth-of-type(6), //
&:nth-of-type(38), //
&:nth-of-type(5), //
&:nth-of-type(12), //
&:nth-of-type(26), //
&:nth-of-type(33), //
&:nth-of-type(11), //
&:nth-of-type(16), //
&:nth-of-type(24), //
&:nth-of-type(25), //
&:nth-of-type(27) {
&:before {
filter: brightness(.5);
}
}
&:nth-of-type(1), //
&:nth-of-type(4), //
&:nth-of-type(10), //
&:nth-of-type(14), //
&:nth-of-type(22), //
&:nth-of-type(8), //
&:nth-of-type(7), //
&:nth-of-type(21), //
&:nth-of-type(17), //
&:nth-of-type(27) {
&:after {
filter: brightness(.75);
}
}
&:nth-of-type(15), //
&:nth-of-type(14), //
&:nth-of-type(36), //
&:nth-of-type(22), //
&:nth-of-type(21), //
&:nth-of-type(35), //
&:nth-of-type(42), //
&:nth-of-type(28), //
&:nth-of-type(37), //
&:nth-of-type(38), //
&:nth-of-type(39) {
&:before {
filter: brightness(.75);
}
}
&:nth-of-type(1) {
transform: translate3d(-300rem, 100rem, -400rem) rotateX(90deg) rotateZ(90deg);
&:after {
transform: translate3d(100rem,100rem,0) rotateY(-90deg) rotateX(90deg);
}
}
&:nth-of-type(2) {
transform: translate3d(-200rem, 100rem, -400rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(3) {
transform: translate3d(-100rem, 100rem, -400rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(4) {
transform: translate3d(0, 100rem, -400rem) rotateX(90deg) rotateZ(90deg);
&:after {
transform: translate3d(0,100rem,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(5) {
transform: translate3d(0,100rem,-300rem) rotateX(90deg) rotateZ(-90deg);
}
&:nth-of-type(6) {
transform: translate3d(100rem,100rem,-300rem) rotateX(90deg) rotateZ(-90deg);
}
&:nth-of-type(7) {
transform: translate3d(200rem,100rem,-400rem) rotateX(90deg);
&:before {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(8) {
transform: translate3d(-300rem, 100rem, -200rem) rotateX(90deg) rotateZ(180deg);
&:before {
transform: translate3d(0, 0, 100rem) rotateY(90deg) rotateX(90deg);
}
}
&:nth-of-type(9) {
transform: translate3d(-300rem, 100rem, -300rem) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(10) {
transform: translate3d(-200rem, 100rem, -300rem) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(11) {
transform: translate3d(0, 100rem, -300rem) rotateX(90deg) rotateZ(90deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(12) {
transform: translate3d(100rem,100rem,-300rem) rotateX(90deg) rotateZ(90deg);
&:after {
display: none;
}
}
&:nth-of-type(13) {
transform: translate3d(200rem, 100rem, -300rem) rotateX(90deg) rotateZ(90deg);
&:before {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(14) {
transform: translate3d(200rem, 100rem, -300rem) rotateX(90deg);
}
&:nth-of-type(15) {
transform: translate3d(-400rem, 100rem, -200rem) rotateX(90deg);
&:after {
display: none;
}
}
&:nth-of-type(16) {
transform: translate3d(-300rem, 100rem, -100rem) rotateX(90deg) rotateZ(-90deg);
}
&:nth-of-type(17) {
transform: translate3d(-200rem,100rem,-100rem) rotateX(90deg) rotateZ(-90deg);
&:after {
transform: translate3d(0, 100rem, 100rem) rotateY(90deg) rotateX(90deg);
}
}
&:nth-of-type(18) {
transform: translate3d(-100rem,100rem,-100rem) rotateX(90deg) rotateZ(-90deg);
&:after {
transform: translate3d(0, 100rem, 100rem) rotateY(90deg) rotateX(90deg);
}
}
&:nth-of-type(19) {
transform: translate3d(100rem,100rem,-200rem) rotateX(90deg) rotateZ(90deg);
&:before {
display: none;
}
}
&:nth-of-type(20) {
transform: translate3d(200rem,100rem,-200rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(21) {
transform: translate3d(200rem, 100rem, -200rem) rotateX(90deg);
&:before {
display: none;
}
}
&:nth-of-type(22) {
transform: translate3d(-300rem, 100rem, 0) rotateX(90deg) rotateZ(180deg);
&:before {
transform: translate3d(100rem, -100rem, 100rem) rotateY(90deg) rotateX(0deg);
}
}
&:nth-of-type(23) {
transform: translate3d(-200rem, 100rem, 0) rotateX(90deg) rotateZ(-180deg);
&:before {
display: none;
}
}
&:nth-of-type(24) {
transform: translate3d(-100rem, 100rem, -100rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(25) {
transform: translate3d(0, 100rem, -100rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(26) {
transform: translate3d(100rem,100rem,-100rem) rotateX(90deg) rotateZ(90deg);
&:after {
display: none;
}
}
&:nth-of-type(27) {
transform: translate3d(200rem,100rem,-100rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(28) {
transform: translate3d(300rem, 100rem, 0rem) rotateX(90deg) rotateZ(180deg);
}
&:nth-of-type(29) {
transform: translate3d(-400rem,100rem,0) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(30) {
transform: translate3d(-200rem, 100rem, 100rem) rotateX(90deg) rotateZ(-180deg);
&:before {
display: none;
}
}
&:nth-of-type(31) {
transform: translate3d(-100rem, 100rem, 0rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(32) {
transform: translate3d(-100rem,100rem,0) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(34) {
transform: translate3d(100rem,100rem,0) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(35) {
transform: translate3d(300rem, 100rem, 100rem) rotateX(90deg) rotateZ(180deg);
}
&:nth-of-type(36) {
transform: translate3d(-300rem, 100rem, 100rem) rotateX(90deg) rotateZ(90deg);
&:before {
transform: translate3d(0, 100rem, 100rem) rotateY(90deg) rotateX(90deg);
}
}
&:nth-of-type(37) {
transform: translate3d(-200rem, 100rem, 100rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(38) {
transform: translate3d(-100rem, 100rem, 100rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(39) {
transform: translate3d(0,100rem,100rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(40) {
transform: translate3d(100rem,100rem,200rem) rotateX(90deg) rotateZ(180deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(41) {
transform: translate3d(200rem, 100rem, 200rem) rotateX(90deg) rotateZ(180deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
&:before {
display: none;
}
}
&:nth-of-type(42) {
transform: translate3d(300rem, 100rem, 200rem) rotateX(90deg) rotateZ(180deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
}
//@import "buttons";
buttons {
position: absolute;
bottom: 0;
right: 0;
transform: translate3d(0,0,0);
width: 40rem;
height: 30rem;
z-index: 2;
label {
font-size: 3rem;
border-radius: 1rem;
padding: 1em;
color: $white;
cursor: pointer;
font-weight: bold;
width: 3em;
height: 3em;
transition: all .15s ease-in-out;
position: absolute;
box-sizing: border-box;
background: $body;
border: .2rem solid $blk;
&.leftb {
bottom: 1rem;
right: 21rem;
}
&.rightb {
bottom: 1rem;
right: 1rem;
}
&.upb {
bottom: 11rem;
right: 11rem;
}
&.downb {
bottom: 1rem;
right: 11rem;
}
&:before, &:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
border-radius: 1rem;
left: 0;
right: 0;
top: 0;
}
&:after {
content: '\2191';
font-size: 4rem;
}
&.leftb:after {
content: '\2190';
}
&.rightb:after {
content: '\2192';
}
&.downb:after {
content: '\2193';
}
&:hover, &:focus, &:active {
transform: translate3d(0,.5rem,-10rem) scale(.98);
color: $blk;
}
}
}
@supports not (-webkit-touch-callout: none) {
#gfx2:checked ~ {
@media (min-width: 480px) {
buttons {
label {
text-shadow: 0 0 .2rem currentColor, 0 0 .2rem currentColor, 0 0 .2rem currentColor, 0 0 .2rem currentColor;
border: none;
color: $body;
&:before {
transform: translate3d(0, 0, -.6rem);
background: linear-gradient($kk, rgba($body,.5)), //
linear-gradient(90deg, lighten($kk,10), rgba($body,.5)), //
conic-gradient(from 20deg, currentColor, $kk, currentColor, currentColor, currentColor, $kk, currentColor,currentColor,currentColor, $kk, currentColor,currentColor,currentColor, $kk, currentColor, currentColor,currentColor), $key;
box-shadow: .5rem .5rem 1rem $blk;
}
&:after {
transform: translate3d( 0, -.5rem, -.3rem) scale(.75);
background: radial-gradient( rgba($body,.5), $key), $key;
box-shadow: inset 0 0 .5rem lighten($kk,10), 0 0 .5rem lighten($kk,10);
}
}
}
}
}
}
.dead {
filter: brightness(.8);
}
//@import "movement";
x, y, z, room {
transition: all 1s ease-in-out;
}
.upb, .downb, .rightb, .leftb, .dead {
display: none;
}
#original:checked {
~ buttons > {
.rb1, .lb1 {
display: block;
}
}
}
// <- left
#left1:checked {
~ content > w > x {
transform: rotateY(-90deg);
}
~ buttons > {
.rb4, .lb2 {
display: block;
}
}
}
// <- backwards
#left2:checked {
~ content > w > x {
transform: rotateY(-180deg);
}
~ buttons > {
.rb5, .lb3 {
display: block;
}
}
}
// <-- right
#left3:checked {
~ content > w > x {
transform: rotateY(-270deg);
}
~ buttons > {
.rb6, .lb4 {
display: block;
}
}
}
// <- start
#left4:checked {
~ content > w > x {
animation: killrotate 1s ease-in-out;
@keyframes killrotate {
0% {
transform: rotateY(-270deg);
}
99% {
transform: rotateY(-360deg);
}
100% {
transform: rotateY(0deg);
}
}
}
~ buttons > {
.rb1, .lb1 {
display: block;
}
}
}
// -> right
#right1:checked {
~ content > w > x {
transform: rotateY(90deg);
}
~ buttons > {
.rb2, .lb4 {
display: block;
}
}
}
// -> backwards
#right2:checked {
~ content > w > x {
transform: rotateY(180deg);
}
~ buttons > {
.rb3, .lb5 {
display: block;
}
}
}
// -> left
#right3:checked {
~ content > w > x {
transform: rotateY(270deg);
}
~ buttons > {
.rb4, .lb6 {
display: block;
}
}
}
// -> start
#right4:checked {
~ content > w > x {
animation: killrotate2 1s ease-in-out;
@keyframes killrotate2 {
0% {
transform: rotateY(270deg);
}
99% {
transform: rotateY(360deg);
}
100% {
transform: rotateY(0deg);
}
}
}
~ buttons > {
.rb1, .lb1 {
display: block;
}
}
}
// swap them
#left2:checked, #left3:checked, #right1:checked, #right2:checked {
~ buttons > {
.upb {
bottom: 1rem;
&:after {
content: '\2193';
}
}
.downb {
bottom: 11rem;
&:after {
content: '\2191';
}
}
}
}
// z loop
@for $i from 0 through 7 {
#z-#{$i}:checked {
~ content > w > x > y > z {
transform: translate3d(0,0,(($i - 2 ) * 100rem));
}
~ buttons > {
.upb[for="z-#{$i + 1}"], .downb[for="z-#{$i - 1}"] {
display: block;
}
}
}
}
// x loop
@for $i from 0 through 9 {
#x-#{$i}:checked {
~ content > w > x > y {
transform: translate3d((($i - 3) * 100rem),0,0);
}
~ buttons > {
.upb[for="x-#{$i + 1}"], .downb[for="x-#{$i - 1}"] {
display: block;
}
}
}
}
#left2, #left4, #original, #right2, #right4 {
&:checked ~ buttons > {
.bx {
display: none !important;
}
}
}
#left1, #left3, #right1, #right3 {
&:checked ~ buttons > {
.bz {
display: none !important;
}
}
}
//@import "movement-blockers";
body:has(.ilower:checked) {
#z-2:checked ~ #x-3:checked ~ .x-rotation:checked,
#z-3:checked ~ #x-3:checked ~ .x-rotation:checked,
#z-5:checked ~ #x-3:checked ~ .x-rotation:checked,
#z-2:checked ~ #x-6:checked ~ .x-rotation:checked,
#z-2:checked ~ #x-2:checked ~ .x-rotation:checked,
#z-3:checked ~ #x-2:checked ~ .x-rotation:checked,
#z-6:checked ~ #x-4:checked ~ .x-rotation:checked {
~ buttons > {
.upb, .downb {
display: none;
}
.upb[for="x-8"], .downb[for="x-8"] {
display: block;
}
}
}
//just down blocked x
#z-4:checked ~ #x-3:checked ~ .x-rotation:checked,
#z-1:checked ~ #x-3:checked ~ .x-rotation:checked,
#z-2:checked ~ #x-4:checked ~ .x-rotation:checked,
#z-3:checked ~ #x-4:checked ~ .x-rotation:checked,
#z-1:checked ~ #x-6:checked ~ .x-rotation:checked,
#z-2:checked ~ #x-7:checked ~ .x-rotation:checked,
#z-3:checked ~ #x-7:checked ~ .x-rotation:checked,
#z-4:checked ~ #x-7:checked ~ .x-rotation:checked,
#z-5:checked ~ #x-4:checked ~ .x-rotation:checked,
#z-6:checked ~ #x-1:checked ~ .x-rotation:checked {
~ buttons > {
.downb {
display: none;
}
.downb[for="x-8"] {
display: block;
}
}
}
// just up blocked x
#z-6:checked ~ #x-3:checked ~ .x-rotation:checked,
#z-1:checked ~ #x-2:checked ~ .x-rotation:checked,
#z-1:checked ~ #x-5:checked ~ .x-rotation:checked,
#z-2:checked ~ #x-5:checked ~ .x-rotation:checked,
#z-3:checked ~ #x-6:checked ~ .x-rotation:checked,
#z-4:checked ~ #x-6:checked ~ .x-rotation:checked,
#z-5:checked ~ #x-2:checked ~ .x-rotation:checked,
#z-4:checked ~ #x-2:checked ~ .x-rotation:checked {
~ buttons > {
.upb {
display: none;
}
.upb[for="x-8"] {
display: block;
}
}
}
// walls z
// walls z
// walls z
//up and down blocked z
#z-1:checked ~ #x-4:checked ~ .z-rotation:checked,
#z-3:checked ~ #x-5:checked ~ .z-rotation:checked,
#z-4:checked ~ #x-4:checked ~ .z-rotation:checked,
#z-4:checked ~ #x-5:checked ~ .z-rotation:checked,
#z-5:checked ~ #x-6:checked ~ .z-rotation:checked,
#z-5:checked ~ #x-5:checked ~ .z-rotation:checked,
#z-6:checked ~ #x-2:checked ~ .z-rotation:checked {
~ buttons > {
.upb, .downb {
display: none;
}
.upb[for="z-7"], .downb[for="z-7"] {
display: block;
}
}
}
//up blocked z
#z-2:checked ~ #x-5:checked ~ .z-rotation:checked,
#z-3:checked ~ #x-4:checked ~ .z-rotation:checked,
#z-3:checked ~ #x-2:checked ~ .z-rotation:checked,
#z-4:checked ~ #x-6:checked ~ .z-rotation:checked,
#z-5:checked ~ #x-7:checked ~ .z-rotation:checked,
#z-5:checked ~ #x-2:checked ~ .z-rotation:checked {
~ buttons > {
.upb {
display: none;
}
.upb[for="z-7"] {
display: block;
}
}
}
//down blocked z
#z-2:checked ~ #x-4:checked ~ .z-rotation:checked,
#z-5:checked ~ #x-4:checked ~ .z-rotation:checked,
#z-5:checked ~ #x-1:checked ~ .z-rotation:checked,
#z-4:checked ~ #x-2:checked ~ .z-rotation:checked {
~ buttons > {
.downb {
display: none;
}
.downb[for="z-7"] {
display: block;
}
}
}
}
body:has(.iupper:checked) {
/* background: blue;*/
/// walls x
/// walls x
/// walls x
// up and down blocked x
// z5 x4 needs fixing
#z-5:checked ~ #x-1:checked ~ .x-rotation:checked,
#z-3:checked ~ #x-1:checked ~ .x-rotation:checked,
#z-2:checked ~ #x-1:checked ~ .x-rotation:checked,
#z-2:checked ~ #x-2:checked ~ .x-rotation:checked,
#z-4:checked ~ #x-4:checked ~ .x-rotation:checked,
#z-2:checked ~ #x-3:checked ~ .x-rotation:checked {
~ buttons > {
.upb, .downb {
display: none;
}
.upb[for="x-8"], .downb[for="x-8"] {
display: block;
}
}
}
//just down blocked x
#z-1:checked ~ #x-3:checked ~ .x-rotation:checked,
#z-2:checked ~ #x-4:checked ~ .x-rotation:checked,
#z-2:checked ~ #x-7:checked ~ .x-rotation:checked,
#z-3:checked ~ #x-7:checked ~ .x-rotation:checked,
#z-6:checked ~ #x-5:checked ~ .x-rotation:checked,
#z-3:checked ~ #x-2:checked ~ .x-rotation:checked,
#z-5:checked ~ #x-2:checked ~ .x-rotation:checked,
#z-5:checked ~ #x-4:checked ~ .x-rotation:checked,
#z-4:checked ~ #x-5:checked ~ .x-rotation:checked,
#z-6:checked ~ #x-1:checked ~ .x-rotation:checked {
~ buttons > {
.downb {
display: none;
}
.downb[for="x-8"] {
display: block;
}
}
}
// just up blocked x
#z-5:checked ~ #x-3:checked ~ .x-rotation:checked,
#z-4:checked ~ #x-3:checked ~ .x-rotation:checked,
#z-4:checked ~ #x-7:checked ~ .x-rotation:checked,
#z-1:checked ~ #x-2:checked ~ .x-rotation:checked,
#z-3:checked ~ #x-6:checked ~ .x-rotation:checked,
#z-6:checked ~ #x-4:checked ~ .x-rotation:checked,
#z-6:checked ~ #x-7:checked ~ .x-rotation:checked,
#z-2:checked ~ #x-6:checked ~ .x-rotation:checked {
~ buttons > {
.upb {
display: none;
}
.upb[for="x-8"] {
display: block;
}
}
}
// walls z
// walls z
// walls z
//up and down blocked z
#z-1:checked ~ #x-4:checked ~ .z-rotation:checked,
#z-1:checked ~ #x-5:checked ~ .z-rotation:checked,
#z-2:checked ~ #x-4:checked ~ .z-rotation:checked,
#z-3:checked ~ #x-2:checked ~ .z-rotation:checked,
#z-3:checked ~ #x-5:checked ~ .z-rotation:checked,
#z-5:checked ~ #x-6:checked ~ .z-rotation:checked,
#z-2:checked ~ #x-5:checked ~ .z-rotation:checked,
#z-5:checked ~ #x-2:checked ~ .z-rotation:checked,
#z-1:checked ~ #x-6:checked ~ .z-rotation:checked,
#z-4:checked ~ #x-2:checked ~ .z-rotation:checked,
#z-6:checked ~ #x-6:checked ~ .z-rotation:checked,
#z-6:checked ~ #x-5:checked ~ .z-rotation:checked,
#z-6:checked ~ #x-2:checked ~ .z-rotation:checked,
#z-4:checked ~ #x-6:checked ~ .z-rotation:checked,
#z-6:checked ~ #x-3:checked ~ .z-rotation:checked,
#z-6:checked ~ #x-4:checked ~ .z-rotation:checked,
#z-3:checked ~ #x-4:checked ~ .z-rotation:checked {
~ buttons > {
.upb, .downb {
display: none;
}
.upb[for="z-7"], .downb[for="z-7"] {
display: block;
}
}
}
//up blocked z
#z-3:checked ~ #x-3:checked ~ .z-rotation:checked,
#z-2:checked ~ #x-2:checked ~ .z-rotation:checked,
#z-3:checked ~ #x-6:checked ~ .z-rotation:checked,
#z-4:checked ~ #x-7:checked ~ .z-rotation:checked,
#z-5:checked ~ #x-3:checked ~ .z-rotation:checked,
#z-5:checked ~ #x-5:checked ~ .z-rotation:checked,
#z-6:checked ~ #x-7:checked ~ .z-rotation:checked,
#z-5:checked ~ #x-4:checked ~ .z-rotation:checked {
~ buttons > {
.upb {
display: none;
}
.upb[for="z-7"] {
display: block;
}
}
}
//down blocked z
#z-2:checked ~ #x-6:checked ~ .z-rotation:checked,
#z-4:checked ~ #x-3:checked ~ .z-rotation:checked,
#z-4:checked ~ #x-5:checked ~ .z-rotation:checked,
#z-4:checked ~ #x-4:checked ~ .z-rotation:checked,
#z-5:checked ~ #x-7:checked ~ .z-rotation:checked {
~ buttons > {
.downb {
display: none;
}
.downb[for="z-7"] {
display: block;
}
}
}
}
#ilift7:checked ~ #z-2:checked ~ #x-2:checked ~ .z-rotation:checked {
~ buttons > {
.upb {
display: none;
}
.upb[for="z-7"] {
display: block;
}
}
}
//@import "lifts";
.lift {
background: none;
*, *:before, *:after {
transform-origin: 0 0 0;
}
lift, floor {
width: 100%;
height: 100%;
}
lift {
transform: translate3d(0,0,0);
transition: all 1s ease-in-out;
&:before {
width: 100%;
height: 100%;
background: var(--white);
transform-origin: 0 0 0;
transform: translate3d(0,0,100rem) rotateY(90deg) rotateX(90deg);
filter: brightness(.75);
}
}
&.lower lift {
transform: translate3d(0,0,-100rem);
}
label {
background: darken($red,20);
height: 5rem;
width: 5rem;
cursor: pointer;
transform: translate3d(47.5rem,1.25rem, 25rem) rotateX(90deg);
border-radius: 50%;
transition: all 1s ease-in-out;
pointer-events: none;
&:before, &:after {
height: 5rem;
width: 5rem;
transform: translate3d(0, 0, .25rem);
border-radius: 50%;
background: darken($red,10);
}
&:after {
transform: translate3d(0, 0, .5rem);
}
&:hover, &:focus {
transform: translate3d(47.5rem,.9rem, 25rem) rotateX(90deg);
}
}
@keyframes light {
90% {
background: lighten($red,10);
box-shadow: inset 0 0 3rem $red, 0 0 5rem $red, 0 0 2rem $red;
}
100% {
background: lighten($red,10);
box-shadow: inset 0 0 1rem $blk,inset 0 0 3rem $red, 0 0 2rem $red;
}
}
floor {
background: var(--floor);
&:before, &:after {
width: 10rem;
transform: translate3d( 45rem, .5rem, 0) rotateX(90deg);
background: $body;
height: 33rem;
border-radius: 0 0 5rem 5rem;
}
&:before {
transform: translate3d( 45rem, .1rem, 0) rotateX(90deg);
background: $blk;
}
&:nth-of-type(1) {
border-radius: 1rem;
background: darken($body,10);
}
&:nth-of-type(2) {
transform: translate3d(0,0,100rem);
&:before, &:after {
display: none;
}
}
}
}
body:has(#gfx2:checked) {
@media (min-width: 480px) {
.lift {
label {
box-shadow: inset 0 0 1rem $blk;
&:hover, &:focus {
box-shadow: inset 0 0 3rem $blk;
}
}
}
floor {
&:nth-of-type(1) {
box-shadow: inset 0 0 0 2rem $body, inset -1rem -1rem 0 3rem darken($floor,10), inset 1rem 1rem 0 3rem lighten($floor,10);
background: repeating-linear-gradient(to right, $body, $body 1rem, $none 1rem, $none 2.6rem);
}
}
}
}
//upper level
#ilift5:checked ~ content > w {
transform: translate3d(0,-10rem,0);
> x > y > z > room > #lift5 {
transform: translate3d(0,0,-100rem);
}
}
#ilift2:checked ~ content > w {
transform: translate3d(0,-10rem,0);
> x > y > z > room > #lift2 {
transform: translate3d(0,0,-100rem);
}
}
//lower level
#ilift1:checked ~ content > w {
transform: translate3d(0,100rem,0);
> x > y > z > room > #lift1 {
transform: translate3d(0,0,0);
}
}
#ilift3:checked ~ content > w {
transform: translate3d(0,100rem,0);
> x > y > z > room > #lift3 {
transform: translate3d(0,0,0);
}
}
#ilift4:checked ~ content > w {
transform: translate3d(0,100rem,0);
> x > y > z > room > #lift4 {
transform: translate3d(0,0,0);
}
}
#ilift6:checked ~ content > w {
transform: translate3d(0,100rem,0);
> x > y > z > room > #lift6 {
transform: translate3d(0,0,0);
}
}
#ilift7:checked ~ content > w {
transform: translate3d(0,100rem,0);
> x > y > z > room > #lift7 {
transform: translate3d(0,0,0);
}
}
#z-6:checked ~ #x-5:checked ~ content > w > x > y > z > room:nth-of-type(3) > lift >,
#z-6:checked ~ #x-4:checked ~ content > w > x > y > z > room:nth-of-type(4) > lift >,
#z-5:checked ~ #x-2:checked ~ content > w > x > y > z > room:nth-of-type(13) > lift >,
#z-4:checked ~ #x-4:checked ~ content > w > x > y > z > room:nth-of-type(18) > lift >,
#z-3:checked ~ #x-3:checked ~ content > w > x > y > z > room:nth-of-type(26) > lift >,
#z-3:checked ~ #x-2:checked ~ content > w > x > y > z > room:nth-of-type(27) > lift >,
#z-2:checked ~ #x-4:checked ~ content > w > x > y > z > room:nth-of-type(32) > lift >,
#z-2:checked ~ #x-2:checked ~ content > w > x > y > z > room:nth-of-type(34) > lift > {
label {
pointer-events: all;
animation: light 1s cubic-bezier(0.5, 0, 1, 0.5) forwards;
}
}
.iupper:checked ~ #z-3:checked ~ #x-2:checked ~ content > w > x > y > z > room:nth-of-type(27) > lift >,
.iupper:checked ~ #z-6:checked ~ #x-4:checked ~ content > w > x > y > z > room:nth-of-type(4) > lift >,
.ilower:checked ~ #z-2:checked ~ #x-4:checked ~ content > w > x > y > z > room:nth-of-type(32) > lift >,
.ilower:checked ~ #z-6:checked ~ #x-5:checked ~ content > w > x > y > z > room:nth-of-type(3) > lift >,
.ilower:checked ~ #z-5:checked ~ #x-2:checked ~ content > w > x > y > z > room:nth-of-type(13) > lift >,
.ilower:checked ~ #z-4:checked ~ #x-4:checked ~ content > w > x > y > z > room:nth-of-type.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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