Question

我的页面上有两个浮动图像，代码如下：

<html>
<head>
<style type="text/css">

#img1{
  position: fixed;
  left: 10px;
  top: 10px;
  z-index: 10;
}

#img2{
  position: fixed;
  right: 10px;
  bottom: 100px;
  z-index: 10;
}

</style>
</head>

<body>
  <img src="IMAGE1.png" id="img1">
  <img src="IMAGE2.png" id="img2">
</body>
</html>

然而，我想img2从左边滑入它的位置然后停留在那里，而img1在img2完成它的移动后出现。它需要在网页打开时自动发生。

我已经尝试了我所知道但我仍然是一个非常初学者所以任何帮助将不胜感激。谢谢！

P.S。如果图像可以留在那里，而有人点击每个页面（这是一个tumblr博客）并且不是每次都重置，那将是理想的。

Answer 1

据我所知，有两种方法：Javascript和CSS3。

使用JS，我建议使用一个库，比如已经有animate方法的jQuery，它会派上用场：http://api.jquery.com/animate/

（小编辑）如果您想在页面加载后进行动画，请检查.ready方法：http://api.jquery.com/ready/

使用CSS3，您可以选择转换，请在此处阅读更多内容：http://www.w3schools.com/css3/css3_transitions.asp

如何将图像从屏幕的一侧滑动到另一侧的固定位置？

1 个答案: