비전공자 개발일기

Typing Effect 본문

HTML _CSS

Typing Effect

HiroDaegu 2022. 11. 6. 00:41
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TYPING EFFECT</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="typing-demo">This is Typing effect</div>
    </div>
</body>
</html>
.wrapper {
    height: 100vh;
    display: grid;
    place-items: center;
}

.typing-demo {
    width: 21ch;
    animation: typing 2s steps(22), blink .5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    font-family: monospace;
    font-size: 2em;
}

@keyframes typing {
    from {
        width: 0;
    }
}

@keyframes blink {
    50% {
        border-color: transparent;
    }
}
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

Main Page in WEB  (0) 2022.11.10
Filter Gallery  (0) 2022.11.07
Circle Scroll  (0) 2022.11.05
Hidden Search Bar  (0) 2022.11.02
Halloween Banner  (0) 2022.11.01
'HTML _CSS' Related Articles more