css线条伸缩_CSS3 径向线条伸缩构造的太阳花旋转动画

CSS

语言：

CSSSCSS

确定

*,

*:before,

*:after {

margin: 0;

padding: 0;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

*:before,

*:after {

content: "";

}

html,

body {

height: 100%;

}

body {

position: relative;

overflow: hidden;

background: #111;

}

.container,

.container *,

.container *:before,

.container *:after {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

-moz-transform-style: preserve-3d;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

}

.thing {

width: 2px;

height: 6em;

background: #fff;

-moz-animation: thing 1s linear infinite;

-webkit-animation: thing 1s linear infinite;

animation: thing 1s linear infinite;

}

.thing:nth-child(1) {

-moz-transform: rotateZ(0deg) translateY(6em);

-ms-transform: rotateZ(0deg) translateY(6em);

-webkit-transform: rotateZ(0deg) translateY(6em);

transform: rotateZ(0deg) translateY(6em);

-moz-animation-delay: 0s;

-webkit-animation-delay: 0s;

animation-delay: 0s;

}

.thing:nth-child(2) {

-moz-transform: rotateZ(11.25deg) translateY(6em);

-ms-transform: rotateZ(11.25deg) translateY(6em);

-webkit-transform: rotateZ(11.25deg) translateY(6em);

transform: rotateZ(11.25deg) translateY(6em);

-moz-animation-delay: -0.15625s;

-webkit-animation-delay: -0.15625s;

animation-delay: -0.15625s;

}

.thing:nth-child(3) {

-moz-transform: rotateZ(22.5deg) translateY(6em);

-ms-transform: rotateZ(22.5deg) translateY(6em);

-webkit-transform: rotateZ(22.5deg) translateY(6em);

transform: rotateZ(22.5deg) translateY(6em);

-moz-animation-delay: -0.3125s;

-webkit-animation-delay: -0.3125s;

animation-delay: -0.3125s;

}

.thing:nth-child(4) {

-moz-transform: rotateZ(33.75deg) translateY(6em);

-ms-transform: rotateZ(33.75deg) translateY(6em);

-webkit-transform: rotateZ(33.75deg) translateY(6em);

transform: rotateZ(33.75deg) translateY(6em);

-moz-animation-delay: -0.46875s;

-webkit-animation-delay: -0.46875s;

animation-delay: -0.46875s;

}

.thing:nth-child(5) {

-moz-transform: rotateZ(45deg) translateY(6em);