CSS转换父div内的子div的宽度
问题描述:
我想使用CSS在5秒内将子div缓慢地从一个像素数量扩展到另一个像素数量(同时处于活动状态)。这一定是可能的,对吧?我试图做到这一点的方式不起作用。CSS转换父div内的子div的宽度
#parent {
background: black;
height: 10px;
width: 300px;
z-index: 1;
}
#child{
background: white;
z-index: 2;
height: 10px;
width: 10px;
transition: width 5s ease-out;
}
#parent:active #child{
max-width: 290px;
transition: max-width 5s ease-in;
}
<div id='parent'>
<div id='child'></div>
</div>
答
你可以选择改变width
或max-width
在活动状态,所以在过渡您可以指定你想改变什么。在你的代码中,你定义了固定的width
,然后你改变了max-width
但是这并没有做任何事情,因为宽度仍然是一样的。
#parent {
background: black;
height: 10px;
width: 300px;
z-index: 1;
}
#child{
background: white;
z-index: 2;
height: 10px;
max-width: 10px;
transition: max-width 5s ease-out;
}
#parent:active #child{
max-width: 290px;
}
<div id='parent'>
<div id='child'></div>
</div>
吧!谢谢! – SPV
不客气。 –