我在这个动画上有 2 张图片，我想在前两张图片合并时当场制作第 3 张图片。两个人跑向对方，我希望他们在屏幕中间拥抱。我希望我解释得很好，因为我的英语不好。这是我的代码。提前致谢!
<!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。 您应该执行以下操作:
- 当两张图片发生碰撞时(这可以通过简单地检查它们的位置来完成)，隐藏它们
- 在屏幕中间显示第三张图片
我希望我能很好地理解您正在寻找的那种效果。
我建议您查看那些可以帮助您的文章:
关于javascript - 带有3张图片的css动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45615014/