はじめに
CSSを学びたい！Step12です！今回はキータイピングを実現していきます！！
成果物
ソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タイピングエフェクトの例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="typing-effect">これはタイピングエフェクトのテキストです。</div>
</body>
</html>
styles.css
@keyframes typing {
from { width: 0; } /* アニメーションの開始時点で幅を0に設定 */
to { width: 100%; } /* アニメーションの終了時点で幅を100%に設定 */
}
@keyframes blink-caret {
from, to { border-color: transparent; } /* アニメーションの開始と終了時点でカーソルを透明に設定 */
50% { border-color: black; } /* アニメーションの中間点でカーソルを黒に設定 */
}
.typing-effect {
font-family: monospace; /* 等幅フォントを使用 */
white-space: nowrap; /* テキストを折り返さない */
overflow: hidden; /* 要素の内容がはみ出さないように隠す */
border-right: 0.15em solid black; /* 右側にカーソルを表示 */
width: 0; /* 初期幅を0に設定 */
animation: typing 3.5s steps(40, end) forwards, blink-caret 0.75s step-end infinite; /* タイピングとカーソルの点滅アニメーションを設定 */
}
→CSSだけでこんなにできると面白いですね！！