<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>表格行移动</title> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <style> </style></head><body><div class="myMove"> <div onclick="controllMove()"> 点击我，让下面的哥们切换转的状态 </div> <div class="move"> <div class="middle"> <div class="center"> 弄个字看效果 </div> </div> </div></div> </body></html>.myMove{ margin: 0 auto; text-align: center; } .move{ width: 180px; height: 180px; border-radius: 50%; text-align: center; line-height: 150px; display: table; vertical-align: middle; border: 10px solid rgba(0,0,0,.1); margin: 0 auto; } .moveclass{ animation:moveTurn 10s linear infinite; } @keyframes moveTurn{ 0%{transform:rotate(0deg)} 25%{transform:rotate(90deg)} 50%{transform:rotate(180deg)} 75%{transform:rotate(270deg)} 100%{transform:rotate(360deg)} } .middle{ width: 94%; height: 94%; border-radius: 50%; background-image: url("images/singlecover.png"); background-position: center; margin: 0 auto; vertical-align: middle; display: table-cell; } .center{ width: 80%; height: 80%; border-radius: 50%; background: #666; background-image: url("images/1.jpg"); text-align: center; line-height: 20px; margin: 0 auto; background-position:center; }xxxxxxxxxxfunction controllMove(){ $(".move").toggleClass("moveclass"); $(".move").attr("transform",""); }