css 方格 44,CSS3 旋转的4个小方格

CSS

语言：

CSSSCSS

确定

.load-holder {

-webkit-animation-duration: 0.65s;

animation-duration: 0.65s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-name: spin;

animation-name: spin;

-webkit-animation-timing-function: ease;

animation-timing-function: ease;

height: 32px;

margin: 25% auto 0;

position: relative;

width: 32px;

}

.load-holder span {

display: block;

float: left;

height: 14px;

margin: 1px;

width: 14px;

}

.load-holder span.square-1 {

background-color: #005d7e;

}

.load-holder span.square-2 {

background-color: #c68712;

}

.load-holder span.square-3 {

background-color: #910028;

}

.load-holder span.square-4 {

background-color: #4d4d4d;

}

@-webkit-keyframes spin {

0% {

-webkit-transform: rotate(0);

transform: rotate(0);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes spin {

0% {

-webkit-transform: rotate(0);

transform: rotate(0);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}