html5 摆动的花朵,CSS3实现一个旋转的花朵

要效果图如下：

实现原理：

其实很简单，就是中间的圆圈定位在中间，其他的6个圆圈，进行不同的绝对定位，然后进行旋转！

代码：

CSS实现的旋转的花朵

*{

margin: 0;

padding: 0;

}

*,*:before,*:after{

box-sizing: border-box;

}

html body{

height: 100%;

}

.container {

background: #f39c12;

height: 300px;

position: relative;

}

.loader{

position: absolute;

left: 50%;

top: 50%;

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

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

}

.loader .spinnerBlock{

-webkit-animation: rotate 1000ms linear infinite;

animation: rotate 1000ms linear infinite;

-webkit-transform-origin: center;

transform-origin: center;

display: block;

width: 50px;

height: 50px;

}

.loader span{

display: block;

border: 2px solid #fff;

border-radius: 50%;

height: 100%;

width: 100%;

position: absolute;

top: 0;

left: 0;

}

.loader soan:nth-child(1){

border-color: #eee;

}

.loader span:nth-child(2){

left: -18px;

top: 10px;

}

.loader span:nth-child(3){

left: -18px;

top: -10px;

}

.loader span:nth-child(4){

left: 0;

top: -18px;

}

.loader span:nth-child(5){

left: 18px;

top: -10px;

}

.loader span:nth-child(6){

left: 18px;

top: 10px;

}

.loader span:nth-child(7){

left: 0;

top: 18px;

}

@-webkit-keyframes rotate {

from{

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

to{

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes rotate {

from{

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

to{

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

运行代码便能看到完整的旋转效果！