我正在努力实现这个网站的相同页面转换效果http://56k.studiovoila.com/
所以经过几次搜索，我找到了这个教程https://tympanus.net/Tutorials/CSSMaskTransition/，我使用了他们在演示1中使用的PNG，并用适当的代码将其添加到我的项目中。
你可以在这里看到我的代码示例。(效果很模糊，但你可以猜到效果(
const btnClick = document.getElementById("btn-click");
const body = document.querySelector("body");
btnClick.addEventListener("click",(e)=>{
e.preventDefault();
body.classList.remove("reveal");
body.classList.add("disapear");
});
body.addEventListener("animationend",()=>{
body.classList.remove("disapear");
body.classList.add("reveal");
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
position: static;
height: 100vh;
width: 100vw;
-webkit-mask-image: url("https://i.ibb.co/G5TXwKc/sprite.png");
mask-image: url("https://i.ibb.co/G5TXwKc/sprite.png");
-webkit-mask-size: 7100% 100%;
mask-size: 7100% 100%;
background: yellow;
}
body.disapear {
animation: mask-play-disapear 2s steps(70) forwards;
}
body.reveal {
animation: mask-play-reveal 1.4s steps(70) forwards;
}
@keyframes mask-play-disapear {
from {
mask-position: 0 0;
-webkit-mask-position: 0 0;
}
to {
mask-position: 100% 0;
-webkit-mask-position: 100% 0;
}
}
@keyframes mask-play-reveal {
0% {
mask-position: 100% 0;
-webkit-mask-position: 100% 0;
}
100% {
mask-position: 0 0;
-webkit-mask-position: 0 0;
}
}
#div1 {
position: relative;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: lightblue;
}<body>
<div id="div1">
<a href="#" id="btn-click">click me</a>
</div>
</body>问题：
1。当用户看到firefox的转换时，但只能从Mac电脑上看到(Catalina 10.15.5(，这似乎是一个bug。你可以在我创建的网站上看到这个bug，网址是https://abiesco.ch
2.因为它是PNG，所以我无法在动画过程中轻松更改形状，所以它不是很灵活。我没有源文件(photoshop或后期效果(。
我的问题：
是否可以使用SVG变形来获得相同的效果？我知道我们可以将anime.js与tympanus教程和DesignCourse youtubeVideo一起使用。但我真的很想保留填充和离开屏幕的水-有机形状。
我已经尝试了bodymovin插件的后期效果，它允许将后期效果动画导出到一个json文件中，lottie.js可以制作动画。但是该插件不支持湍流置换过滤器(用于水效应(。
好的，我找到了一种更好的方法来动画页面转换。
我可以使用WebGL。
我在这里为我的案例找到了一个完美的例子，但目前我的技能还不够好，无法处理这个问题。
我做了一些关于着色器和过滤器的PIXI.JS教程，你能做的很神奇，但该死的很难。
当我的技术足够好的时候，我一定会深入到webgl。