CSS 의 MASK 필 터 를 교묘 하 게 사용 하 다.

Mask 필 터 는 웹 페이지 의 HTML 소자 대상 에 게 직사각형 마스크 를 만 들 수 있 습 니 다.무엇이 마스크 입 니까?플래시 마스크 를 사용 해 봤 다 면 그 랬 다 는 것 을 알 게 될 것 이다.실제로 커버 에 대해 서도 이렇게 이해 할 수 있다.유색 천 으로 물건 을 덮 는 셈 이지 만 내용 은 파 헤 쳐 졌 다.만약 네가 아직 이해 하지 못 한다 면 아래 의 그림 을 보고 내 가 너 에 게 자세히 말 해 줄 게. 그림 1 mask 필터 효과 1 위 에 있 는 이 mask 필터 에 이렇게 짙 은 색 을 사용 하면 주로 효 과 를 뚜렷하게 볼 수 있다.마스크 필터 의 인 자 를 살 펴 보 겠 습 니 다.마스크 의 색상 은\#RRGGBB 형식의 색상 값 입 니 다.DW3 에서 적당 한 색 을 선택 하면 됩 니 다.위의 mask 필터 코드 는:mask 1{filter:mask(color=#00ff 00)}입 니 다.아래 의 예 에서 보 실 수 있 습 니 다.사실 필터 의 색 은 중요 한 것 이 아니 라 배경 색 이 중요 합 니 다.다음은 마스크 필터 로 몇 가지 효 과 를 만 들 겠 습 니 다.1.오색찬란 한 문자 그림 2 mask 필터 효과 2 위 에 이런 효 과 는 어 떻 습 니까?괜 찮 죠?약간 이미지 같 죠?이것 이 바로 마스크 필터 의 효과 다.여기에 흰색 필 터 를 사 용 했 습 니 다.코드 는:mask 1{filter:mask(color=\#ffff)}입 니 다.오색찬란 한 문자 색깔 은 사실상 배경의 색깔 이다.그 만 드 는 방법 도 간단 합 니 다.1*1 의 표를 삽입 하고 표 에 여러 가지 배경 을 더 해 표 에 문 자 를 입력 하고 셀 에 mask 필 터 를 불 러 오 면 됩 니 다.어렵 지 않 죠?!2.탐조등 애니메이션 효과 아래 의 이런 탐조등 효 과 는 Flash 로 해도 신경 을 써 야 하 는데 CSS 필터 로 도 만 들 수 있 을 줄 은 몰 랐 습 니 다!탐조등 효과 가 동태 적 이기 때문에 나 는 두 장의 과정 사진 을 잡 아서 너 에 게 보 여줄 수 밖 에 없다.동태 효 과 를 보 려 면 내 가 말 한 것 에 따라 하 나 를 만 들 거나 우리 집에 가서(http:/fy888.go.163.com)보아 라. 그림 3 탐조등 애니메이션 효과 1 그림 4 탐조등 애니메이션 효과 2 아래 제작 방법 을 소개 한다.이런 효 과 는 위의 예 에 비해 복잡 하지만 마 우 스 를 몇 번 더 눌 렀 을 뿐이다.1.그림 층 을 삽입 합 니 다.저 는'부모 층'이 라 고 부 릅 니 다.이 층 은 표시 할 내용(텍스트 나 그림)을 넣 습 니 다.이 층 에 한 층 을 삽입 하면 나 는 그것 을 서브 층 이 라 고 부 르 는데 주로 마스크 효 과 를 내 는 데 쓰 인 다.2.부모 층 의 속성 패 널 에 표시 창 을 설정 합 니 다.즉,그림 의'Clip'속성 을 설정 합 니 다.이 속성 에서 상대 적 인 좌 표를 사용 합 니 다.그 중에서 L,T 는 왼쪽 상단 좌표 입 니 다.R,B 는 오른쪽 아래 좌표 입 니 다.이후 하위 층 은 설정 한 창 에 만 표 시 됩 니 다.설 정 된 층 속성 매개 변수 패 널 은 다음 그림 과 같 습 니 다. 그림 5 층 속성 패 널 입 니 다.여기 있 는 부모 층 은'Layer 4'입 니 다.저 는 여기 서 전체 부모 층 을 표시 창 으로 합 니 다.즉,하위 층 이 부모 층 으로 운동 할 때 볼 수 있 고 부모 층 밖에서 볼 수 없습니다.3.우 리 는 하위 층 에 배경 이 투명 한 원형 그림 을 삽입 합 니 다.여기 서 원형 도형 을 사용 하 는 목적 은 주로 조명 을 비 추 는 투영 이 원형 과 같 습 니 다.또한 원 밖의 이미지 부분 은 투명 해 야 합 니 다.그렇지 않 으 면 사각형 사각형 상자 가 이동 하 는 것 을 볼 수 있 습 니 다.그 다음 에 하위 층 에 부모 층 배경 색 과 같은 마스크 필 터 를 불 러 오고 하위 층 을 크게 늘 려 서 부모 층 의 내용 을 완전히 덮어 쓸 수 있 도록 합 니 다.그러면 브 라 우 저 에서 부모 층 의 내용 은 원형 그림 의 일부분 만 볼 수 있 습 니 다.이것 이 바로 우리 가 원 하 는 효과 입 니 다.4.탐조등 의 효 과 를 내야 합 니 다.그 원형 구역 을 움 직 여야 합 니 다.그러면 Dreamweaver 의 타임 라인(Timeline)기능 을 사용 해 야 합 니 다.DW3 에서 먼저 하위 층 으로 끌 어 올 려 서 위 에 있 는 그림 이 부모 층 내용 의 첫 부분 을 덮 도록 합 니 다.'Ctrl+F9'를 누 르 면 타임 라인 패 널 을 조정 하고 하위 층 을 타임 라인 패 널 에 끌 어 올 려 마지막 프레임 을 100 프레임 으로 끌 어 올 린 다음 에 50 프레임 에 관건 적 인 프레임 을 삽입 하고 하위 층 의 그림 을 부모 층 내용 의 끝 부분 과 겹 칩 니 다.타임 라인 패 널 에서'Loop'(순환 재생)과'Auto'(자동 재생)를 선택 하면 모든 것 이 OK 입 니 다.복잡 한 애니메이션 이 완성 되 었 습 니 다.F12 를 누 르 면 좀 멋 있 지 않 습 니까?!