JavaScript 변수를 사용하여 WebKit 키프레임을 어떻게 제어할 수 있습니까?

Javascript 변수로 Webkit 키프레임 제어

이 문서에서는 JavaScript 변수를 사용하여 Webkit 키프레임 내의 값을 제어하는 ​​방법에 대한 쿼리를 다룹니다. CSS에 변수를 직접 삽입하는 것은 불가능하지만 이를 달성할 수 있는 대체 방법이 있습니다.

제공된 시나리오에서는 난수가 생성되어 키프레임 내에서 회전 값으로 적용됩니다. 그러나 회전 값 대신 변수를 배치하는 것만으로는 CSS에서 작동하지 않습니다.

대신 JavaScript를 사용하여 프로그래밍 방식으로 CSS 규칙을 생성하고 CSSOM(CSS 개체 모델)에 삽입하는 것이 해결책입니다. 한 가지 접근 방식은 생성된 변수를 기반으로 하는 새 키프레임으로 기존 애니메이션을 덮어쓰는 것입니다.

JSFiddle 예제에서는 이 기술을 보여줍니다. 처음에는 -10~10도 회전 애니메이션을 실행하지만 사용자가 버튼을 클릭하면 -360~360도 사이에서 임의의 회전 값을 생성할 수 있습니다.

이 예는 Simon Hausmann의 이전 실험을 활용하여 키프레임을 원활하게 덮어씁니다. Chrome 및 Safari와 같은 최신 브라우저. 단, 난수생성 기능은 Admixweb에서 빌려왔습니다.

위 내용은 JavaScript 변수를 사용하여 WebKit 키프레임을 어떻게 제어할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!