오프셋 경로로 원에 유형을 설정하십시오

Yuanchuan의 합법적 인 CSS 속임수는 다음과 같습니다. 이 CSS 속성 오프셋 경로가 있습니다. 옛날 옛적에, 그것은 모션 경로라고 불렸다가 이름이 바뀌 었습니다. 나는 그 속성이 길을 따라 물건을 애니메이션하기위한 것이기 때문에 그 당시에는 눈을 굴렸다. 그러나 애니메이션에 사용할 필요는 없으므로 이름 변경이 가능 하며이 예제는이를 증명합니다!

그러나 경로에서 요소를 설정하는 것은 전체 요소가 그 경로에 튀어 나온다는 것입니다. 따라서 해당 요소가 chris 이라면 전체 단어가 경로의 단일 지점에 배치됩니다. Yuanchuan의 속임수는 문자열을 문자-스팬으로 나눈 다음 각 스팬을 경로를 따라 배치하는 것입니다 (다른 오프셋 거리).

각 스팬에 적용되는 원형 경로가 있습니다.

 오프셋 경로 : 경로 ( 'M 0 200 A 200 200 0 0 1 400 200')

그런 다음 각 글자에 대한 적절한 거리를 계산하기위한 멋진 댄싱 수학 (물론이 데모에 따라 다소)이 있습니다.

 오프셋-분야 : calc (8% var (-n) * 89.5% / var (-Total));

아름다움은 각 스팬에 계산에 영향을 미치는 고유 한 맞춤 속성이 있다는 것입니다. 큰 덩어리 : Nth-Child 반복적 인 CSS가 필요하지 않습니다.

 <div style="-총 : 14;">
  <span style="-n : 0"> c </span>
  <span style="-n : 1"> s </span>
  <span style="-n : 2"> s </span>
  <p> 그리고 그것은 단지 편지를위한 것이 아닙니다! 모든 종류의 물건에 좋습니다!</p>
<p> <strong>관련 노트 :</strong></p>
<ul>
<li> 이것은 각 스팬이 변환을 사용해야하는 오래된 방법보다 더 깨끗합니다. rotate ()가 문자 자체에서 멀리 떨어진 일반적인 변환-오리핀 지점이있는 rotate ().</li>
<li> SVG는 해커없이 이것을 처리합니다. (이것은 완전히 해킹은 아니지만, 당신이 스팬으로 나누어야하기 때문에, 당신은 적어도 부모를 aia- 라벨해야한다면, 그로 인해 해킹을 느끼게합니다.)</li>
<li> nitpick (나는 최악이다) : 사람들이 사용해야하는 비 데모 사이트 에서이 데모 펜과 같은 HTML 태그를 구성하지 마십시오.</li>
</ul>
</div>

위 내용은 오프셋 경로로 원에 유형을 설정하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!