확장 가능한 CSS 전용 타자기 효과

당신은 텍스트가 타자기의 효과가 있기를 원하지만, JS와 복잡한 CSS 코드를 사용하는 모든 변체에서 방향을 잃었습니까?
그만 검색해!이것은 간단한 타자기 효과입니다. 몇 줄만 있는 CSS입니다. 복잡한 코드를 처리할 필요가 없습니다.그것은 모든 종류의 텍스트를 처리할 수 있는 신축성이다.
게임에서 보기:

그것은 어떻게 일합니까?

로직은 기본 HTML 코드에 따라 매우 간단합니다.

<span class="type"><span>CSS typewriter</span></span> 

네가 텍스트를 두 개 이내<span>에 놓으면 완성된다.위조 요소, 중복 텍스트, 데이터 속성 등을 처리할 필요가 없습니다.
CSS:

.type {
  display:inline-flex;
}
.type span {
  word-break: break-all;
  height: 1.2em;
  width:0%;
  overflow: hidden;
  animation:t 2s linear infinite alternate;
}
.type span:before {
  content:" ";
  display:inline-block;
}
@keyframes t{
  90%,100% {width:100%}
}

아니오, 아무것도 잊지 않았어요.이것이 타자기 효과에 필요한 모든 CSS입니다.
최종 효과를 얻기 위해 우리는 세 가지 기교를 사용했다.
1) 주기 백분율 크기
이것은 요소의 너비(또는 높이)를 계산하는 강력한 CSS 기법입니다.나는 첫 번째 <span>유display:inline-flex를 사용했기 때문에 그것의 크기는 그것의 내용에 달려 있다(그것은 내연 단계의 요소이다).안의 내용(또 다른<span>은 백분율 폭을 사용하기 때문에 폭은 용기에 근거한다.우리는 모든 원소가 서로 의존하기 때문에 순환 계산이 하나 있다.
The Specification 이런 행위를 상술한다.나는 네가 그것을 읽는 것을 건의하지 않는다. 왜냐하면 너는 길을 잃을 수 있기 때문이다.
나는 가능한 한 간단한 말로 우리의 상황을 설명할 것이다.

우선 브라우저는 백분율 너비를 무시하여 용기의 너비를 정의합니다.하위 요소는 width:auto입니다.우리의 첫 번째 경계의 폭은 하위 경계의 폭과 같을 것이다. (따라서 텍스트의 폭은)

그러면 브라우저는 이전에 찾은 부모 대상의 너비에 따라 하위 대상의 너비를 계산하지만 부모 대상의 너비는 다시 변경되지 않아 무한 순환에 빠지지 않도록 되돌려줍니다.

다시 말하면, 내가 경계에 대한 width:X% 는 그 자신의 내용에 기초한 것이다. 이것이 바로 우리가 어떠한 복잡한 계산도 필요로 하지 않는 이유이다.요소를 0%에서 100%로 설정한 애니메이션이 바로 우리가 필요로 하는 것이다.
이것이 바로 우리가 얻은 것이다.
2) 욕설을 퍼붓는다
이제 앞의 코드에 word-break: break-all;:
우리는 갈수록 가까워진다.우리의 본문은 한 자모가 한 자모로 이어져 있다.

break-all

Breaking is allowed within “words” ^ref

3) 높이를 한 행으로 고정
마지막 기교는 원소의 높이를 한 줄과 같이 설정하는 것이다.기본적으로 선의 높이는 약 1.2xfont-size 인데 이것이 바로 내가 사용한 이유 1.2em 이다.케이스 또는 line-height 값에 따라 이 값을 조정해야 합니다line-height.
이렇게!우리는 타자기의 효과가 있다.
잠깐만, 첫 번째 자모에 문제가 있어!
네, 잘 받았어요.이것이 바로 내가 최초의 코드에 추가한 이유이다.

.type span:before {
  content:" ";
  display:inline-block;
}

이것은 무형의 첫 번째 자모를 만들 것이며, 실제 첫 번째 자모를 대체할 것이다.
✔️ Javascript가 없습니다.
✔️ 기본 HTML 코드
✔️ 복잡한 CSS 코드가 없습니다.10개 미만의 성명, 하드코딩 값 없음
✔️ 접근하기 쉽다.html 코드에서 텍스트 작성(위조 요소 없음, 중복 텍스트 없음)
✔️ 코드를 변경하지 않고 텍스트를 사용할 수 있습니다.
✔️ 단일 공백 글꼴 필요 없음
✔️ 브라우저 지원 문제가 없습니다.대부분의 브라우저는 내가 사용하는 모든 속성을 지원한다.우리는 또한 flexbox의 사용을 취소할 수 있다: https://codepen.io/t_afif/pen/VwWvmxe
❌ 여러 줄 텍스트는 지원되지 않습니다.응, 단점이 하나 필요해.😜

기호를 삽입할까요?

네모난 섀도우를 사용하여 다음 중 하나를 쉽게 추가할 수 있습니다.

여러 텍스트인가요?

이상은 내가 원하는'진짜'타자기 효과의 첫 번째 부분일 뿐이다.
게임에서 보기:
HTML 코드는 여전히 기본 코드입니다.

I am <span class="type">
  <span>
    <span>a CSS Hacker</span>
    <span>an expert web developer</span>
    <span>a lazy person!</span>
  </span>
</span>

CSS:

.type {
  display:inline-block;
}
.type > span {
  display:grid;
  overflow: hidden;
  height:1.2em;
}
.type span span {
  width:0%;
  max-width:max-content;
  overflow: hidden;
  height:inherit;
  word-break:break-all;
  animation:
    c 0.5s infinite steps(1),  
    t 2s linear infinite alternate,
    m 12s steps(3) infinite;
}
.type span span:before {
  content:" ";
  display:inline-block;
}
@keyframes t{
  90%,100% {width:100%}
}
@keyframes c{
  0%,100%{box-shadow:5px 0 0 #0000}
  50%    {box-shadow:5px 0 0 red  }
}
@keyframes m{
  100% {transform:translateY(-300%)}
}

비결은 모든 간격을 서로 아래에 두는 것이다. (이것이 바로 내가 아버지 용기에서 사용하는 이유 display:grid. 이렇게 하면 가장 긴 단어가 주 요소의 폭을 정의할 수 있다.
그런 다음 각 경계는 이전과 같이 애니메이션을 설정합니다.유일한 차이점은 작은 변환 기교를 통해 나는 한 번에 하나만 보여주는 것이다.
만약 두 번째 경계에서 뜯어내면 overflow:hidden 무슨 일이 일어났는지 볼 수 있다.max-width:max-content를 사용하여 삽입 기호를 주 요소의 너비 대신 실제 텍스트의 너비로 제한합니다.
또한 3은 여러 값과 함께 사용됩니다.

12s=3*(2*2s)

단계(3)

translateY(-300%)=translateY(3*-100%)

예, 이 값은 CSS 변수일 수 있습니다.코드가 확장되므로 원하는 수의 텍스트를 쉽게 추가할 수 있습니다.
신축 가능한 CSS 전용 타자기 효과:
✔️ Javascript가 없습니다.
✔️ 기본 HTML 코드
✔️ 복잡한 CSS 코드 없음
✔️ 접근하기 쉽다
✔️ 모든 텍스트 내용에 적용
✔️ 너는 어떤 글씨체든지 사용할 수 있다
✔️ 신축 가능
✔️ 브라우저 지원 문제 없음