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動畫

回答

相關問題