집 > 기사 > 웹 프론트엔드 > CSS3의 클립 경로 사용법 소개

CSS3의 클립 경로 사용법 소개

小云云원래의: 2018-03-03 10:21:542459검색

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

CSS3의 클립 경로 사용법 소개

관련 기사