CSS3의 클립 경로 사용법 소개-CSS 튜토리얼-php.cn

CSS3의 클립 경로 사용법 소개

小云云

풀어 주다： 2018-03-03 10:21:54

원래의

2544명이 탐색했습니다.

1. 기본 개념

QQ 스페이스 다이내믹을 새로고침하면 광고가 발견됩니다. 사용자가 다이내믹 목록을 위아래로 슬라이드하면 광고 이미지가 자동으로 전환됩니다. 모바일의 작은 화면에서는 확실히 효과가 좋습니다. 터미널. 매우 미묘한 고려, 이 효과는 어떻게 달성됩니까?

그런 다음 이 효과의 구체적인 구현 아이디어에 대해 이야기해 보겠습니다.

두 장의 사진을 배치하고 사진 컨테이너를 기준으로 함께 쌓습니다.
왼쪽 위 모서리 또는 오른쪽 아래 모서리에 있는 원 중심을 선택합니다. 그림 컨테이너에서 원을 그리고 원의 반경을 계속 늘려 두 번째 그림을 표시합니다.
위아래로 스와이프하면 슬라이딩 속도에 따라 원의 반경이 동적으로 변경됩니다. 그림 컨테이너와 화면 상단 또는 하단 사이의 거리가 0 이면 그림의 쌓인 순서와 원의 중심 위치가 이에 따라 변경됩니다.
사진에 원을 그리면 왜 두 번째 사진이 표시되나요? 말하자면, MDN의 설명을 인용하여 오늘 우리의 주인공인 클립 경로에 대해 이야기해야 합니다.

clip-path는 지정된 닫힌 경로나 모양 또는 SVG의 clipsPath 태그로 정의된 모양을 통해 유지해야 하는 영역의 일부를 잘라내어 웹에서 레이아웃을 구현하는 것을 의미합니다. 페이지는 다양할 수 있습니다.

clip-path가 등장하기 전에는 CSS2.1의 클립 속성에도 클리핑 효과가 있었지만 직사각형만 지원하고 position:absolute 또는 position:fixed가 있는 요소에만 적용되었습니다.

clip: rect(60px, 60px, 60px, 60px); // 标准写法
clip: rect(60px  60px  60px  60px); // 兼容 ie 及 火狐浏览器

로그인 후 복사

참고: ret 매개변수의 순서는 위쪽, 오른쪽, 아래쪽, 왼쪽입니다.

모든 주류 브라우저는 여전히 Sprite 이미지(CSS Sprite) 표시에 위치를 유지합니다. 클립 속성, 클립이 클립 경로로 대체되었습니다. 일반적인 개발에서는 테두리 및 테두리 반경과 같은 속성을 사용하여 삼각형, 원 또는 둥근 사각형과 같은 간단한 패턴을 만들 수 있습니다. 클립 경로는 SVG의 경로, 애니메이션 및 기타 태그와 결합하여 더 많은 가능성을 제공합니다. 더 흥미로운 패턴.

2. 사용법 연습

clip-path 속성은 원, 타원, 다각형, 삽입 등 많은 그래픽을 잘라낼 수 있으며 애니메이션 및 SVG의 클립 경로 태그도 사용할 수 있습니다.

circle

clip-path: circle(25% at 50% 50%);

로그인 후 복사

ellipse

clip-path: ellipse(25% 25% at 50% 50%);

로그인 후 복사

inset

clip-path: inset(35% 35% 35% 35% round 0 70% 0 70%);

로그인 후 복사

polygonpolygon

clip-path: polygon(50% 0, 25% 50% ,75% 50%);

로그인 후 복사

url

<section class="container">
  <img src="img01.jpg" class="contract">
  <img src="img02.jpg">
</section>
<svg height="0" width="0">
  <clipPath id="clip02">
    <circle cx="400" cy="210" r="0">
      <animate
        attributeType="CSS"
        attributeName="r"
        values="0;480;0"
        dur="9s"
        repeatCount="2"
      />
    </circle>
  </clipPath>
</svg>
.contract {
  clip-path: url(#clip02);
  z-index:1;
}

로그인 후 복사

SVG의 clipsPath 태그를 사용하여 animate를 래핑할 수 있다는 점을 언급할 가치가 있습니다. 여기서 animate 태그의 attributeName은 설정을 참조합니다. 원의 반경 값은 애니메이션의 프레임을 설정할 수 있으며 세미콜론으로 구분된 여러 값이 있을 수 있습니다. dur은 애니메이션의 지속 시간을 나타내고,peatCount는 애니메이션의 수를 나타냅니다.

호환성

현재 IE와 Edge 모두 이 속성을 지원하지 않습니다. Firefox는 클립 경로를 부분적으로만 지원합니다. 즉, 인라인 SVG에 대한 모양과 URL(#path) 구문만 지원한다는 의미입니다. Chrome, Safari 및 Opera에서는 이 속성과 호환되려면 -webkit- 접두사가 필요합니다. 외부 SVG 모양은 지원되지 않습니다. 자세한 호환성 정보를 보려면 여기를 클릭하여 클립 경로 브라우저 호환성을 확인하세요.

3. 경험 요약

URL(#path) 인라인 SVG를 사용하면 복잡한 모양을 쉽게 잘라낼 수 있으며, 카드 놀이, 포커 게임에 베팅하는 등의 생생한 애니메이션 효과도 포함할 수 있습니다. 카운트다운에 마스크를 추가하거나 직사각형 가장자리에 카운트다운 진행 상황을 추가하고 애니메이션을 로드하는 등의 기능을 클립 경로 속성을 사용하여 영리하게 구현할 수 있습니다. 동시에 클립 경로 속성을 사용하여 그래픽을 자르는 경우에도 가능합니다. 상대 단위를 유연하게 사용합니다.