'i'문자에 점을 애니메이션하는 속임수

영리한 속임수 : 터키의 점이없는 "i"(ı)와 기간 (.)을 결합하면 시각적으로 매력적인 "I"가 두 개의 개별 요소로 구성됩니다. 이를 통해 DOT의 독립적 인 스타일링과 애니메이션이 가능하여 독특한 시각적 감각을 추가합니다. 접근성 문제? 우리는 당신을 덮었습니다.

모범 사례 및 피해야 할시기를 포함 하여이 기술을 만들고 스타일링하고 적용 할 수 있습니다.

예 : 스타일과 애니메이션

이 방법의 아름다움은 유연성에 있습니다. 두 구성 요소 모두 표준 유니 코드 문자이므로 일반 텍스트와 마찬가지로 글꼴 변경 및 페이지 줌에 원활하게 적응합니다. 다음은 다양한 글꼴, 스타일 및 줌 레벨을 보여주는 몇 가지 예입니다.

단계별 가이드

다음은 프로세스의 고장입니다.

캐릭터 선택

우리는 Dotless "I"(ı)와 기간을 사용합니다. Dotless "J"(ȷ)와 같은 다른 문자 또는 "~"( "ñ") 또는 "`"( "è")와 같은 악센트도 가능합니다.

수직 스태킹

a를 사용하여 문자를 수직으로 쌓으십시오<span></span> 및 CSS :

 <span class="character">.<br> 나</span>

 .성격 {
  디스플레이 : 블록;
  라인 높이 : 0.5;
  여백 : 0;
}

조정

line-height 및 마진 제거를 사용한 미세 조정 간격.

CSS 애니메이션 (도트 요소)

예를 들어 튀는 효과와 같은 애니메이션을 구현합니다.

 @keyframes 바운스 {
  {transform : Translatey (0); }
  {transform : translatey (-10px); }
}

.Bounce {
  애니메이션 : 바운스 0.4S 무한 대체;
}

(CSS 애니메이션에 대한 자세한 내용은 CSS-Tricks Almanac을 참조하십시오.)

단어로 통합

한 단어 내에서 "i"를 애니메이션 (예 : "Ping") : 애니메이션 캐릭터를<span></span> 라인 무결성을 유지합니다.

<p> p <span>.<br> ı</span> ng</p>

SVG 대안

SVG 요소를 사용하여 동일한 효과를 달성 할 수 있습니다. 이것은 더 많은 애니메이션 자유를 제공하지만 글꼴 응답 성을 잃습니다. 독립적으로 애니메이션 원과 사각형이있는 예는 다음과 같습니다.

[예를 들어 SVG 코드는 여기에 원본과 유사하지만 명확성을 위해 단순화되거나 재구성 될 수 있습니다.]

사용 시나리오

이 기술은 로고 나 아이콘과 같은 장식적인 맥락에서 시각적 매력을 향상시킵니다. 신체 텍스트에서 과도하게 사용하지 마십시오. 그것은 가독성과 보조 기술 호환성에 부정적인 영향을 미칩니다.

접근성 고려 사항

스크린 리더는 "p. ı ng"를 잘못 해석 할 수 있습니다. 적절한 해석을 보장하기 위해 ARIA 속성을 사용하십시오.

<div aria-label="Ping" role="img">
  <p role="presentation">p <span>.<br> ı</span> ng</p>
</div>

이것은 전체 요소를 이미지로 취급하여 스크린 리더의 내부 요소를 숨기면서 올바른 레이블을 제공합니다. 다양한 보조 기술에서 테스트하는 것이 중요합니다.

유니 코드로 확장

유니 코드 문자를 결합하여 수많은 다른 "글자"를 만들 수 있습니다. 아래 표는 몇 가지 예를 보여줍니다. 기억 : 접근성 우선 순위를 정합니다. 시각적 효과를 위해 손상시키지 마십시오.

첫 글리프	두 번째 글리프	결합
나	.	나
ȷ	.	J.
N	~	N
에이	이자형	Æ
에이	`	에이

위 내용은 'i'문자에 점을 애니메이션하는 속임수의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!