如何设置静态 Webkit 掩码
感谢您抽出时间来帮助我。我想做的是让一个 Webkit mask（为 IOS 开发）保持在静态位置并为它所遮蔽的图像设置动画。我已经能够仅对蒙版或蒙版和图像进行动画处理，但我一生无法弄清楚如何在蒙版不随其移动的情况下对蒙版下方的图像进行动画处理。
任何解决方案都需要是纯 HTML5、CSS、JS，因为我无法使用任何外部依赖项（jquery 等）进行构建，
有什么想法吗？
Thanks for taking the time to help me out. What I am trying to do is get a Webkit mask (developing for IOS) to stay in a static position and animate the image it is masking. I have been able to animate just the mask or the mask and image together but for the life of me can not figure out how to animate the image below the mask without the mask travelling with it.
Any solution needs to be pure HTML5, CSS, JS as I can not build with any outside dependencies (jquery etc)
Any thoughts?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您是否尝试过将图像设置为背景图像并对背景位置进行动画处理？
下面是一个使用 CSS3 为背景位置设置动画的示例，但您也可以轻松使用 javascript：http://jsfiddle。 net/blineberry/sRAfw/
或者您可以使用掩码的包装器和
img子元素。position:absolute将img添加到包装器并为img的上/右/下/左样式设置动画：http://jsfiddle.net/blineberry/KdHCH/Have you tried setting the image as a background image and animating the
background-position?Here's an example using CSS3 to animate the background position, but you could just as easily use javascript: http://jsfiddle.net/blineberry/sRAfw/
Or you could use a wrapper for the mask and an
imgchild element.position: absolutetheimgto the wrapper and animate theimg's top/right/bottom/left styles: http://jsfiddle.net/blineberry/KdHCH/