@-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; }