CSS로 타이핑 효과 내기

CSS로 타이핑 효과 내기.

 

 

 

html 기본 구조

<div class="txt_box">
<p>Hello, World</p>
</div>

 

CSS

.txt_box {
	position:relative;
    display: inline-block;
    overflow-y: hidden;
    margin:28vh 0; // 원하는 위치가 있다면 margin 값 조절
}
.section.con_01 p {

	//txt style
    font-size:28px;
    font-weight:bold;
    color:#9fd0ca;

    // 타이핑 효과
    border-right:4px solid #fff; // 커서
    overflow:hidden;
    white-space:nowrap; 
    animation: typing 10s steps(27) forwards, // 타이핑 속도 조절
               blink-caret .8s step-end infinite;
    animation-iteration-count: infinite
}

//깜빡 거리는 효과
@keyframes blink-caret{
    from, to{border-color:transparent;} 
    50%{border-color:#fff}
}

// 글자가 보여지는 효과
@keyframes typing{
    0%{width:0%;}
    30%{width:100%}
    80%{width:100%}
    90%{width:0%}
    100%{width:0%}
}

 

 

참고 블로그

blog.naver.com/haha7037/222081375460

HTML/CSS 타이핑 효과 내기

 

 

 

 

 

 

첫번째 방법보다 조금 더 부드럽게 나오는 타이핑

 

html 기본 구조

<div class="txt_box">
<p>typing effect 02</p>
</div>

 

CSS

.txt_box p{
	// font style
    font-size:25px;
    font-weight:bold;
    
    // 타이핑 효과를 위한 기본 설정
    color:transparent;
    white-space:nowrap;
    
    // 화면의 중앙 배치
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50% -50%);
}

// 커서 효과를 위한 기본 설정
.txt_box p:before{
    content:"typing effect 02";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    color:#9fd0ca;
    overflow:hidden;
    border-right:3px solid #fff;
    
    // 커서 효과
    animation: typing 4s steps(50) forwards;

}

// 타이핑 효과
@keyframes typing {
    0% {width:0%;}
    100% {width:100%;}
}

 

 

참고 블로그

blog.naver.com/jmin614/222203721929

[CSS] 타이핑 애니메이션