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同时改变颜色和移动悬停

回答

相关问题