0

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

<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 完成移动后立即出现。它需要在网页打开时自动发生。

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

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

4

1 回答 1

0

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

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

（小编辑）如果您希望在页面加载后发生动画，请查看.ready方法：http ://api.jquery.com/ready/

使用 CSS3，您可以使用过渡，在这里阅读更多内容：http: //www.w3schools.com/css3/css3_transitions.asp

于 2012-10-04T18:23:29.577 回答