我被困在一个点上。有 10 条直线(png 图像)。我想要的是在第一条线旋转 40 度后,第二条线应该开始旋转,然后是第三条,第四条,第五条等等! !!
代码:
<div class="hair" onclick="rotate()">
<img src="single.png" id="1" width="10" height="40">
<img src="single.png" id="2" width="10" height="40">
<img src="single.png" id="3" width="10" height="40">
<img src="single.png" id="4" width="10" height="40">
<img src="single.png" id="5" width="10" height="40">
<img src="single.png" id="6" width="10" height="40">
<img src="single.png" id="7" width="10" height="40">
<img src="single.png" id="8" width="10" height="40">
<img src="single.png" id="9" width="10" height="40">
<img src="single.png" id="10" width="10" height="40">
</div>
Javascript:
function rotate(){
for(var i=1;i<11;i++)
{
setInterval(function(){
document.getElementById(i).style.WebkitTransitionDuration="1s";
document.getElementById(i).style.webkitTransform = 'rotate(40deg)';
},100)
}
}