[HTML] 纯文本查看 复制代码运行代码

蚂蚁部落

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

}

.stage {

width: 21em;

height: 21em;

position: absolute;

top: 0;

right: 0;

left: 0;

bottom: 0;

margin: auto;

perspective: 1000px;

-webkit-perspective: 1000px;

-webkit-animation: bigchange 8s linear infinite alternate;

}

.cube * {

position: absolute;

width: 100%;

height: 100%;

box-shadow: 1px 1px 1px #ccc,

0 0 10px #fff,

0 0 20px #fff,

0 0 30px #fff,

0 0 40px #ff00de,

0 0 70px #ff00de,

0 0 80px #ff00de;

background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0px,

rgba(255,255,255,1) 5px,

rgba(0,0,0,0) 0px),

-webkit-linear-gradient(top, rgba(255,255,255,1) 0px,

rgba(255,255,255,1) 5px, rgba(0,0,0,0) 0px);

background-size: 7em,7em;

border: 5px solid #ffffff;

border-top: none;

border-left: none;

border-radius: 0.2em;

}

.top {

background-color: rgba(255, 127, 0,1);

-webkit-transform: rotateX(90deg) translateZ(10.5em);

}

.bottom {

background-color: rgba(255,0,0,1);

-webkit-transform: rotateX(-90deg) translateZ(10.5em);

}

.left {

background-color: rgba(0,255,0,1);

-webkit-transform: rotateY(-90deg) translateZ(10.5em);

}

.right {

background-color: rgba(0,0,255,1);

-webkit-transform: rotateY(90deg) translateZ(10.5em);

}

.font {

background-color: rgba(255,255,0,1);

-webkit-transform: translateZ(10.5em);

}

.back {

background-color: rgba(127,0,255,1);

-webkit-transform: rotateX(180deg) translateZ(10.5em);

}

.cube {

position: absolute;

width: 100%;

height: 100%;

-webkit-animation: spin linear 6s infinite;

-webkit-transform-style: preserve-3d;

-webkit-transform: rotateX(45deg) rotateY(45deg);

}

@-webkit-keyframes spin {

0% {

-webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg);

-ms-transform: translateZ(-10em) rotateX(0) rotateY(0deg);

-o-transform: translateZ(-10em) rotateX(0) rotateY(0deg);

transform: translateZ(-10em) rotateX(0) rotateY(0deg);

}

100% {

-webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);

-ms-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);

-o-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);

transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);

}

}

@-webkit-keyframes bigchange {

0% {

width: 0em;

height: 0em;

}

75% {

width: 21em;

height: 21em;

}

100% {

width: 21em;

height: 21em;

}

}