绝对定位过渡

是我

请考虑以下示例。球状的Div确实会移动,但它突然移动,而不是我希望它沿页面对角线过渡到右下角。为什么不这样呢?我错过了什么?

.one {
  background: green;
  height: 100px;
  width: 100px;
  position: absolute;
  border-radius: 100px;
  transition: all 1s ease;
}
.one:hover {
  background: red;
  bottom: 0px;
  right: 0px;
}
<div class="one"></div>

瓦巴夫·巴努沙利(Vaibhav bhanushali)

为了进行过渡,您需要在父元素和悬停元素选择器上都具有值。

在这里,我只是向两个选择器添加了适当的值,并通过轻松地减去了它们的高度。

.one {
  background: green;
  height: 100px;
  width: 100px;
  position: absolute;
  border-radius: 100px;
  transition: all 1s ease;
  top: 0%;
  left: 0%;
}
.one:hover {
  background: red;
  top: calc(100% - 100px);
  left: calc(100% - 100px);
}
<div class="one"></div>

这些将适用于大多数现代浏览器。您也可以使用pollyfill使其与向后浏览器一起使用

为了进行过渡,两个选择器上都需要值。

在您的情况下,父选择器没有bottom或的任何值left,但是如果您查看我的代码,父选择器和悬停选择器都具有顶部和左侧的值。

我们只需要指定值,以便浏览器知道从哪里开始

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章