我在这个动画上有两张图片，我想在前两张图片合并时在现场制作第三张图片。两个人朝对方跑过来，我要他们在屏幕中间拥抱。我希望我解释得很好，因为我的英语不好。这是我的密码。提前谢谢！
<!DOCTYPE html>
<html>
<head>
<title>Animacija</title>
<style>
.from-left {
position: absolute;
left: -100px;
animation: move-right 3s ease forwards;
}
.from-right {
position: absolute;
right: -100px;
animation: move-left 3s ease forwards;
}
@keyframes move-right {
100% {
left: calc(50% - 50px);
}
}
@keyframes move-left {
100% {
right: calc(50% - 50px);
}
}
</style>
</head>
<body>
<div class="container">
<img class="from-left" src="john.jpg">
<img class="from-right" src="catana.jpg">
</div>
</body>
</html>最佳答案
为了达到你想要的效果，你需要一些Javascript。
您应该执行以下操作：
当两张照片相撞时（可以通过简单地检查它们的位置来完成），将它们隐藏起来
在屏幕中间显示第三幅图像
我希望我能很好地理解你正在寻找的那种效果。
我建议你检查一下那些可以帮助你的文章：
Retrieve the position (X,Y) of an HTML element
JavaScript hide/show element