css魔方加入动画效果,CSS3 魔方变幻加载动画

CSS

语言：

CSSSCSS

确定

body {

text-align: center;

padding-top: 20%;

background: #1d1f20; }

.loader {

width: 100px;

height: 100px;

display: inline-table;

box-sizing: border-box;

position: relative;

border-spacing: 0.3em; }

.loader row {

display: table-row; }

.loader row span {

display: table-cell;

position: relative;

background: #fdfdfd;

opacity: 0;

-webkit-animation: flicker 0.5986s ease-out infinite alternate; }

@-webkit-keyframes flicker {

from, 20% {

opacity: 0; }

100%, to {

opacity: 1; } }

.loader row:nth-child(1) span:nth-child(1) {

-webkit-animation-delay: 0.5s; }

.loader row:nth-child(1) span:nth-child(2) {

-webkit-animation-delay: 0.7s; }

.loader row:nth-child(1) span:nth-child(3) {

-webkit-animation-delay: 0.6s; }

.loader row:nth-child(2) span:nth-child(1) {

-webkit-animation-delay: 0.2s; }

.loader row:nth-child(2) span:nth-child(2) {

-webkit-animation-delay: 0.8s; }

.loader row:nth-child(2) span:nth-child(3) {

-webkit-animation-delay: 0.9s; }

.loader row:nth-child(3) span:nth-child(1) {

-webkit-animation-delay: 0.1s; }

.loader row:nth-child(3) span:nth-child(2) {

-webkit-animation-delay: 0.3s; }

.loader row:nth-child(3) span:nth-child(3) {

-webkit-animation-delay: 0.4s; }