CSS 전환으로 현실적인 모션 블러를 만드는 방법

CSS에서 현실적인 모션 블러 효과를 생성하려면 모션 블러 자체의 기본 원리를 이해하는 것이 포함됩니다. 빠르게 움직이는 물체 나 흔들리는 카메라 샷의 사진에서 종종 볼 수있는이 효과는 시간이 지남에 따라 카메라의 셔터 속도를 캡처 한 결과입니다.

모션 블러 이해

카메라의 셔터가 열리므로 조명이 필름 (또는 센서)을 노출시킬 수 있습니다. 이 노출 중에 물체가 움직이면 결과 이미지는 물체의 경로를 흐리게 표시합니다. 이 흐림은 셔터의 개점 동안 다양한 지점에서 객체 위치의 합성입니다. 객체는 반대쪽으로 나타나며 배경의 일부가 그것을 통해 보이게 나타납니다.

컴퓨터는 경로를 따라 약간 다른 위치에서 물체의 여러 서브 프레임을 만들고 불투명도를 줄이는 것과 함께 혼합하여이를 시뮬레이션합니다. 서브 프레임이 많을수록 더 현실적으로 흐려집니다.

CSS 구현

CSS에서이를 달성하기 위해, 우리는 비교가 감소하고 약간 지연된 애니메이션을 가진 여러 거의 동일한 요소를 사용합니다.

기본 애니메이션 (예를 들어 호버로 이동하는 검은 점)부터 시작하겠습니다. (이 섹션에는 단일 도트 애니메이션의 초기 CSS 코드가 포함되어 있습니다).

모션 블러를 생성하기 위해 절대 포지셔닝을 사용 하여이 점을 여러 번 (예 : 20 카피) 복제하여 완벽하게 겹칩니다. 각 사본은 불투명도가 줄어들고 (예 : 10%), transition-delay 사용하여 작은 지연이 애니메이션에 추가됩니다. 이 지연은 각 후속 사본에 대해 점차적으로 증가하여 모션 블러의 환상을 만듭니다. (이 섹션에는 지연된 다중 도트 애니메이션에 대한 CSS 코드가 포함됩니다).

사본 수, 불투명도 및 지연 값은 애니메이션 속도와 원하는 블러 강도에 따라 조정이 필요합니다. 20 개의 사본으로는 종종 충분하지만 느린 애니메이션에는 더 적은 수의 작동이 가능할 수 있습니다. 실험은 최적의 효과를 달성하는 데 중요합니다.

이 기술은 CSS 애니메이션에 대한 전문적인 터치를 제공하는 다양한 애니메이션 (검색 변경, 스케일링 및 복잡한 타이밍)의 모션 블러를 효과적으로 시뮬레이션합니다. 미래의 브라우저 발전은 기본 모션 블러 기능을 제공 할 수 있지만이 방법은 강력하고 쉽게 이용 가능한 솔루션을 제공합니다.

위 내용은 CSS 전환으로 현실적인 모션 블러를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!