当下面的代码在这个小提琴中运行时,元素“.title-wrap”和“.bg-wrap”并排出现。谁能告诉我如何做到这一点,所以“.bg-wrap”会自动占用整个“.wrap”,而css更改最少。
html:
<div class="wrap selected">
<div class="title-wrap"></div>
<div class="bg-wrap"></div>
</div>
CSS:
.selected .title-wrap{
position:initial !important;
text-align: center;
height:29.42px;
animation:titleAnimation .2s;
-webkit-animation:titleAnimation .2s;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes titleAnimation
{
from {left:85px;top:5px}
to {left:25px;top:5px}
}
.wrap .title-wrap{
width:202px;
display:block;
position:absolute;
top:5px;
left:85px;
background:black;
}
.selected .bg-wrap{
background:green;
height:700px;
width:100%;
animation:bgAnimation .2s;
-webkit-animation:bgAnimation .2s;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes bgAnimation
{
from {left:85px;top:35px;}
to {left:205px;top:0px;}
}
.wrap .bg-wrap{
display:block;
position:absolute;
top:35px;
left:85px;
}