一个宽1000px,高100px的主盒子,一个宽100px,高100px的子盒子,怎么只用animation.css将子盒子从左到右移出节点,并且不占据父节点位置
时间: 2024-03-21 07:43:22 浏览: 10
可以通过以下步骤来实现:
1. 首先,在HTML中创建一个宽1000px,高100px的主盒子,并在其中添加一个宽100px,高100px的子盒子。
```html
<div class="main-box">
<div class="sub-box"></div>
</div>
```
2. 接着,在CSS中为子盒子添加动画效果,并设置其位置为负的子盒子宽度,使其隐藏在主盒子左侧。
```css
.sub-box {
width: 100px;
height: 100px;
position: absolute;
left: -100px;
animation: slide-in 1s forwards;
}
@keyframes slide-in {
from {
left: -100px;
}
to {
left: 0;
}
}
```
在上述代码中,我们为子盒子添加了一个名为slide-in的动画效果,通过设置left属性从-100px变为0,实现了从左到右移出节点的效果。同时,通过设置animation-fill-mode为forwards,使动画结束后子盒子停留在动画结束时的位置,即不占据父节点位置。
3. 最后,为主盒子设置position为relative,使其成为子盒子的相对定位容器。
```css
.main-box {
width: 1000px;
height: 100px;
position: relative;
}
```
完整代码如下:
```html
<div class="main-box">
<div class="sub-box"></div>
</div>
```
```css
.sub-box {
width: 100px;
height: 100px;
position: absolute;
left: -100px;
animation: slide-in 1s forwards;
}
@keyframes slide-in {
from {
left: -100px;
}
to {
left: 0;
}
}
.main-box {
width: 1000px;
height: 100px;
position: relative;
}
```