Html CSS动画条纹不工作 嘿，伙计们，

下面我有两段代码。在第一个例子中，我有漂亮的条纹，它们根据窗口大小调整大小，并且总是居中（我尝试了一些动画，但我没有得到像片段2中的动画那样的效果）

但是我需要一个动画，这个动画显示在第二个片段中，条纹应该从下往上，我想在最后的结果中保留它

所以我需要与第一个和第二个片段进行融合

第一：

html，正文{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
#位置：固定；
}
.面具{
身高：100%；
溢出：隐藏；
位置：相对位置；
}
.集装箱{
身高：100%；
裕度：0-100vh；
#位置：绝对位置；
}
.条纹{
浮动：左；
身高：100%；
宽度：2%；
利润率：0.1%；
底部：0%；
最大高度：0%；
#位置：绝对位置；
背景色：黑色；
变换：倾斜（-20度）；
#变换原点：底部；
#变换原点：左下角；
动画：ani 1s线性1向前；
}
.条纹：第n个孩子（1）{
动画延迟：0.0s；
}
.条纹：第n个孩子（2）{
动画延迟：0.2s；
}
.条纹：第n个孩子（3）{
动画延迟：0.4s；
}
.条纹：第n个孩子（4）{
动画延迟：0.6s；
}
.条纹：第n个孩子（5）{
动画延迟：0.8s；
}
.条纹：第n个孩子（6）{
动画延迟：1s；
}
.条纹：第n个孩子（7）{
动画延迟：1.2s；
}
.条纹：第n个孩子（8）{
动画延迟：1.4s；
}
.条纹：第n个孩子（9）{
动画延迟：1.6s；
}
.条纹：第n个孩子（10）{
动画延迟：1.8s；
}
.条纹：第n个孩子（11）{
动画延迟：2s；
}
.条纹：第n个孩子（12）{
动画延迟：2.2s；
}
.条纹：第n个孩子（13）{
动画延迟：2.4s；
}
.条纹：第n个孩子（14）{
动画延迟：2.6s；
}
.条纹：第n个孩子（15）{
动画延迟：2.8秒；
}
.条纹：第n个孩子（16）{
动画延迟：3s；
}
.条纹：第n个孩子（17）{
动画延迟：3.2s；
}
.条纹：第n个孩子（18）{
动画延迟：3.4s；
}
.条纹：第n个孩子（19）{
动画延迟：3.6s；
}
.条纹：第n个孩子（20）{
动画延迟：3.8秒；
}
.条纹：第n个孩子（21）{
动画延迟：4s；
}
.条纹：第n个孩子（22）{
动画延迟：4.2s；
}
.条纹：第n个孩子（23）{
动画延迟：4.4s；
}
.条纹：第n个孩子（24）{
动画延迟：4.6s；
}
.条纹：第n个孩子（25）{
动画延迟：4.8秒；
}
@关键帧ani{
0% {
最大高度：0%；
}
100% {
最大高度：100%；
}
}

另一种方法：

• 底部的主容器

• 条纹容器作为弹性盒，条纹与底部对齐

• 高度动画

html，
身体{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
.面具{
最大高度：100%；
宽度：100%；
溢出：隐藏；
位置：绝对位置；
底部：0；
左：0；
}
.集装箱{
显示器：flex；
对齐项目：柔性端；
左边缘：-20%；
}
.条纹{
浮动：左；
身高：0；
宽度：2%；
利润率：0.1%；
底部：0；
背景色：黑色；
变换：倾斜（-20度）；
变换原点：左下角；
动画：ani 1s线性1向前；
}
.条纹：第n个孩子（1）{
动画延迟：0.0s；
}
.条纹：第n个孩子（2）{
动画延迟：0.2s；
}
.条纹：第n个孩子（3）{
动画延迟：0.4s；
}
.条纹：第n个孩子（4）{
动画延迟：0.6s；
}
.条纹：第n个孩子（5）{
动画延迟：0.8s；
}
.条纹：第n个孩子（6）{
动画延迟：1s；
}
.条纹：第n个孩子（7）{
动画延迟：1.2s；
}
.条纹：第n个孩子（8）{
动画延迟：1.4s；
}
.条纹：第n个孩子（9）{
动画延迟：1.6s；
}
.条纹：第n个孩子（10）{
动画延迟：1.8s；
}
.条纹：第n个孩子（11）{
动画延迟：2s；
}
.条纹：第n个孩子（12）{
动画延迟：2.2s；
}
.条纹：第n个孩子（13）{
动画延迟：2.4s；
}
.条纹：第n个孩子（14）{
动画延迟：2.6s；
}
.条纹：第n个孩子（15）{
动画延迟：2.8秒；
}
.条纹：第n个孩子（16）{
动画延迟：3s；
}
.条纹：第n个孩子（17）{
动画延迟：3.2s；
}
.条纹：第n个孩子（18）{
动画延迟：3.4s；
}
.条纹：第n个孩子（19）{
动画延迟：3.6s；
}
.条纹：第n个孩子（20）{
动画延迟：3.8秒；
}
.条纹：第n个孩子（21）{
动画延迟：4s；
}
.条纹：第n个孩子（22）{
动画延迟：4.2s；
}
.条纹：第n个孩子（23）{
动画延迟：4.4s；
}
.条纹：第n个孩子（24）{
动画延迟：4.6s；
}
.条纹：第n个孩子（25）{
动画延迟：4.8秒；
}
@关键帧ani{
0% {
高度：0vh；
}
100% {
高度：100vh；
}
}

---

好的，在片段中看起来不错。但是，如果你把CSS和HTML放在一个额外的文档中，在浏览器中尝试这个方法，并将窗口宽度尽可能小，高度尽可能大，你就会看到我想要防止左上角出现空白的地方。然后我更改了你的代码。容器中：左侧边缘：-20%；至余量：0-100vh；如果你现在看，墙角不见了，条纹变化得很完美