3张图片的css动画

我对这个动画有2张图片，当前两张图片合并时，我想当场做第3张图片。两个人朝对方奔跑，我希望他们在屏幕中间拥抱。我希望我解释得很好，因为我的英语不好。这是我的代码。提前致谢！3张图片的css动画

<!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>

来源

2017-08-10 Miloš Marković

要做到你想达到的效果，你需要一些JavaScript。你应该做到以下几点：

当两个图片碰撞（这可以通过简单地检查自己的位置来完成），隐藏
显示第三图像在屏幕中间

我希望我能很好地理解你正在寻找的效果。

，我建议你检查这些物品，可以帮助你：

来源

2017-08-10 14:11:28

非常感谢您！但有什么机会给我完整的解决方案代码？随机图片。那将是真棒！ –

我很抱歉，但StackOverflow不是代码写入服务。我给你一个你应该做什么的清晰指南，说实话，这很容易。但是如果你试图自己做，而不是复制其他人的代码，甚至不去思考这些代码的真实性，你会学到更多东西。 –

3张图片的css动画

回答

相关问题