CSS使div既改变颜色又悬停移动答案

【问题标题】：CSS make div both change color and move on hoverCSS使div既改变颜色又悬停移动
【发布时间】：2016-03-05 23:10:09
【问题描述】：

我在屏幕上制作了一个框，我希望它在悬停时改变颜色并移动到右下角。到目前为止，我有这个......它只会改变颜色。我不知道如何让 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>

SOrt 的作品，但有什么办法让它自动 og 到右下角，而不是我写特定的位置，比如 1400px/800px？我只想使用 css

【问题讨论】：

如果你想让 div 移动...你是如何移动它的。问题是，一旦你开始移动它......悬停将开始失败 Javascript 在这里是一个更好的选择。
我想做所有的CSS。我会一直把鼠标放在它上面。它只会在我的鼠标跟随它时移动并改变颜色
鼠标不会自动跟随，你必须移动它……不管怎样……你在做什么来改变 div 的位置？
我稍微改了一下。我使用 -webkit-transform: translate(1400px, 800px); -webkit-transition：所有 20 年代的轻松进出；现在，它有点工作，但那些位置...... 1400px 和 800px 是随机的。有没有什么自动的方法让它直接到右下角？
您需要上下文...什么的右下角？尝试研究定位...而不是变换。

标签： html css hover transition

【解决方案1】：

我添加了从 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>

【讨论】：

很好，除了我的盒子必须从左上角到右下角
为什么你也将过渡添加到简单的 .topper 中？剩下的是什么： calc(100% - 100px);顶部：计算（100% - 100px）；这个做什么？我尝试将这些添加到我的原始代码中，但它们不起作用。
您必须使用您的对象大小而不是 100 像素。 100px 是本示例中元素的大小。动画位于 .topper 中，以动画方式返回其原始位置（当光标离开元素时）。