如何设置静态Webkit掩码

时间:2011-10-14 00:29:51

标签: javascript html css webkit

感谢您抽出宝贵时间帮助我。我想要做的是获得一个Webkit掩码(为IOS开发)以保持静态位置并为其屏蔽的图像设置动画。我已经能够将面具或面具和图像一起制作动画,但是对于我的生活来说,无法弄清楚如何在面具下方运动图像而不使用面具。

任何解决方案都需要是纯HTML5,CSS,JS,因为我无法使用任何外部依赖(jquery等)构建

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

您是否尝试将图像设置为背景图像并为background-position设置动画?

以下是使用CSS3设置背景位置动画的示例,但您可以轻松使用javascript:http://jsfiddle.net/blineberry/sRAfw/

或者您可以使用包装器作为遮罩和img子元素。 position: absolute img封送器并为img的顶部/右侧/底部/左侧样式设置动画:http://jsfiddle.net/blineberry/KdHCH/