我在给遮罩的x和y位置设置动画时遇到一些麻烦。
1]遮罩为波浪形,在透明背景上为黑色。2)x或y都可以动画,只是不能一起工作
不是我做错的100%,我已经搜索了Stack Overflow以寻求解决方案,但到目前为止我还没有发现任何问题。
以下是引起问题的CSS:
#middle{
display: block;
-webkit-mask-image: url("waveMask3.png");
-webkit-mask-position-x: 100px;
-webkit-mask-position-y: var(--yPos);
animation: waveX 3s linear forwards infinite, waveY 3s linear forwards infinite;
}
@keyframes waveX{
0%{
-webkit-mask-position-x:100px;
}
50%{
-webkit-mask-position-x:-900px;
}
100%{
-webkit-mask-position-x:-900px;
}
}
@keyframes waveY{
0%{
-webkit-mask-position-y: var(--yPos);
}
50%{
-webkit-mask-position-y:calc(var(--yPos) - 10px);
}
100%{
-webkit-mask-position-y:calc(var(--yPos) - 10px);
}
}
谢谢。
对于任何有问题的人,他们非常确定自己的代码正确无误,但其蒙版上的动画无法提供预期的结果;确保
1)。口罩覆盖正确的部分。黑色显示,透明隐藏。2)。确保遮罩的大小和方向正确以显示动画。我的问题是,当我的波浪需要在面罩的顶部边缘时,它就在面罩的底部边缘。
这为我解决了这个问题...我可以通过为容器提供背景色并设置宽度,高度和位置来看到此问题。