尋找（可能是CSS）涉及移動物體的設計解決方案

我想到了一個想法，並且希望獲得關於最佳實現的意義的一些觀點。這個前提基本上是緩慢移動的物體在箱體內部迴盪。想像遊戲中的「小行星」，但沒有太空船（並與牆壁碰撞而不是通過）。尋找（可能是CSS）涉及移動物體的設計解決方案

因爲這是在背景和純粹的審美，我認爲它是相當輕量級。我會使用所有的CSS，但我的問題是可以將多個動畫應用於一個對象？說，如果我有一個方形蹦跳着使用

--------- 
 
.square { 
 
     animation: moveX 2.05s linear 0s infinite alternate, moveY 2.4s linear 0s infinite 
 

 
     @keyframes moveX { 
 
     from { left: 0; } to { left: 480px; } 
 
     } 
 

 
     @keyframes moveY { 
 
     from { top: 0; } to { top: 280px; } 
 
     } 
 
}

我怎樣才能得到它的連續旋轉，以及一箱？或者至少創造一些這樣做的效果？如果我需要將某些東西放在一起，那麼很好，只是好奇我是否忽略了CSS。

來源

2016-11-14 Benediah

看看[這個答案]（http://stackoverflow.com/a/21320622/3157745）。您可以將「旋轉」類添加到您的「square」類元素上並播放該結果。基於不同類的鏈接動畫是一種可能的解決方案，並將多個動畫鏈接到同一個類中。 – Xenyal

您可以在CSS中添加旋轉的元素：

.square { 
    position: relative; /* Ensure it's movable with non static position */ 
    animation: 
    moveX 2.05s linear 0s infinite alternate, 
    moveY 2.4s linear 0s infinite, 
    rotate 2s linear infinite; 
} 
@keyframes moveX { 
    from { left: 0; } to { left: 480px; } 
} 
@keyframes moveY { 
    from { top: 0; } to { top: 280px; } 
} 
@keyframes rotate { 
    0% {transform: rotate(0deg);} 100% {transform: rotate(359deg);} 
}

使用-359deg逆時針旋轉。

來源

2016-11-14 00:49:51

尋找（可能是CSS）涉及移動物體的設計解決方案

回答

相關問題