웹 디자인에서 js를 사용하면 많은 페이지 특수 효과를 얻을 수 있습니다. 그러나 많은 사람들은 HTML 태그에서 META 태그의 강력한 효과를 무시합니다. 실제로 메타 태그는 많은 아름다운 페이지 전환 효과를 얻을 수도 있습니다.
META 태그는 HTML 언어의 HEAD 영역에 있는 보조 태그로, 각 웹페이지의
...
중간에 위치합니다. 모두 친숙합니다:
//설명 편집 도구
//설명 홈 페이지 설명
사용자에게 보이지 않는 정보를 제공합니다. . 메타 태그는 일반적으로 검색 엔진 로봇의 페이지 테마를 정의하거나 사용자 브라우저에서 쿠키를 정의하는 데 사용되며, 작성자를 식별하고, 페이지 형식을 설정하고, 콘텐츠 요약 및 키워드를 표시하는 데에도 사용할 수 있습니다.
정의한 시간 간격에 따라 새로 고침, RASC 콘텐츠 수준 등을 설정할 수 있습니다.
이 글에서는 주로 메타 태그를 사용하여 페이지 전환 효과를 생성하는 방법을 설명합니다....
사용법:
blendTrans는 페이드 효과를 생성하는 CSS 동적 필터 유형입니다. 또 다른 동적 필터인 RevealTrans도 페이지 시작 및 종료 효과에 사용할 수 있습니다.
동적 필터는 페이지에 움직이는 페이드인 및 페이드아웃 효과와 이미지 변환 효과를 추가할 수 있습니다. 블렌드( 혼합) 및 공개(표시),
전자는 객체를 점차 사라지거나 나타나게 할 수 있으며, 후자는 24가지 이미지 변형 효과를 제공합니다...
기간: 표현 필터 효과 지속 시간(단위: 초)
전환: 필터 유형. 사용할 특수 효과를 나타냅니다. 값은 0-23입니다.
---------------------------------- --- ----------------------------------
0: 직사각형 축소 1: 직사각형 확장
2: 원 축소 3: 원형 확장
4: 아래에서 위로 새로 고침 5: 위에서 아래로 새로 고침
6: 왼쪽에서 오른쪽으로 새로 고침 7: 오른쪽에서 왼쪽으로 새로 고침
8: 수직 블라인드 9: 수평 블라인드
10 : 오프셋 수평 블라인드 11: 오프셋 수직 블라인드
12: 포인트 스프레드 13: 왼쪽에서 오른쪽으로 가운데로 새로 고침
14: 가운데에서 왼쪽으로 새로 고침 15: 가운데 상하로
16: 상하에서 중앙으로 17: 오른쪽 아래에서 왼쪽 위
18: 오른쪽 위에서 왼쪽 아래로 19: 왼쪽 위에서 오른쪽 아래로
20: 왼쪽 아래에서 오른쪽 위로 21 : 가로바
22 : 세로바 23 : 위 22종 중 랜덤선택
------ --------- --------------- --------- -
웹페이지 변형 효과가 적절하게 일치하는 한 이러한 변형 효과는 원래 사이트에 관심이 없는 방문자라도 방문자에게 매우 깊은 인상을 남길 것입니다. 특히 웹페이지 제작을 배우고 싶어하는 친구들은 공부나 연구 목적으로 귀하의 웹페이지를 복사할 수도 있습니다. 사실 짧은 코드만 추가하셨네요^_^ 웹페이지 변환 효과(Trans)는 "웹페이지 들어가기"(Page-Enter), "웹페이지 나가기"(Page-Exit) 4가지 카테고리로 나뉩니다 ) 및 "사이트 들어가기"(Site-Enter), "사이트 나가기"(Site-Exit). 각 주요 카테고리는 25개의 하위 카테고리로 구분됩니다. 먼저 웹페이지에 진입하는 효과를 활용하여 설명합니다.
웹페이지에 진입하는 효과
1. 믹싱 효과 코드는 다음과 같습니다.
2. 상자 축소 효과에 대한 코드는 다음과 같습니다.
3. 상자 모양의 방사 효과 코드는 다음과 같습니다.
4. 원형 수축 효과에 대한 코드는 다음과 같습니다.
5. 원형 방사 효과에 대한 코드는 다음과 같습니다.
6. 상향삭제 효과 코드는 다음과 같습니다.
7. 하향삭제 효과 코드는 다음과 같습니다.
8. 오른쪽 지우기 효과의 코드는 다음과 같습니다.
9. 왼쪽 지우기 효과의 코드는 다음과 같습니다.
10. 세로 마스킹 효과 코드는 다음과 같습니다.
11. 가로 마스킹 효과 코드는 다음과 같습니다.
12. 가로 바둑판 효과를 위한 코드는 다음과 같습니다.
13. 세로 바둑판 효과에 대한 코드는 다음과 같습니다.
14. 그러면 분해효과 코드는
15. 들여쓰기 효과를 왼쪽에서 오른쪽으로 중앙으로 코드는 다음과 같습니다.
16. 중앙에서 좌우로 효과를 확장하는 코드는 다음과 같습니다.
17. 중앙까지 들여쓰기 효과를 주는 코드는 다음과 같습니다.
18. 중앙 상향 및 하향 확장 효과에 대한 코드는 다음과 같습니다.
19. 왼쪽 하단의 효과를 추출하는 코드는
20. 왼쪽 상단의 효과를 추출하는 코드는
21. 오른쪽 하단의 효과를 추출하는 코드는
22. 오른쪽 상단의 효과를 추출하는 코드는
23. 랜덤 가로줄 효과 코드는
24. 랜덤 수직선 효과 코드는
25입니다. 랜덤 효과 코드는 다음과 같습니다.
이제 이들 코드를 분석해 보면 우선 대부분의 코드가 매우 유사하다는 것을 알 수 있습니다. 실제로 카테고리는 많지만 각 주요 카테고리 아래 25개의 하위 카테고리는 동일하고 숫자로 식별되므로(블렌딩 효과 blendTrans(Duration=1.0) 제외) 각 주요 카테고리를 구분할 필요가 없습니다. 예를 들어, "Page-Enter"를 "Page-Exit"(웹 페이지 나가기), "Site-Enter"(사이트 들어가기) 및 "Site-Exit"(사이트 나가기)로 바꾸면 다음을 달성할 수 있습니다. 원하는 효과도 기억하기 쉽습니다. 그 중 "Duration=1.0"은 각 사이클의 시간을 초 단위로 설정할 수 있습니다(현재 설정은 사이클당 1초입니다). 참고로, 4가지 주요 카테고리의 효과는 하나의 웹 페이지에서 동시에 설정할 수 있지만, 각 주요 카테고리에는 하나의 효과만 설정할 수 있습니다. 또한, 웹 페이지가 프레임 페이지인 경우 효과가 표시되지 않습니다.