css设置盒子动画,CSS3 盒子打开动画

CSS

语言：

CSSSCSS

确定

html, body {

height: 100%; }

body {

overflow: hidden;

margin: 0;

perspective: 50em; }

body:after {

box-sizing: border-box;

position: absolute;

top: 50%;

left: 50%;

margin: -10em;

width: 20em;

height: 20em;

content: ''; }

.box {

transform: rotateX(-90deg) translateY(10em);

animation: boxani 4s ease-out infinite; }

.box, .box *, .box :before, .box :after {

box-sizing: border-box;

position: absolute;

top: 50%;

left: 50%;

transform-style: preserve-3d; }

.face {

margin: -10em;

width: 20em;

height: 20em;

background: #353bb4;

color: #353bb4; }

.face:nth-child(1) {

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

background: #12143e;

color: #12143e;

animation: unfold-lat1 4s linear infinite; }

.face:nth-child(1):before {

animation: unfold-topin1 4s linear infinite; }

.face:nth-child(1):after {

animation: unfold-topout1 4s linear infinite; }

@keyframes unfold-lat1 {

0%, 0% {

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

box-shadow: 0 1px 0.125em 0 #12143e; }

40%, 100% {

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

box-shadow: 0 0 1px 1px #353bb4;

background: #353bb4;

color: #353bb4; } }

@keyframes unfold-topin1 {

0%, 10% {

transform: rotateX(90deg);

box-shadow: none; }

22.999% {

border-top-color: #353bb4; }

23% {

border-top-color: #242879; }

50%, 100% {

transform: rotateX(180deg);

box-shadow: 0 -2px #353bb4;

border-top-color: #353bb4; } }

@keyframes unfold-topout1 {

0%, 10% {

transform: rotateX(90deg) scale(0.5) translateZ(1px);

border-top-color: white; }

50%, 100% {

transform: rotateX(180deg) scale(0.5) translateZ(1px);

border-top-color: black; } }

.face:nth-child(2) {

transform: rotateY(-90deg) translateZ(-10em);

background: #12143e;

color: #12143e;

animation: unfold-lat2 4s linear infinite; }

.face:nth-child(2):before {

animation: unfold-topin2 4s linear infinite; }

.face:nth-child(2):after {

animation: unfold-topout2 4s linear infinite; }

@keyframes unfold-lat2 {

0%, 10% {

transform: rotateY(-90deg) translateZ(-10em);

box-shadow: 0 1px 0.125em 0 #12143e; }

50%, 100% {

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

box-shadow: 0 0 1px 1px #353bb4;

background: #353bb4;

color: #353bb4; } }

@keyframes unfold-topin2 {

0%, 20% {

transform: rotateX(90deg);

box-shadow: none; }

32.999% {

border-top-color: #353bb4; }

33% {

border-top-color: #242879; }

60%, 100% {

transform: rotateX(180deg);

box-shadow: 0 -2px #353bb4;

border-top-color: #353bb4; } }

@keyframes unfold-topout2 {

0%, 20% {

transform: rotateX(90deg) scale(0.5) translateZ(1px);

border-top-color: white; }

60%, 100% {

transform: rotateX(180deg) scale(0.5) translateZ(1px);

border-top-color: black; } }

.face:nth-child(3) {

transform: rotateY(-180deg) translateZ(-10em);

background: #12143e;

color: #12143e;

animation: unfold-lat3 4s linear infinite; }

.face:nth-child(3):before {

animation: unfold-topin3 4s linear infinite; }

.face:nth-child(3):after {

animation: unfold-topout3 4s linear infinite; }

@keyframes unfold-lat3 {

0%, 20% {

transform: rotateY(-180deg) translateZ(-10em);

box-shadow: 0 1px 0.125em 0 #12143e; }

60%, 100% {

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

box-shadow: 0 0 1px 1px #353bb4;

background: #353bb4;

color: #353bb4; } }

@keyframes unfold-topin3 {

0%, 30% {

transform: rotateX(90deg);

box-shadow: none; }

42.999% {

border-top-color: #353bb4; }

43% {

border-top-color: #242879; }

70%, 100% {

transform: rotateX(180deg);

box-shadow: 0 -2px #353bb4;

border-top-color: #353bb4; } }

@keyframes unfold-topout3 {

0%, 30% {

transform: rotateX(90deg) scale(0.5) translateZ(1px);

border-top-color: white; }

70%, 100% {

transform: rotateX(180deg) scale(0.5) translateZ(1px);

border-top-color: black; } }

.face:nth-child(4) {

transform: rotateY(-270deg) translateZ(-10em);

background: #12143e;

color: #12143e;

animation: unfold-lat4 4s linear infinite; }

.face:nth-child(4):before {

animation: unfold-topin4 4s linear infinite; }

.face:nth-child(4):after {

animation: unfold-topout4 4s linear infinite; }

@keyframes unfold-lat4 {

0%, 30% {

transform: rotateY(-270deg) translateZ(-10em);

box-shadow: 0 1px 0.125em 0 #12143e; }

70%, 100% {

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

box-shadow: 0 0 1px 1px #353bb4;

background: #353bb4;

color: #353bb4; } }

@keyframes unfold-topin4 {

0%, 40% {

transform: rotateX(90deg);

box-shadow: none; }

52.999% {

border-top-color: #353bb4; }

53% {

border-top-color: #242879; }

80%, 100% {

transform: rotateX(180deg);

box-shadow: 0 -2px #353bb4;

border-top-color: #353bb4; } }

@keyframes unfold-topout4 {

0%, 40% {

transform: rotateX(90deg) scale(0.5) translateZ(1px);

border-top-color: white; }

80%, 100% {

transform: rotateX(180deg) scale(0.5) translateZ(1px);

border-top-color: black; } }

.face:nth-child(5) {

transform: rotateX(90deg) translateZ(-10em);

box-shadow: 0 0 0.125em 1px #1e2165;

background: #1e2165;

color: #1e2165;

animation: bottom 4s linear infinite; }

@keyframes bottom {

70%, 100% {

box-shadow: 0 0 0.125em 1px #353bb4;

background: #353bb4;

color: #353bb4; } }

.face:not(:last-child) {

transform-origin: 50% 100%; }

.face:not(:last-child):before, .face:not(:last-child):after {

margin: inherit;

border: solid 10em transparent;

border-top-color: currentColor;

width: inherit;

height: inherit;

transform-origin: 50% 0;

transform: rotateX(90deg);

content: ''; }

.face:not(:last-child):before {

color: #353bb4; }

.face:not(:last-child):after {

transform: rotateX(90deg) scale(0.5) translateZ(1px);

color: white;

backface-visibility: hidden; }

@keyframes boxani {

to {

transform: rotateX(-90deg) translateY(82.6em) rotateY(45deg); } }