我正在尝试一个动画,您在其中单击按钮,它会从下到上填充颜色。单击它时,绝对位置的元素会发生变化并上升到框。
Demo (单击该元素后,尝试调整窗口大小并查看问题)
在动画之前 css 是:
#boton_auto {border-bottom: 5px solid #2dbbdc;}
动画后(80px为框高):
#boton_auto {border-bottom: 80px solid #2dbbdc;}
我知道我可以使用 top:0px;但我需要元素与其他按钮对齐基线。我清楚了吗?
感谢您的帮助!
最佳答案
从你的 fiddle 开始,你没有正确调用 svg 类(你错过了点。你写的是“.svg”而不是“.svg”。
而且我不会使用边框来实现您的效果。如果您正在寻找一个完整的响应图像,因为宽度 28% 可能表明我会使用一个完整的绝对容器,它会在点击时(垂直)增长:
.blue {
height:4px;
position:absolute;
bottom:0px;
width:100%;
background-color:#2dbbdc;
z-index:-1;
}
然后你不会有跨度(AUTO 文本)的问题,到顶部。
我做了这个 fiddle 为你
关于css - 边框干扰绝对定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29129242/