CSS讓div同時改變顏色和移動懸停

我在屏幕上做了一個框，我希望它改變顏色並在懸停時移動到右下角。到目前爲止，我有這個...只改變顏色。我無法弄清楚如何使格都慢慢改變顏色，並移動到右下角的作品CSS讓div同時改變顏色和移動懸停

.topper { 
    background-color: blue; 
    width: 50px; 
    height: 50px 
} 

.topper:hover { 
    background-color: red; 
    -webkit-transform: translate(1400px, 800px); 
    -webkit-transition: all 20s ease-in-out; 
} 


<div class="topper"> 
</div>

排序，但有什麼辦法讓它自動OG的右下角，而不是我的寫入像1400px/800px的特定位置？我希望只使用CSS

來源

2016-03-05 Mocktheduck

如果你想在div移動...你怎麼樣，你動它。問題是，一旦你開始移動它......懸停將開始失敗Javascript是一個更好的選擇在這裏。 –

我想這樣做所有的CSS。我會一直把鼠標放在它上面。它只會移動和改變顏色，而我的鼠標跟着它 – Mocktheduck

鼠標不會自動跟隨你必須移動它......無論哪種方式......你在做什麼來改變div的位置？ –

我已經加入從left:0遷移到left:100%和從top:0到top:100%和已經使用的CSS方法calc()從最終長度（100％）減少的對象的大小。

body { 
 
width: 100%; 
 
height: 100vh; 
 
margin: 0px; 
 
} 
 

 
.topper { 
 
    left:0; 
 
    top: 0; 
 
    position: absolute; 
 
    background-color: blue; 
 
    width: 100px; 
 
    height: 100px; 
 
    -webkit-transition: all 1s ease-in-out; 
 
    transition: all 1s ease-in-out; 
 
} 
 

 
.topper:hover { 
 
    left: calc(100% - 100px); 
 
    top: calc(100% - 100px); 
 
    background-color: red; 
 
    -webkit-transition: all 8s ease-in-out; 
 
    transition: all 8s ease-in-out; 
 
}

<div class="topper"> 
 
</div>

來源

2016-03-05 23:25:07

偉大除了我的箱子必須從左上角到右下角 – Mocktheduck

更新。請重新檢查。 –

爲什麼你也添加了對簡單的.topper的轉換？剩下的是什麼：calc（100％ - 100px）; top：calc（100％ - 100px）;這樣做？我試圖將這些添加到我的原始代碼，他們不工作。 – Mocktheduck

CSS讓div同時改變顏色和移動懸停

回答

相關問題