有人可以帮助我使用 Web 应用程序来模拟图像传输吗

Question

我正在尝试通过显示图像从原始设备上消失并且在目标设备上出现延迟后来模拟图像传输。该应用程序用于设计手势的实验

我已经完成了以下操作，显示了图像在悬停时如何出现和消失

    #pic3 {
    max-width: 800px;
    max-height: 500px;
    width:500px; height:800px;
    position:absolute;
    }

    #pic3 {
    max-width: 800px;
    max-height: 500px;
    width:500px; height:800px;
    position:absolute;
    }

    #pic4 {
    width:500px; height:800px;
    position:absolute;
    max-width:800px;
    max-height: 500px;
    opacity:0;
    -webkit-transition: opacity 1s;
    }

    #pic3:hover ~ #pic4, #pic4:hover {
    opacity:1;
    }

 <div class="maps1">
    <img id="pic3" src="http://wallpapersfor.me/wp-content/uploads/2012/02/cute_cat_praying-1280x800.jpg" />
    <img id="pic4" src="http://www.garageservicesruislip.co.uk/communities/5/004/008/507/645/images/4586026183.jpg />
</div>

Answer 1

您在最后一个 img 中的 html 中有错字（缺少“）

顺便说一句。我会尝试使用 jQuery 解决它

Answer 2

如果您尝试在一台设备（即台式计算机）上制作动画，则在另一台设备（即智能手机）上触发动画，您将需要某种方式在两者之间进行通信。需要某种会话 ID 或其他标记，以促进访问网页上内容的两个单独浏览器之间的通信，每个浏览器都分别加载和呈现。

您可以通过多种方式实现这种功能，但我建议使用node.js 阅读websockets。

如果你只是想在一个屏幕上模拟它（阅读：一个浏览器，一个会话），那么你最好做类似@jbutler483 描述的事情。

Answer 3

一个简单的关键帧解决方案：

.device {
  position: absolute;
  height: 200px;
  width: 150px;
  background: gray;
  border: 10px solid black;
  border-radius: 5px;
  top: 0;
  left: 400px
}
.device:first-child {
  right: auto;
  left: 0;
}
img {
  height: 100px;
  width: 100px;
  z-index: 8;
  position: absolute;
  top: 20px;
  left: 30px;
  -webkit-animation: animated 5s infinite;
  animation: animated 5s infinite;
  -webkit-animation-direction: linear;
  /* Chrome, Safari, Opera */
  animation-direction: linear;
}
@-webkit-keyframes animated {
  10% {
    opacity: 1;
  }
  30% {
    opacity: 0;
    left: 30px;
  }
  60% {
    opacity: 0;
    left: 430px;
  }
  90% {
    left: 430px;
    opacity: 1;
  }
  100% {
    left: 430px;
    opacity: 1;
  }
}
@keyframes animated {
  10% {
    opacity: 1;
  }
  30% {
    opacity: 0;
    left: 30px;
  }
  60% {
    opacity: 0;
    left: 430px;
  }
  90% {
    left: 430px;
    opacity: 1;
  }
  100% {
    left: 430px;
    opacity: 1;
  }
}

<div class="device"></div>
<img src="http://placekitten.com/g/300/300" />
<div class="device"></div>

---

我的方法

您可以为此使用关键帧，并使用一点魔法来创建漂亮的效果。在这里，我使用了旋转、不透明度和移动来生成从一台设备到另一台设备的“移动”。

.start,
.end {
  position: absolute;
  height: 250px;
  background: gray;
  border: 10px solid black;
  border-radius: 5px;
  width: 100px;
  top: 0;
  left: 0;
}
.end {
  left: auto;
  right: 0;
}
.imgMove {
  background: url(http://placekitten.com/g/300/300);
  background-size: 100% 100%;
  height: 50px;
  width: 50px;
  position: absolute;
  top: 100px;
  left: 40px;
  z-index: 8;
  -webkit-animation: myfirst 3s infinite;
  animation: myfirst 3s infinite;
}
#two {
  background: url(http://placekitten.com/g/200/300);
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.4s;
}
#three {
  background: url(http://placekitten.com/g/300/200);
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.6s;
}
@-webkit-keyframes myfirst {
  0% {
    top: 100px;
    height: 50px;
    width: 50px;
    opacity: 0;
  }
  50% {
    top: 10px;
    height: 200px;
    width: 200px;
    left: calc(50% - 100px);
    -webkit-transform: rotate(360deg);
    opacity: 1;
  }
  100% {
    top: 100px;
    height: 50px;
    width: 50px;
    left: 90%;
    -webkit-transform: rotate(720deg);
    opacity: 0;
  }
}
@keyframes myfirst {
  0% {
    top: 100px;
    height: 50px;
    width: 50px;
    opacity: 0;
  }
  50% {
    top: 10px;
    height: 200px;
    width: 200px;
    left: calc(50% - 100px);
    transform: rotate(360deg);
    opacity: 1;
  }
  100% {
    top: 100px;
    height: 50px;
    width: 50px;
    left: 90%;
    transform: rotate(720deg);
    opacity: 0;
  }
}

<div class="wrap">
  <div class="imgMove" id="one"></div>
  <div class="imgMove" id="two"></div>
  <div class="imgMove" id="three"></div>
  <div class="start">START</div>
  <div class="end">END</div>
</div>