CSS 타이핑 효과

CSS에서 여러 줄로 타이핑 효과를 얻으려고합니다. CSS 타이핑 효과

이

내가 다음에 좋은 기준점이었다

https://css-tricks.com/snippets/css/typewriter-effect/

이제 내 원하는 효과가 처음 깜빡이는 커서의 애니메이션이 끝나면 첫 번째 경계 오른쪽의 가시성을 숨길 수 있다는 것입니다. 애니메이션이 끝난 후 경계 오른쪽은 여전히 화면에 표시되며 보이지 않게하고 싶습니다. (마치 키보드의 입력 버튼을 누른 것처럼) 어떻게 생각 하나?

https://jsfiddle.net/6567onn8/5/

.typewriter h1 { 
 
    text-align: center; 
 
    overflow: hidden; 
 
    font-size: 100%; 
 
    border-right: .15em solid #fff; 
 
    white-space: nowrap; 
 
    /* keeps content in one line */ 
 
    letter-spacing: .15em; 
 
    animation: typing 2.5s steps(22, end), blink-caret .75s step-end; 
 
} 
 
.typewriter h2 { 
 
    font-size: 100%; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    border-right: .15em solid black; 
 
    -webkit-animation: typing 2s steps(26, end), blink-caret 1s step-end infinite; 
 
    -webkit-animation-delay: 3s; 
 
    -webkit-animation-fill-mode: both; 
 
    -moz-animation: typing 2s steps(26, end), blink-caret 1s step-end infinite; 
 
    -moz-animation-delay: 3s; 
 
} 
 
/* The typing effect */ 
 

 
@keyframes typing { 
 
    from { 
 
    width: 0 
 
    } 
 
    to { 
 
    width: 9em; 
 
    } 
 
} 
 
@keyframes blink-caret { 
 
    from, to { 
 
    border-color: transparent 
 
    } 
 
    50% { 
 
    border-color: #000; 
 
    } 
 
}

<div class="typewriter"> 
 
    <h1>Hi. I'm Andy.</h1> 
 
    <h2>I love learning.</h2> 
 
</div>

출처

2016-11-07 Andy Jean Louis

infinite

을 꺼내 당신은 의미합니까 https://jsfiddle.net/6567onn8/5 /? –

@GCyrillus woow, CSS 타이핑, 꽤 멋지 네요! ': -D' – Martin

그냥

.typewriter h1 { 
 
    text-align: center; 
 
    overflow: hidden; 
 
    font-size: 100%; 
 
    border-right: .15em solid #fff; 
 
    white-space: nowrap; 
 
    /* keeps content in one line */ 
 
    letter-spacing: .15em; 
 
    animation: typing 2.5s steps(22, end), blink-caret .75s step-end; 
 
} 
 
.typewriter h2 { 
 
    font-size: 100%; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    border-right: .15em solid black; 
 
    -webkit-animation: typing 2s steps(26, end), blink-caret 1s step-end; 
 
    -webkit-animation-delay: 3s; 
 
    -webkit-animation-fill-mode: both; 
 
    -moz-animation: typing 2s steps(26, end), blink-caret 1s step-end; 
 
    -moz-animation-delay: 3s; 
 
} 
 
/* The typing effect */ 
 

 
@keyframes typing { 
 
    from { 
 
    width: 0 
 
    } 
 
    to { 
 
    width: 9em; 
 
    } 
 
} 
 
@keyframes blink-caret { 
 
    from, to { 
 
    border-color: transparent 
 
    } 
 
    50% { 
 
    border-color: #000; 
 
    } 
 
}

<div class="typewriter"> 
 
    <h1>Hi. I'm Andy.</h1> 
 
    <h2>I love learning.</h2> 
 
</div>

출처

2016-11-07 22:14:23 Walt

경계가 여전히 뷰포트에 표시됩니다. 무한을 제거하면 뷰포트 가장자리로 테두리가 이동합니다. –

코드를 조금 더 자세히 보았습니다. 고맙습니다! –

CSS 타이핑 효과

답변

관련 문제