请考虑以下示例。球状的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>
为了进行过渡,您需要在父元素和悬停元素选择器上都具有值。
在这里,我只是向两个选择器添加了适当的值,并通过轻松地减去了它们的高度。
.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] 删除。
我来说两句