今天做的测试，先记下来
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>Carl Test</title> <style> .bag-icon { background-image: url("http://static.360buyimg.com/finance/mobile/financial/xiaobai/1.0.0/css/i/bag2.png"); height: 50px; width: 50px; background-position: left top; display: block; position: relative; z-index: 2; top:-7px; } #rotateBox{ left:400px; position:absolute; top:50px; transform-origin: center top 0; } </style> <script src="./js/jquery-1.8.0.min.js"></script> </head> <body> <div id="rotateBox" style="transform: rotateZ(0deg);" > <svg id="svg_line1" height="165" width="50" style=" z-index: 4;position:relative"> <path stroke-width="1" stroke="#ff801a" fill="none" d="M25 0 Q25 65, 25 165"> </svg> <a class="bag-icon" href="javascript:;"></a> </div> <script> var intval ; function rotateBox(){ var t=500,va =Number(5); intval= setInterval(function(){ var tmp = Number(Math.cos(t)).toFixed(2); tmp = tmp * va; $('#rotateBox').css('transform','rotateZ('+(tmp)+'deg)'); $('#svg_line1 path').attr('d','M25 0 Q'+(Number(25)+Number(tmp*0.8))+' 65, 25 165'); va=va-0.1; if(t>0 && va>0){t=t-1;}else{ $('#rotateBox').css('transform','rotateZ(0deg)');clearInterval(intval); $('#svg_line1 path').attr('d','M25 0 Q25 65, 25 165'); } },100); } rotateBox(); setInterval(function(){ rotateBox(); },10000); </script> </body> </html>