CSS3를 사용하여 타이핑 효과 시뮬레이션(코드 예)

이 기사에서는 CSS3를 사용하여 중국어/영어 타이핑 효과를 시뮬레이션하는 방법을 코드 예제를 통해 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

추천: css 비디오 튜토리얼

1. CSS3를 사용하여 타이핑 효과를 얻는 원리

타이핑 효과를 시뮬레이션하려면 문자를 하나씩 점차적으로 표시해야 합니다.

여기서 컨테이너의 너비를 변경하면 컨테이너의 너비가 0부터 점차 증가합니다. 각 증가의 너비는 각 문자의 너비이므로 입력 효과를 시뮬레이션할 수 있습니다.

현실감을 높이기 위해 커서의 깜박임 효과를 추가하여 타이핑 효과를 더 잘 시뮬레이션할 수 있습니다.

구현해야 할 점:

• CSS를 사용하여 텍스트 컨테이너의 너비를 점차적으로 늘리는 방법

• 컨테이너의 너비를 각 문자의 너비와 동일하게 매번 늘리는 방법

• 커서 깜박임 효과를 시뮬레이션하는 방법

해당 구현 방법:

• CSS3에서 애니메이션을 사용하여 애니메이션 효과 구현

• 애니메이션의 단계를 사용하여 단계별 구현 애니메이션

• 텍스트 컨테이너의 오른쪽 테두리 애니메이션을 사용하여 커서 깜박임 효과 구현

2. 실현

1. 영어 입력 효과

html :

<h1>A miss is as good as a mile.</h1>

cs s 구현:

@keyframes typing {
    from { width: 0}
}
@keyframes blink-caret {
    50% { border-color: transparent; }
}
 
h1 {
    font: 200% monospace;
    border-right: .08em solid;
    width: 28ch;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 10s steps(28, end),
               blink-caret .5s step-end infinite alternate; //这里的alternate是为了让光标闪烁的正常一点
}

여기서는 영어 타이핑 효과 구현이므로 글꼴은 모노스페이스 글꼴을 사용하고 길이 단위는 ch(1ch는 현재 숫자 0의 너비) 글꼴) 고정 폭 글꼴 아래에서는 다른 문자의 너비도 1ch와 같습니다. 이런 식으로 텍스트 컨테이너의 너비 = 전체 문자 수 * 1ch를 설정할 수 있습니다.

애니메이션 단계를 사용하여 텍스트 컨테이너의 너비를 0에서 실제 너비까지 점차적으로 늘리도록 합니다.

steps는 애니메이션을 단계별로 나눠서 플레이할 수 있는데, 여기처럼 28개의 캐릭터가 있고, 각 캐릭터를 하나씩 표시하려면 연속된 애니메이션을 28단계로 나누어서 플레이해야 합니다.

깜박임 캐럿 애니메이션은 오른쪽 테두리의 투명도를 변경하고 반복적으로 재생하여 커서의 깜박임 효과를 구현하는 것입니다.

2. 중국어 타이핑 효과

중국어 타이핑 효과와 영어의 차이점은 고정 폭 글꼴에서는 중국어 한 글자가 2ch이므로 텍스트 컨테이너의 너비는 = 한자수 * 2ch.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 CSS3를 사용하여 타이핑 효과 시뮬레이션(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!