svg+css+js实现一个立方体三维数字时间时钟显示效果代码
代码语言：html
所属分类：三维
代码描述：svg+css+js实现一个立方体三维数字时间时钟显示效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
--area: 3.75vmin;
--y: #f8e8aa;
--w: #fdf5f1;
--o: #fd4109;
--lb: #ade8e5;
--p: #479bc6;
--db: #222c47;
--z: 1;
--left: 0;
background: #479bc6;
overflow: hidden;
filter: url(#squiggles);
}
body:before {
content: "";
position: absolute;
width: 100%;
height: 50%;
top: calc(50% + (var(--area) * 1.25));
left: 0;
backdrop-filter: blur(3px);
z-index: 3;
background: rgba(71, 155, 198, 0.85);
}
body #wrap {
width: 75vmin;
height: 11.25vmin;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 1.5vmin;
perspective: 100vmin;
position: relative;
transform: scale(0.75) translateZ(0px) translateY(-7.5vmin);
-webkit-box-reflect: below 15vmin;
}
body #wrap * {
transform-style: preserve-3d;
}
body #wrap .block {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-template-areas: "col1 col2 col3" "col4 col5 col6" "col7 col8 col9";
z-index: 3;
transition: 0.3s ease-in-out;
}
body #wrap .block:nth-of-type(2):before, body #wrap .block:nth-of-type(2):after, body #wrap .block:nth-of-type(4):before, body #wrap .block:nth-of-type(4):after {
content: "";
position: absolute;
width: 2.5vmin;
height: 2.5vmin;
background: var(--lb);
border-radius: 100%;
left: calc(var(--area) * 3.5);
top: 0;
transform: translateZ(calc(var(--area) * -1.5)) rotateX(25deg);
}
body #wrap .block:nth-of-type(2):after, body #wrap .block:nth-of-type(4):after {
top: calc(var(--area) * 1.5);
}
body #wrap .block * {
backface-visibility: hidden;
}
body #wrap .block:nth-of-type(1) {
animation: wobbling 1s ease-in-out infinite alternate -0.25s;
}
body #wrap .block:nth-of-type(2) {
animation: wobbling 1s ease-in-out infinite alternate -0.5s;
}
body #wrap .block:nth-of-type(3) {
animation: wobbling 1s ease-in-out infinite alternate -0.75s;
}
body #wrap .block:nth-of-type(4) {
animation: wobbling 1s ease-in-out infinite alternate -1s;
}
body #wrap .block:nth-of-type(5) {
animation: wobbling 1s ease-in-out infinite alternate -1.25s;
}
body #wrap .block:nth-of-type(6) {
animation: wobbling 1s ease-in-out infinite alternate -1.5s;
}
@keyframes wobbling {
from {
transform: rotateX(-25deg) translateZ(calc(var(--area) * 2)) scaleZ(var(--z)) translateX(var(--left));
}
to {
transform: rotateX(-55deg) translateZ(calc(var(--area) * 2)) scalez(var(--z)) translateX(var(--left));
}
}
body #wrap .block:nth-of-type(-n + 2) {
left: -50%;
}
body #wrap .block:nth-of-type(n + 5) {
left: 50%;
}
body #wrap .block:nth-of-type(5) {
z-index: 1;
}
body #wrap .block:last-of-type {
z-index: 0;
}
body #wrap .block.cube0:first-of-type {
--z: 0;
}
body #wrap .block.cube0:first-of-type ~ .block {
--left: -50%;
}
body #wrap .block.cube0 .cube:nth-of-type(2), body #wrap .block.cube0 .cube:nth-of-type(5), body #wrap .block.cube0 .cube:nth-of-type(11), body #wrap .block.cube0 .cube:nth-of-type(14), body #wrap .block.cube0 .cube:nth-of-type(17), body #wrap .block.cube0 .cube:nth-of-type(23), body #wrap .block.cube0 .cube:nth-of-type(26) {
left: 100%;
}
body #wrap .block.cube0 .cube:nth-of-type(2):nth-of-type(even), body #wrap .block.cube0 .cube:nth-of-type(5):nth-of-type(even), body #wrap .block.cube0 .cube:nth-of-type(11):nth-of-type(even), body #wrap .block.cube0 .cube:nth-of-type(14):nth-of-type(even), body #wrap .block.cube0 .cube:nth-of-type(17):nth-of-type(even), body #wrap .block.cube0 .cube:nth-of-type(23):nth-of-type(even), body #wrap .block.cube0 .cube:nth-of-type(26):nth-of-type(even) {
left: -100%;
}
body #wrap .block.cube1 .cube:nth-of-type(1) {
left: 100%;
}
body #wrap .block.cube1 .cube:nth-of-type(4) {
left: 100%;
}
body #wrap .block.cube1 .cube:nth-of-type(7) {
left: 100%;
}
body #wrap .block.cube1 .cube:nth-of-type(10) {
left: 100%;
}
body #wrap .block.cube1 .cube:nth-of-type(13) {
left: 100%;
}
body #wrap .block.cube1 .cube:nth-of-type(16) {
left: 100%;
}
body #wrap .block.cube1 .cube:nth-of-type(19) {
left: 100%;
}
body #wrap .block.cube1 .cube:nth-of-type(22) {
left: 100%;
}
body #wrap .block.cube1 .cube:nth-of-type(25) {
left: 100%;
}
body #wrap .block.cube1 .cube:nth-of-type(3) {
left: -100%;
}
body #wrap .block.cube1 .cube:nth-of-type(6) {
left: -100%;
}
body #wrap .block.cube1 .cube:nth-of-type(9) {
left: -100%;
}
body #wrap .block.cube1 .cube:nth-of-type(12) {
left: -100%;
}
body #wrap .block.cube1 .cube:nth-of-type(15) {
left: -100%;
}
body #wrap .block.cube1 .cube:nth-of-type(18) {
left: -100%;
}
body #wrap .block.cube1 .cube:nth-of-type(21) {
left: -100%;
}
body #wrap .block.cube1 .cube:nth-of-type(24) {
left: -100%;
}
body #wrap .block.cube1 .cube:nth-of-type(27) {
left: -100%;
}
body #wrap .block.cube2 .cube:nth-of-type(5), body #wrap .block.cube2 .cube:nth-of-type(14), body #wrap .block.cube2 .cube:nth-of-type(23) {
top: 100%;
}
body #wrap .block.cube2 .cube:nth-of-type(6), body #wrap .block.cube2 .cube:nth-of-type(15), body #wrap .block.cube2 .cube:nth-of-type(24) {
top: 100%;
}
body #wrap .block.cube2 .cube:nth-of-type(10) {
left: 200%;
}
body #wrap .block.cube2 .cube:nth-of-type(11) {
left: 100%;
}
body #wrap .block.cube2 .cube:nth-of-type(13), body #wrap .block.cube2 .cube:nth-of-type(16) {
transform: translateZ(calc(var(--area) * -2));
}
body #wrap .block.cube3 .cube:nth-of-type(10), body #wrap .block.cube3 .cube:nth-of-type(4), body #wrap .block.cube3 .cube:nth-of-type(13), body #wrap .block.cube3 .cube:nth-of-type(16) {
left: 200%;
}
body #wrap .block.cube3 .cube:nth-of-type(11), body #wrap .block.cube3 .cube:nth-of-type(5), body #wrap .block.cube3 .cube:nth-of-type(14), body #wrap .block.cube3 .cube:nth-of-type(17) {
left: 100%;
}
body #wrap .block.cube4 .cube:nth-of-type(4), body #wrap .block.cube4 .cube:nth-of-type(7), body #wrap .block.cube4 .cube:nth-of-type(13), body #wrap .block.cube4 .cube:nth-of-type(16), body #wrap .block.cube4 .cube:nth-of-type(22), body #wrap .block.cube4 .cube:nth-of-type(25) {
left: 200%;
}
body #wrap .block.cube4 .cube:nth-of-type(11), body #wrap .block.cube4 .cube:nth-of-type(20), body #wrap .block.cube4 .cube:nth-of-type(5), body #wrap .block.cube4 .cube:nth-of-type(8), body #wrap .block.cube4 .cube:nth-of-type(14), body #wrap .block.cube4 .cube:nth-of-type(17), body #wrap .block.cube4 .cube:nth-of-type(23), body #wrap .block.cube4 .cube:nth-of-type(26) {
left: 100%;
}
body #wrap .block.cube5 .cube:nth-of-type(4) {
left: calc(300% - 100%);
}
body #wrap .block.cube5 .cube:nth-of-type(5) {
left: calc(300% - 200%);
}
body #wrap .block.cube5 .cube:nth-of-type(13) {
transform: translateZ(calc(var(--area) * -2));
top: -100%;
}
body #wrap .block.cube5 .cube:nth-of-type(13):nth-of-type(16), body #wrap .block.cube5 .cube:nth-of-type(13):nth-of-type(17), body #wrap .block.cube5 .cube:nth-of-type(13):nth-of-type(18) {
top: -200%;
}
body #wrap .block.cube5 .cube:nth-of-type(14) {
transform: translateZ(calc(var(--area) * -2));
top: -100%;
}
body #wrap .block.cube5 .cube:nth-of-type(14):nth-of-type(16), body #wrap .block.cube5 .cube:nth-of-type(14):nth-of-type(17), body #wrap .block.cube5 .cube:nth-of-type(14):nth-of-type(18) {
top: -200%;
}
body #wrap .block.cube5 .cube:nth-of-type(15) {
transform: translateZ(calc(var(--area) * -2));
top: -100%;
}
body #wrap .block.cube5 .cube:nth-of-type(15):nth-of-type(16), body #wrap .block.cube5 .cube:nth-of-type(15):nth-of-type(17), body #wrap .block.cube5 .cube:nth-of-type(15):nth-of-type(18) {
top: -200%;
}
body #wrap .block.cube5 .cube:nth-of-type(16) {
transform: translateZ(calc(var(--area) * -2));
top: -100%;
}
body #wrap .block.cube5 .cube:nth-of-type(16):nth-of-type(16), body #wrap .block.cube5 .cube:nth-of-type(16):nth-of-type(17), body #wrap .block.cube5 .cube:nth-of-type(16):nth-of-type(18) {
top: -200%;
}
body #wrap .block.cube5 .cube:nth-of-type(17) {
transform: translateZ(calc(var(--area) * -2));
top: -100%;
}
body #wrap .block.cube5 .cube:nth-of-type(17):nth-of-type(16), body #wrap .block.cube5 .cube:nth-of-type(17):nth-of-type(17), body #wrap .block.cube5 .cube:nth-of-type(17):nth-of-type(18) {
top: -200%;
}
body #wrap .block.cube5 .cube:nth-of-type(18) {
transform: translateZ(calc(var(--area) * -2));
top: -100%;
}
body #wrap .block.cube5 .cube:nth-of-type(18):nth-of-type(16), body #wrap .block.cube5 .cube:nth-of-type(18):nth-of-type(17), body #wrap .block.cube5 .cube:nth-of-type(18):nth-of-type(18) {
top: -200%;
}
body #wrap .block.cube5 .cube:nth-of-type(12) {
left: -200%;
}
body #wrap .block.cube5 .cube:nth-of-type(11) {
left: -100%;
}
body #wrap .block.cube5 .cube:nth-of-type(23), body #wrap .block.cube5 .cube:nth-of-type(24), body #wrap .block.cube5 .cube:nth-of-type(22) {
top: -100%;
}
body #wrap .block.cube5 .cube:nth-of-type(25), body #wrap .block.cube5 .cube:nth-of-type(26), body #wrap .block.cube5 .cube:nth-of-type(27) {
top: -200%;
}
body #wrap .block.cube6 .cube:nth-of-type(5) {
left: -100%;
}
body #wrap .block.cube6 .cube:nth-of-type(14):not(:nth-of-type(16)) {
transform: translateZ(calc(var(--area) * -2));
}
body #wrap .block.cube6 .cube:nth-of-type(15):not(:nth-of-type(16)) {
transform: translateZ(calc(var(--area) * -2));
}
body #wrap .block.cube6 .cube:nth-of-type(16):not(:nth-of-type(16)) {
transform: translateZ(calc(var(--area) * -2));
}
body #wrap .block.cube6 .cube:nth-of-type(17):not(:nth-of-type(16)) {
transform: translateZ(calc(var(--area) * -2));
}
body #wrap .block.cube6 .cube:nth-of-type(18):not(:nth-of-type(16)) {
transform: translateZ(calc(var(--area) * -2));
}
body #wrap .block.cube6 .cube:nth-of-type(12) {
left: -200%;
}
body #wrap .block.cube6 .cube:nth-of-type(11) {
left: -100%;
}
body #wrap .block.cube7 .cube:nth-of-type(3) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(4) {
left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(5) {
left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(10):nth-of-type(1n), body #wrap .block.cube7 .cube:nth-of-type(11):nth-of-type(1n) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(6) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(7) {
left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(8) {
left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(19):nth-of-type(1n), body #wrap .block.cube7 .cube:nth-of-type(20):nth-of-type(1n) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(9) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(10) {
left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(11) {
left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(28):nth-of-type(1n), body #wrap .block.cube7 .cube:nth-of-type(29):nth-of-type(1n) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(12) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(13) {
left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(14) {
left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(37):nth-of-type(1n), body #wrap .block.cube7 .cube:nth-of-type(38):nth-of-type(1n) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(15) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(16) {
left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(17) {
left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(46):nth-of-type(1n), body #wrap .block.cube7 .cube:nth-of-type(47):nth-of-type(1n) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(18) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(19) {
left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(20) {
left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(55):nth-of-type(1n), body #wrap .block.cube7 .cube:nth-of-type(56):nth-of-type(1n) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(21) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(22) {
left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(23) {
left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(64):nth-of-type(1n), body #wrap .block.cube7 .cube:nth-of-type(65):nth-of-type(1n) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(24) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(25) {
left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(26) {
left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(73):nth-of-type(1n), body #wrap .block.cube7 .cube:nth-of-type(74):nth-of-type(1n) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(27) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(28) {
left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(29) {
left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(82):nth-of-type(1n), body #wrap .block.cube7 .cube:nth-of-type(83):nth-of-type(1n) {
left: 0;
}
body #wrap .block.cube7 .cube:nth-of-type(1) {
left: 200%;
}
body #wrap .block.cube7 .cube:nth-of-type(2) {
left: 100%;
}
body #wrap .block.cube7 .cube:nth-of-type(10), body #wrap .block.cube7 .cube:nth-of-type(11) {
transform: translateZ(calc(var(--area) * -2));
}
body #wrap .block.cube8 .cube:nth-of-type(5) {
transform: translateZ(calc(var(--area) * -1.5));
}
body #wrap .block.cube8 .cube:nth-of-type(11) {
top: 200%;
}
body #wrap .block.cube8 .cube:nth-of-type(25) {
transform: translateZ(calc(var(--area) * -1));
}
body #wrap .block.cube8 .cube:nth-of-type(26) {
transform: translateZ(calc(var(--area) * -1));
}
body #wrap .block.cube8 .cube:nth-of-type(27) {
transform: translateZ(calc(var(--area) * -1));
}
body #wrap .block.cube9 .cube:nth-of-type(5) {
transform: translateZ(calc(var(--area) * -2));
}
body #wrap .block.cube9 .cube:nth-of-type(11) {
top: 200%;
}
body #wrap .block.cube9 .cube:nth-of-type(4), body #wrap .block.cube9 .cube:nth-of-type(13) {
left: 200%;
}
body #wrap .block.cube9 .cube:nth-of-type(14) {
left: 100%;
}
body #wrap .block.cube9 .cube:nth-of-type(22) {
top: -100%;
}
body #wrap .block.cube9 .cube:nth-of-type(23) {
top: -100%;
}
body #wrap .block.cube9 .cube:nth-of-type(24) {
top: -100%;
}
body #wrap .block.cube9 .cube:nth-of-type(25) {
transform: translateZ(calc(var(--area) * -1));
}
body #wrap .block.cube9 .cube:nth-of-type(26) {
transform: translateZ(calc(var(--area) * -1));
}
body #wrap .block.cube9 .cube:nth-of-type(27) {
transform: translateZ(calc(var(--area) * -1));
}
body #wrap .block .cube {
background: var(--y);
position: relative;
transition: 0.3s ease-in-out;
left: 0;
top: 0;
z-index: 0;
backface-visibility: hidden;
}
body #wrap .block .cube:nth-of-type(1) + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(1) + .cube + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(1) .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(10) + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(10) + .cube + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(10) .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(19) + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(19) + .cube + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(19) .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(28) + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(28) + .cube + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(28) .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(37) + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(37) + .cube + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(37) .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(46) + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(46) + .cube + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(46) .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(55) + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(55) + .cube + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(55) .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(64) + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(64) + .cube + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(64) .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(73) + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(73) + .cube + .cube .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube:nth-of-type(73) .side:last-of-type {
box-shadow: 0 0 0 0.175vmin var(--lb);
}
body #wrap .block .cube .side {
position: absolute;
width: 100%;
height: 100%;
}
body #wrap .block .cube .side:first-of-type {
top: 0.15vmin;
left: -100%;
background: var(--db);
transform-origin: right;
transform: rotateY(-90deg);
}
body #wrap .block .cube .side:last-of-type {
top: -100%;
left: 0;
transform-origin: bottom;
background: var(--lb);
transform: rotateX(90deg);
}
body #wrap .block .cube .side:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: -0.05vmin;
background: var(--db);
transform: translateZ(calc((var(--area) * -1.05)));
}
body #wrap .block .cube:nth-of-type(1) {
grid-area: col1;
background: var(--y);
}
body #wrap .block .cube:nth-of-type(1):after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: var(--y);
box-shadow: 0 0 0 0.05vmin var(--y);
transform: translateZ(0.025vmin);
}
body #wrap .block .cube:nth-of-type(10) {
grid-area: col1;
transform: translateZ(calc(var(--area) * -1));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(19) {
grid-area: col1;
transform: translateZ(calc(var(--area) * -2));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(2) {
grid-area: col2;
background: var(--y);
}
body #wrap .block .cube:nth-of-type(2):after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: var(--y);
box-shadow: 0 0 0 0.05vmin var(--y);
transform: translateZ(0.025vmin);
}
body #wrap .block .cube:nth-of-type(11) {
grid-area: col2;
transform: translateZ(calc(var(--area) * -1));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(20) {
grid-area: col2;
transform: translateZ(calc(var(--area) * -2));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(3) {
grid-area: col3;
background: var(--y);
}
body #wrap .block .cube:nth-of-type(3):after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: var(--y);
box-shadow: 0 0 0 0.05vmin var(--y);
transform: translateZ(0.025vmin);
}
body #wrap .block .cube:nth-of-type(12) {
grid-area: col3;
transform: translateZ(calc(var(--area) * -1));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(21) {
grid-area: col3;
transform: translateZ(calc(var(--area) * -2));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(4) {
grid-area: col4;
background: var(--y);
}
body #wrap .block .cube:nth-of-type(4):after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: var(--y);
box-shadow: 0 0 0 0.05vmin var(--y);
transform: translateZ(0.025vmin);
}
body #wrap .block .cube:nth-of-type(13) {
grid-area: col4;
transform: translateZ(calc(var(--area) * -1));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(22) {
grid-area: col4;
transform: translateZ(calc(var(--area) * -2));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(5) {
grid-area: col5;
background: var(--y);
}
body #wrap .block .cube:nth-of-type(5):after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: var(--y);
box-shadow: 0 0 0 0.05vmin var(--y);
transform: translateZ(0.025vmin);
}
body #wrap .block .cube:nth-of-type(14) {
grid-area: col5;
transform: translateZ(calc(var(--area) * -1));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(23) {
grid-area: col5;
transform: translateZ(calc(var(--area) * -2));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(6) {
grid-area: col6;
background: var(--y);
}
body #wrap .block .cube:nth-of-type(6):after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: var(--y);
box-shadow: 0 0 0 0.05vmin var(--y);
transform: translateZ(0.025vmin);
}
body #wrap .block .cube:nth-of-type(15) {
grid-area: col6;
transform: translateZ(calc(var(--area) * -1));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(24) {
grid-area: col6;
transform: translateZ(calc(var(--area) * -2));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(7) {
grid-area: col7;
background: var(--y);
}
body #wrap .block .cube:nth-of-type(7):after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: var(--y);
box-shadow: 0 0 0 0.05vmin var(--y);
transform: translateZ(0.025vmin);
}
body #wrap .block .cube:nth-of-type(16) {
grid-area: col7;
transform: translateZ(calc(var(--area) * -1));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(25) {
grid-area: col7;
transform: translateZ(calc(var(--area) * -2));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(8) {
grid-area: col8;
background: var(--y);
}
body #wrap .block .cube:nth-of-type(8):after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: var(--y);
box-shadow: 0 0 0 0.05vmin var(--y);
transform: translateZ(0.025vmin);
}
body #wrap .block .cube:nth-of-type(17) {
grid-area: col8;
transform: translateZ(calc(var(--area) * -1));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(26) {
grid-area: col8;
transform: translateZ(calc(var(--area) * -2));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(9) {
grid-area: col9;
background: var(--y);
}
body #wrap .block .cube:nth-of-type(9):after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: var(--y);
box-shadow: 0 0 0 0.05vmin var(--y);
transform: translateZ(0.025vmin);
}
body #wrap .block .cube:nth-of-type(18) {
grid-area: col9;
transform: translateZ(calc(var(--area) * -1));
background: var(--o);
}
body #wrap .block .cube:nth-of-type(27) {
grid-area: col9;
transform: translateZ(calc(var(--area) * -2));
background: var(--o);
}
</style>
</head>
<body>
<div id='wrap'>
<div class='block cube0'>
<div class='cube'>
<div class='side'></div>
<div class='side'></div>
</div>
<div class='cube'>
<div class='side'></div>
<div class='side'></div>
</div>
<div class='cube'>
<div class='side'></div>
<div class='side'></div>
</div>
<div class='cube'>
<div class='side'></div>
<div class='side'></div>
</div>
<div class='cube'>
<div class='side'></div>
<div class='side'></div>
</div>
<div class='cube'>
<div class='side'></div>
<div class='side'></div>
</div>
<div class='cube'>
<div class='side'></div>
<div class='side'></div>
</div>
<div class='cube'>
<div class='side'></div>
<div class='side'></div>
</div>
<div class='cube'>
<div class='side'></div>
<div class='side'></div>
</div>
<div class='cube'>
<div class='side'></div>
<div class='side'></div>
</div>
<div class='cube'>
<div class='side'></div>
<div class='side'></div>
</div>
<div class='cube'>
<div class='side'></div>
<div class='side'></div>
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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