html动画旋转,CSS旋转动画

css

/*variables*/

* {

padding: 0;

margin: 0;

box-sizing: border-box;

}

html, body {

width: 100%;

height: 100%;

}

body {

background-color: #140032;

overflow: hidden;

}

body * {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

}

.square {

border: 2px solid #00ff96;

-webkit-animation: SwimmingPyramid 1.5s linear infinite, PyramidLight 1.5s linear infinite;

animation: SwimmingPyramid 1.5s linear infinite, PyramidLight 1.5s linear infinite;

}

.square:nth-child(1) {

width: 28px;

height: 28px;

-webkit-animation-delay: -0.55s;

animation-delay: -0.55s;

}

.square:nth-child(2) {

width: 56px;

height: 56px;

-webkit-animation-delay: -0.5s;

animation-delay: -0.5s;

}

.square:nth-child(3) {

width: 84px;

height: 84px;

-webkit-animation-delay: -0.45s;

animation-delay: -0.45s;

}

.square:nth-child(4) {

width: 112px;

height: 112px;

-webkit-animation-delay: -0.4s;

animation-delay: -0.4s;

}

.square:nth-child(5) {

width: 140px;

height: 140px;

-webkit-animation-delay: -0.35s;

animation-delay: -0.35s;

}

.square:nth-child(6) {

width: 168px;

height: 168px;

-webkit-animation-delay: -0.3s;

animation-delay: -0.3s;

}

.square:nth-child(7) {

width: 196px;

height: 196px;

-webkit-animation-delay: -0.25s;

animation-delay: -0.25s;

}

.square:nth-child(8) {

width: 224px;

height: 224px;

-webkit-animation-delay: -0.2s;

animation-delay: -0.2s;

}

.square:nth-child(9) {

width: 252px;

height: 252px;

-webkit-animation-delay: -0.15s;

animation-delay: -0.15s;

}

.square:nth-child(10) {

width: 280px;

height: 280px;

-webkit-animation-delay: -0.1s;

animation-delay: -0.1s;

}

.square:nth-child(11) {

width: 308px;

height: 308px;

-webkit-animation-delay: -0.05s;

animation-delay: -0.05s;

}

.square:nth-child(12) {

width: 336px;

height: 336px;

-webkit-animation-delay: 0s;

animation-delay: 0s;

}

@-webkit-keyframes PyramidLight {

20% {

border-width: 16px;

}

80% {

border-width: 2px;

}

}

@keyframes PyramidLight {

20% {

border-width: 16px;

}

80% {

border-width: 2px;

}

}

@-webkit-keyframes SwimmingPyramid {

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes SwimmingPyramid {

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}