html - 使三 Angular 形动画拉伸(stretch)而不是移动

Question

我想要这个 fiddle 中的移动覆盖三 Angular 形拉伸(stretch)其动画以适应森林图像。您现在看到的问题是它在顶部创建了空白并移动了三 Angular 形而不是拉伸(stretch)它。如果有人有聪明的解决方案，请发表评论。

我尝试修改这些值，但无法使其正常工作。

border-left: 47.5vw solid transparent;
border-right: 47.5vw solid transparent;
border-top: 95vh solid rgba(255, 255, 255, 0.2);

Answer 1

它不起作用，因为您有 95vw (2x 47.5) 宽度的边框(左/右)，95vh 的边框顶部，您只需使用翻译将其向下移动。我认为更好的方法是在动画中操纵边框宽度

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        border-left-width: 47.5vw; 
        border-right-width: 47.5vw; 
        left: 2.5vw;
        border-top-width:95vh;
        top: -5vh;
    }

    40% {
        border-left-width: 50vw;
        border-right-width: 50vw;
        left: 0;
        border-top-width: 100vh; 
        top: 0vh;
    }
}

https://jsfiddle.net/2j29b9d4/