CSS
@keyframes scaleshadow {
25% {
box-shadow: 0 0 .125em rgba(0, 0, 0, .2), 0 0 .125em rgba(0, 0, 0, .2), -.35em 0 .125em rgba(0, 0, 0, .2), .35em 0 .125em rgba(0, 0, 0, .2)
}
50% {
box-shadow: 0 0 .125em rgba(0, 0, 0, .2), 0 0 .125em rgba(0, 0, 0, .2), -.25em 0 .125em rgba(0, 0, 0, .2), .25em 0 .125em rgba(0, 0, 0, .2)
}
75% {
box-shadow: 0 -.35em .125em rgba(0, 0, 0, .2), 0 .35em .125em rgba(0, 0, 0, .2), -.25em 0 .125em rgba(0, 0, 0, .2), .25em 0 .125em rgba(0, 0, 0, .2)
}
to {
box-shadow: 0 -.25em .125em rgba(0, 0, 0, .2), 0 .25em .125em rgba(0, 0, 0, .2), -.25em 0 .125em rgba(0, 0, 0, .2), .25em 0 .125em rgba(0, 0, 0, .2)
}
}
@keyframes topl {
to {
transform: translateY(-.5em) rotateX(90deg) rotateY(-220deg)
}
}
@keyframes topr {
to {
transform: translateY(-.5em) rotateX(90deg) rotateY(220deg)
}
}
@keyframes topf {
to {
transform: translateZ(.5em) rotateZ(90deg) rotateY(130deg)
}
}
@keyframes topb {
to {
transform: translateZ(-.5em) rotateZ(-90deg) rotateY(120deg)
}
}
@keyframes rotate {
to {
transform: rotateX(-45deg) rotateY(-305deg)
}
}
@keyframes outs {
to {
transform: translateY(-90%) scale(1);
}
}
body {
margin: 0;
overflow-x: hidden;
font-size: 16px
}
.boxwrp {
perspective: 400px;
margin: 0 auto;
position: relative;
font: 2.5em/1 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
color: #555;
display: block;
height: 170px;
font-size: 60px;
overflow: hidden
}
.boxwrp span {
font-size: 24px;
margin: .2em auto;
display: block;
position: relative
}
.box-download {
position: relative;
height: 1em;
width: 1em;
margin: 1em auto;
transform-style: preserve-3d;
transform: rotateX(-45deg) rotateY(55deg);
text-align: center;
-webkit-tap-highlight-color: transparent;
user-select: none;
transform-origin: center center;
animation: rotate 10s linear infinite
}
.fron {
transform: translateZ(.5em)
}
.back {
transform: translateZ(-.5em)
}
.left {
transform: translateX(-.5em) rotateY(-90deg)
}
.righ {
transform: translateX(.5em) rotateY(90deg)
}
.boto {
transform: translateY(.5em) rotateX(90deg)
}
.topl,
.topr {
transform: translateY(-.5em) rotateX(90deg)
}
.topl {
transform-origin: left center;
z-index: 1
}
.topr {
transform-origin: right center;
right: 0;
z-index: 1
}
.topf {
transform-origin: .5em 0;
right: 0;
transform: translateZ(.5em) rotateZ(90deg) rotateY(-90deg)
}
.topb {
transform: translateZ(-.5em) rotateZ(-90deg) rotateY(-90deg);
transform-origin: 0 0
}
.back,
.boto,
.fron,
.left,
.righ {
overflow: hidden;
width: 1em;
height: 1em;
position: absolute;
background: #f7e569;
box-sizing: border-box;
top: 0
}
.back,
.fron,
.left,
.righ {
box-shadow: 0 0 .1em#55461f41 inset, .2em .1em .2em .1em #d1be1666 inset
}
.boto {
box-shadow: 0 0 .125em 0 rgba(0, 0, 0, .4)
}
.topb,
.topf,
.topl,
.topr {
overflow: hidden;
width: .5em;
height: 1em;
position: absolute;
background: #fff080;
box-shadow: 0 0 .1em #55461f41 inset, 0 0 .2em .1em #d1be1666 inset;
outline: 1px solid transparent;
box-sizing: border-box;
top: 0
}
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
height: 50%;
width: 100%;
position: absolute;
border: 0;
z-index: 1;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
bottom: 0;
}
.animation:checked+.box-download .topl {
animation: topl 2s forwards
}
.animation:checked+.box-download .topr {
animation: topr 2s forwards
}
.animation:checked+.box-download .topf {
animation: topf 2s 1s forwards
}
.animation:checked+.box-download .topb {
animation: topb 2s 1s forwards
}
.animation:checked+.box-download {
transform: rotateZ(0deg) rotateX(-45deg);
animation: 0s ease 0s 1 normal none paused none;
animation-play-state: paused
}
.animation:checked+.box-download .boto {
animation: scaleshadow 2.5s .5s linear forwards
}
.animation:checked+.box-download .bands {
animation: 3s 1s outs forwards;
}
.backf {
backface-visibility: hidden;
background: 0 0;
z-index: 1
}
.bands {
font-size: 16px;
height: 100%;
width: 100%;
transform: translateY(0) scale(0);
}
.bands p {
white-space: nowrap
}
