javascript或css动画文件传输

Question

我想显示文件传输...就像从一个文件夹到另一个文件夹一样，我已经能够使用JavaScript进行传输，但是我所做的只是：

<script type="text/javascript">
var img;
var animateR;
var animateL;

function init(){
 img = document.getElementById('file');
 img.style.left = '35px'; 
}

function moveRight(){

 img.style.display= 'block'; 
 img.style.left = parseInt(img.style.left) + 10 + 'px';
 animateR = setTimeout(moveRight,30);

 if(parseInt(img.style.left)>600){
   clearTimeout(animateR);
   moveLeft();
  }
}

function moveLeft(){

  img.style.left = parseInt(img.style.left) - 10 + 'px';
  animateL = setTimeout(moveLeft,30); 

   if(parseInt(img.style.left)<38){
     clearTimeout(animateL);
     moveRight();
     }
 }

 window.onload =init;
 </script>

这项工作对我来说有效，但是我希望显示文件在从右文件夹移至左文件夹并在上传文件时回到右折的同时旋转。

我也想如果最好的方法来解决这个问题会是gif？

我想要一种像飞行文件一样的效果

Answer 1

您可以像这样在css中旋转图像：

#rot{
    animation: anime1 2s;
    -webkit-animation: anime1 2s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}


@keyframes anime1 {
    to {
        -ms-transform: rotate(360deg); /* IE 9 */
        -webkit-transform:rotate(360deg);/*Chrome & Opera*/
        transform: rotate(360deg); /* The best browser (i mean firefox) */
    }
}


@-webkit-keyframes anime1 {
    to {
        -ms-transform: rotate(360deg); /* IE 9 */
        -webkit-transform:rotate(360deg);
        transform: rotate(360deg);
    }
}

然后只需使用js显示或隐藏动画图像

Answer 2

如果我已正确阅读您的代码，则说明文件在左右边界之间来回跳动。 您可以使用CSS3 transform属性在文件来回移动时旋转文件。

transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */

但是，您仍然只是以10像素为增量移动图像文件，这看起来可能很不稳定。 更好的解决方案是使用CSS关键帧动画。