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>

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

Answer 1

我添加了从left:0到left:100%以及top:0到top:100%的移动，并使用了css calc()方法来减少对象大小最终长度（100％）。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

CSS使div都改变颜色并继续悬停

1 个答案: