2011-10-14 4 views
1

도와 주셔서 감사합니다. 내가하려고하는 것은 Webkit 마스크 (IOS 용으로 개발)를 정적 위치에두고 그것이 마스킹하는 이미지에 애니메이션을 적용하는 것입니다. 나는 마스크 또는 마스크와 이미지를 함께 움직일 수 있었지만, 내 인생은 마스크 아래에서 이미지를 움직이는 마스크없이 어떻게 움직일 지 알 수 없다.어떻게 정적 웹킷 마스크를 설정할 수 있습니까

모든 솔루션은 JS 내가 어떤 외부 의존성 (JQuery와 등)

어떤 생각으로 구축 할 수있는 순수 HTML5, CSS를 할 필요가?

답변

0

이미지를 배경 이미지로 설정하고 background-position에 애니메이션을 적용 해 보았습니까?

다음은 배경 위치를 애니메이션 CSS3를 사용하여 예를 들어,하지만 당신은 쉽게 자바 스크립트 사용할 수 있습니다 http://jsfiddle.net/blineberry/sRAfw/

을 아니면 마스크와 img 자식 요소에 대한 래퍼를 사용할 수 있습니다. position: absolute하여 래퍼 img 및 애니메이션 img의 최고/우/하/좌 스타일 :

+0

http://jsfiddle.net/blineberry/KdHCH/ 당신에게 브렌트 감사하는 솔루션 모두 나를 위해 작동합니다 나는 그것을 감사드립니다. –

관련 문제