Question

我在此动画上有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>

Answer 1

要达到您想要达到的效果，您需要一些Javascript。您应该执行以下操作：

当两张照片发生碰撞时（可以通过简单地检查它们的位置来完成），隐藏它们
在屏幕中间显示第三张图像

我希望我能理解你正在寻找的那种效果。

我建议您查看可以帮助您的文章：

css动画有3张图片

1 个答案: