带有 svg 图像、css、html、js 的页面之间的过渡效果

Question

好的，也许 stackoverflow 可以提供帮助？:)

我正在尝试用 svg 图像创建页面过渡效果，但运气不佳。当用户单击第 1 页中的链接时，菱形 svg 会淡入，就像进入第 2 页的门户一样。

基本想法是在 Alphaville - Forever Young 视频的介绍中重现太空旅行：https://www.youtube.com/watch? v=t1TcDHrkQYg :)

也许钻石也会从蓝色逐渐变为透明（但这是下一步）。

钻石 svg： https: //www.onlinewebfonts.com/icon/413

Answer 1

我建议您使用clip-path而不是 svg，因为为这么大的 svg 设置动画会非常缓慢且非常滞后。您可以更改剪辑路径以显示您想要的内容。Bennet Feely创建了一个很好的生成器来帮助解决这个问题。对于动画本身，您可以增加宽度和高度以适合您的屏幕。然后通过设置 Z 轴动画来填充剩余部分。动画在全屏下比在较小的预览中看起来更好const links = document.querySelectorAll(".page-transition");const overlay = document.querySelector(".overlay__diamond");for(const link of links) {&nbsp; link.addEventListener("click", (event) => {&nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; overlay.classList.add("overlay__diamond--animate");&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; setTimeout(() => window.location.reload(), 1000);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // This one is correct, one above is for the demo&nbsp; &nbsp; // setTimeout(() => (window.location.href = link.href), 1000); // Same time as animation duration&nbsp; });}.page {&nbsp; background: green;&nbsp;&nbsp;&nbsp; /* For demontrational purposes only, just to increase page size */&nbsp; position: absolute;&nbsp; left: 0;&nbsp; top: 0;&nbsp; width: 100%;&nbsp; height: 100%;}.overlay {&nbsp; position: absolute;&nbsp; left: 0;&nbsp; top: 0;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; display: flex;&nbsp; align-items: center;&nbsp; justify-content: center;&nbsp; overflow: hidden;&nbsp; pointer-events: none;&nbsp; perspective: 500px; /* Needed for translateZ to work */}.overlay__diamond {&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; background: blue;&nbsp; animation: fadeout 1s linear forwards;}.overlay__diamond--animate {&nbsp; animation: zoom 1s linear forwards;&nbsp; clip-path: polygon(50% 0%, 75% 50%, 50% 100%, 25% 50%);}@keyframes fadeout {&nbsp; 0% {&nbsp; &nbsp; opacity: 1;&nbsp; }&nbsp; 100% {&nbsp; &nbsp; opacity: 0;&nbsp; }}@keyframes zoom {&nbsp; 0% {&nbsp; &nbsp; width: 0;&nbsp; &nbsp; height: 0;&nbsp; &nbsp; transform: translateZ(0);&nbsp; }&nbsp; 100% {&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; transform: translateZ(400px); /* Can't go higher then the perspective */&nbsp; }}<div class="page">&nbsp; <!-- Replace #link with your actual urls -->&nbsp; <a class="page-transition" href="#link">Link</a>&nbsp; <a class="page-transition" href="#link">Link</a>&nbsp; <a class="page-transition" href="#link">Link</a>&nbsp;&nbsp;&nbsp; <div class="overlay">&nbsp; &nbsp; <div class="overlay__diamond"></div>&nbsp; </div></div>