Question

我希望此fiddle中的移动叠加三角形可以拉伸其动画以适合森林图像。你现在看到的问题是它在顶部创建了空白并且移动了三角形而不是拉伸它。如果有人有智能解决方案请评论。

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

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

Answer 1

只需改变＆＃34;反弹＆＃34;动画。添加比例属性。

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0) scale(1);
    }

    40% {
        -webkit-transform: translateY(10vh) scale(2);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) scale(1);
    }

    40% {
        transform: translateY(10vh) scale(2);
    }
}

https://jsfiddle.net/fbnwj3ag/5/

Answer 2

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

@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/

使三角形动画伸展而不是移动

2 个答案: