html怎么让方块自动旋转,CSS3 旋转的方框

CSS

语言：

CSSSCSS

确定

#square {

position: absolute;

left: 50%;

top: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

.square {

position: absolute;

left: 50%;

top: 50%;

-webkit-animation: spin 1s linear infinite;

animation: spin 1s linear infinite;

}

.square:nth-child(1) {

background: #E31D28;

width: 124.23705em;

height: 124.23705em;

margin-left: -62.11852em;

margin-top: -62.11852em;

-webkit-animation-delay: 2s;

animation-delay: 2s;

}

.square:nth-child(2) {

background: #FCD234;

width: 88.11138em;

height: 88.11138em;

margin-left: -44.05569em;

margin-top: -44.05569em;

-webkit-animation-delay: 1.8s;

animation-delay: 1.8s;

}

.square:nth-child(3) {

background: #E31D28;

width: 62.49034em;

height: 62.49034em;

margin-left: -31.24517em;

margin-top: -31.24517em;

-webkit-animation-delay: 1.6s;

animation-delay: 1.6s;

}

.square:nth-child(4) {

background: #FCD234;

width: 44.31939em;

height: 44.31939em;

margin-left: -22.1597em;

margin-top: -22.1597em;

-webkit-animation-delay: 1.4s;

animation-delay: 1.4s;

}

.square:nth-child(5) {

background: #E31D28;

width: 31.43219em;

height: 31.43219em;

margin-left: -15.7161em;

margin-top: -15.7161em;

-webkit-animation-delay: 1.2s;

animation-delay: 1.2s;

}

.square:nth-child(6) {

background: #FCD234;

width: 22.29233em;

height: 22.29233em;

margin-left: -11.14617em;

margin-top: -11.14617em;

-webkit-animation-delay: 1s;

animation-delay: 1s;

}

.square:nth-child(7) {

background: #E31D28;

width: 15.81017em;

height: 15.81017em;

margin-left: -7.90508em;

margin-top: -7.90508em;

-webkit-animation-delay: 0.8s;

animation-delay: 0.8s;

}

.square:nth-child(8) {

background: #FCD234;

width: 11.21288em;

height: 11.21288em;

margin-left: -5.60644em;

margin-top: -5.60644em;

-webkit-animation-delay: 0.6s;

animation-delay: 0.6s;

}

.square:nth-child(9) {

background: #E31D28;

width: 7.9524em;

height: 7.9524em;

margin-left: -3.9762em;

margin-top: -3.9762em;

-webkit-animation-delay: 0.4s;

animation-delay: 0.4s;

}

.square:nth-child(10) {

background: #FCD234;

width: 5.64em;

height: 5.64em;

margin-left: -2.82em;

margin-top: -2.82em;

-webkit-animation-delay: 0.2s;

animation-delay: 0.2s;

}

.square:nth-child(11) {

background: #E31D28;

width: 4em;

height: 4em;

margin-left: -2em;

margin-top: -2em;

-webkit-animation-delay: 0s;

animation-delay: 0s;

}

body {

background: #E31D28;

overflow: hidden;

}

@-webkit-keyframes spin {

from {

-webkit-transform: rotateZ(0deg);

transform: rotateZ(0deg);

}

to {

-webkit-transform: rotateZ(180deg);

transform: rotateZ(180deg);

}

}

@keyframes spin {

from {

-webkit-transform: rotateZ(0deg);

transform: rotateZ(0deg);

}

to {

-webkit-transform: rotateZ(180deg);

transform: rotateZ(180deg);

}

}

*,

*:after,

*:before {

box-sizing: border-box;

}