从盒子的边缘过渡填充

Question

我想要创建一个框(div)，其中填充增加时，悬浮。实际上是个全屏按钮。

我试过：

.full_screen {
width:20px;
height:20px;
background-color:rgba(0,0,0,0.8);
border-radius:2px;
position:absolute;
transition:all 0.6s; //important property
left:82%;
}

.full_screen:hover {
padding-top:10px; //!important property
padding-right:10px; //important property
}

我从上到右增加了填充物，但效果不佳。

Answer 1

来自https://developer.mozilla.org/en-US/docs/Web/CSS/left

对于绝对定位的元素(位置:绝对或位置:固定)，它的left属性指定元素的左侧边缘与其包含块的左侧边缘之间的距离。

left:82%;

CSS将此解释为“将此框的左侧边沿从包含块的左侧边缘保持82%”。因此，当尺寸因填充物而发生变化时，左边的边缘就会保持不变。

演示，使用问题中的代码

你想要的是保持正确的优势。为此，您可以在CSS中指定right而不是left。

right:18%;

具有上述属性的演示