프로그래밍/Frontend
[html/css] CSS로 타이핑 효과, 커서 효과 주는 방법
돔돔이
2023. 5. 16. 15:50
728x90
반응형
html, css로 타이핑 효과, 커서 애니메이션 효과 주는 방법 입니다 !
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
#box{
width: 200px;
height: 100px;
background: #7459AE;
padding: 30px;
}
.text{
font-weight: bold;
color: white;
}
.blink {
animation: blink 0.5s infinite;
}
@keyframes blink {
to {
opacity: 0;
}
}
</style>
</head>
<body>
<div id="box">
<span class="text"></span><span class="blink">|</span>
</div>
<script>
const content = "안녕하세요. 반갑습니다. 돔돔이블로그에 오신 것을 환영합니다 ! 😍😍😍";
const text = document.querySelector(".text");
text.textContent = "";
let txtIdx = 0;
function typing(){
let txt = content[txtIdx++];
if (txt == undefined) return;
text.innerHTML += txt=== "\n" ? "<br/>": txt;
if (txtIdx > content.length) {
txtIdx = 0;
}else{
setTimeout(typing, 100)
}
}
typing();
</script>
</body>
</html>728x90
반응형