html中旋转特效,css3旋转特效

@-webkit-keyframes rotation{

from {-webkit-transform: rotate(0deg);}

to {-webkit-transform: rotate(360deg);}

}

.rotation{

-webkit-transform: rotate(360deg);

animation: rotation 1.7s linear infinite;

}

@-webkit-keyframes ro{

from {-webkit-transform: rotate(0deg);}

to {-webkit-transform: rotate(-360deg);}

}

.ro{

-webkit-transform: rotate(-360deg);

animation: ro 3.4s linear infinite;

}

@-webkit-keyframes ro1{

from {-webkit-transform: rotate(0deg);}

to {-webkit-transform: rotate(360deg);}

}

.ro1{

-webkit-transform: rotate(360deg);

animation: ro1 5.1s linear infinite;

}

.common{

width:120px;

height:20px;

line-height:36px;

cursor:pointer;

border-radius: 250px;

color:white;

text-align:center;

box-shadow:0 0 2px red;

}

.container{position:relative;top:15px;left:15px;width:150px; height:150px;border:3px solid #13da73;line-height:150px;}

.main{position:relative;top:15px;left:15px;width:180px; height:180px;border:3px solid #fb1fba;line-height:180px;}

.main1{width:210px; height:210px;border:3px solid #3ce20f;line-height:210px;float:left;}

.div_1{

position:relative;

background:#c35d90;

left: 15px;

top:65px;

}

.div_2{position:relative;top:45px;

background:#4067da;

-webkit-transform: rotate(30deg);

left: 15px;

}

.div_3{position:relative;top:25px;

background:#34ce9d;

-webkit-transform: rotate(60deg);

left: 15px;

}

.div_4{

position:relative;

background:#ce9934;

-webkit-transform: rotate(90deg);

left: 15px;

top:5px;

}

.div_5{

position:relative;top:-15px;

background:#48d012;

-webkit-transform: rotate(120deg);

left: 15px;

}

.div_6{

position:relative;top:-35px;

background:#8f24a9;

-webkit-transform: rotate(150deg);

left: 15px;

}