CSS MASK 필터의 영리한 사용_기본 튜토리얼

마스크 필터는 웹 페이지의 HTML 요소 객체에 대한 직사각형 마스크를 만들 수 있습니다. 마스크란 무엇입니까? 플래시에서 마스크를 사용해 본 적이 있다면 그것이 무엇인지 알 것입니다. 사실 마스킹도 이런 식으로 이해할 수 있는데, 이는 대상을 색색의 천으로 덮었지만 내용은 파헤쳐지는 것과 같습니다. 그래도 이해가 안 되시면 아래 사진을 보시면서 자세히 설명해 드리겠습니다.

그림 1 마스크 필터 효과 1

위의 마스크 필터에서 이렇게 어두운 색상을 사용한 것은 주로 효과를 확실히 볼 수 있도록 하기 위한 것입니다. 마스크 필터의 매개변수를 살펴보겠습니다. 이 필터에는 #RRGGBB 형식의 마스크 색상 값인 Color 매개변수가 하나만 있습니다. DW3에서 적절한 색상을 선택하기만 하면 됩니다. 예를 들어 위의 마스크 필터 코드는 .mask1 { filter:mask(color=#00ff00) }입니다. 필터 색상이 중요한 것이 아니라 배경 색상이 핵심입니다.
다음으로 마스크 필터를 사용하여 여러 특수 효과를 만듭니다.
1. 다채로운 텍스트

그림 2 마스크 필터 효과 2

위 효과는 어떻습니까? 나쁘지 않아! 좀 이미지같지 않나요? 이것이 마스크 필터의 효과이다. 여기에는 흰색 필터가 사용되었으며 해당 코드는 .mask1 { filter:mask(color=#ffffff) }입니다. 다채로운 텍스트 색상은 실제로 배경 색상입니다. 제작 방법도 매우 간단합니다. 1*1 테이블을 삽입하고, 테이블에 다양한 색상의 배경을 추가하고, 테이블에 텍스트를 입력하고, 셀에 마스크 필터를 로드하기만 하면 어렵지 않죠? !
2. 서치라이트 애니메이션 효과
다음 서치라이트 효과는 플래시를 사용하는데 많은 노력이 필요한데, CSS 필터를 사용해도 가능할 줄은 몰랐습니다! 서치라이트 효과는 동적이므로 여러분이 볼 수 있는 공정 사진은 두 개만 캡처할 수 있습니다. 동적 효과를 보려면 제가 말한 대로 하나 만들거나 저희 집(http://fym888. go.163.com) 보세요.

그림 3 서치라이트 애니메이션 효과 1

그림 4 서치라이트 애니메이션 효과 2

제작 방법은 다음과 같습니다.
이 효과는 위의 예는 조금 더 복잡하지만 마우스를 몇 번만 더 클릭하면 됩니다.
1. "상위 레이어"라고 부르는 레이어를 삽입합니다. 이 레이어는 표시할 콘텐츠(텍스트 또는 그림)를 배치하는 데 사용됩니다. 이 레이어 위에 하위 레이어라고 부르는 레이어를 삽입합니다. 이 레이어는 주로 마스킹 효과를 만드는 데 사용됩니다.
2. 상위 레이어의 속성 패널에서 표시 창을 설정합니다. 즉, 레이어의 "클립" 속성을 설정합니다. 이 속성에서는 상대 좌표가 사용됩니다. 여기서 L과 T는 레이어의 좌표입니다. 왼쪽 위 모서리는 R과 B는 오른쪽 아래 모서리의 좌표입니다. 후속 하위 레이어는 설정한 창에만 표시됩니다. 레이어 속성 설정 매개변수 패널은 아래 그림과 같습니다.

그림 5 레이어 속성 패널

여기서 상위 레이어는 "Layer4"이고 전체 상위 레이어를 설정합니다. 여기서는 표시 창으로 하위 레이어가 상위 레이어로 이동할 때 표시되지만 상위 레이어 외부에서는 표시되지 않습니다.
3. 하위 레이어에 투명한 배경의 원형 이미지를 삽입합니다. 여기서 원형 이미지를 사용하는 주요 목적은 서치라이트의 투영이 원과 비슷하다는 것입니다. 투명해야 합니다. 그렇지 않으면 보이는 것은 직사각형 상자가 움직이는 것입니다. 그런 다음 자식 레이어에 부모 레이어의 배경색과 동일한 색상의 마스크 필터를 로드하고 부모 레이어의 내용을 완전히 덮을 수 있도록 자식 레이어를 확대하여 부모 레이어의 내용이 브라우저는 원형으로만 표시됩니다. 이미지의 해당 부분이 바로 우리가 원하는 것입니다.
4. 물론, 탐조등 효과를 내기 위해서는 원형 영역을 움직여야 합니다. 이를 위해서는 Dreamweaver의 타임라인 기능을 사용해야 합니다. DW3에서는 먼저 하위 레이어로 드래그하여 그림이 상위 레이어 콘텐츠의 머리 부분만 덮도록 합니다. "Ctrl+F9"를 눌러 타임라인 패널을 불러온 다음 하위 레이어를 타임라인 패널로 드래그합니다. 마지막 프레임을 프레임 100으로 드래그하고 프레임 50에 키프레임을 삽입한 다음 하위 레이어 그림을 상위 레이어 콘텐츠의 꼬리와 겹칩니다. 타임라인에서 "루프"(루프 재생) 및 "자동"(자동 재생)을 선택합니다. 패널. 모든 것이 정상입니다.
F12를 누르면 복잡한 애니메이션이 완성됩니다. 멋지죠? !