점차 단축 텍스트의 디스플레이 효과를 달성하기 위해 CSS의 Shape Outside 속성을 사용하는 방법은 무엇입니까?

CSS Shape Outside 속성은 텍스트 페이딩 효과를 실현합니다

이 기사에서는 독특한 웹 페이지 텍스트 디스플레이 기술을 소개합니다. 텍스트 길이를 점차 단축하고 동적 시각적 효과를 만듭니다. 이는 창의적인 웹 페이지 또는 아트 디스플레이에 매우 적합합니다.

이것은 CSS의 shape-outside 속성을 통해 달성 될 수 있습니다. shape-outside 사용하면 텍스트를 둘러싸고있는 비류 모양을 정의 할 수있어 텍스트 페이딩의 시각적 효과가 생길 수 있습니다.

다음 예제는 shape-outside 사용하여이를 달성하는 방법을 보여줍니다.

 .Container {
  너비 : 300px;
  높이 : 300px;
  위치 : 상대;
}

.모양 {
  너비 : 100%;
  높이 : 100%;
  배경색 : #f0f0f0;
  클립 경로 : 다각형 (0 0, 100% 0, 100% 100%, 0 100%); /* 조정 가능한 모양*/
  모양 외부 : 다각형 (0 0, 100% 0, 100% 100%, 0 100%); /* Clip-Path와 일치*/
  플로트 : 왼쪽;
}

.텍스트 {
  마진 왼쪽 : 30px;
  글꼴 크기 : 18px;
}

<div class="container">
  <div class="shape"></div>
  <div class="text">
    이것은 점차적으로 길이가 짧아지는 샘플 텍스트입니다. 이것은 점차적으로 길이가 짧아지는 샘플 텍스트입니다.
  </div>
</div>

코드에서 clip-path 및 shape-outside 속성은 다각형 모양을 공동으로 정의합니다. 다각형의 정점 좌표를 수정하면 텍스트 랩핑의 모양을 조정하여 텍스트 페이딩의 효과를 제어 할 수 있습니다. 효과의 정확성을 보장하기 위해 shape-outside 의 값은 clip-path 와 일치해야합니다.

이 효과를 더 깊이 탐색하려면 polygon 의 좌표 값을 수정하여 다양한 텍스트 페이딩 효과를 달성하기 위해 다른 모양을 만들 수 있습니다. 예를 들어, 더 풍부한 시각적 효과를 위해 원이나 곡선과 같은 더 복잡한 모양을 사용해 볼 수 있습니다. 키는 polygon 값을 조정하여 모양을 제어하여 텍스트가 표시되는 방식을 제어하는 ​​것입니다.

위 내용은 점차 단축 텍스트의 디스플레이 효과를 달성하기 위해 CSS의 Shape Outside 속성을 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!