gpt4 book ai didi

html - 如何使图像从屏幕的一侧滑动到另一侧的固定位置?

转载 作者:行者123 更新时间:2023-11-28 13:38:03 27 4
gpt4 key购买 nike

我的页面上现在有两个 float 图像,代码如下所示:

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

我已经尝试了我所知道的,但我仍然是一个初学者,所以非常感谢任何帮助。谢谢!

附言如果有人点击每个页面(这是一个 tumblr 博客)时图像可以保留在那里而不是每次都重置,那将是理想的。

最佳答案

据我所知有两种方法: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

关于html - 如何使图像从屏幕的一侧滑动到另一侧的固定位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12733363/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com