html - CSS使div既改变颜色又在悬停时移动

Question

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

Answer 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>