HTML5 筆記 - 打字 + 閃爍游標

打字 + 閃爍游標

首先，要實現這個方法需要透過 animation 來呈現，而動畫的部分也滿容易就能達成。直接以童年的回憶標題來呈現給大家看（腦中的音樂…

HTML

1
<div class="typing">我在冒險的起點等你！</div>

打字動畫的原理其實是透過將整個 .typing 的寬度依照 字體 的寬度來變動，所以原本的字體假設是 10em，那 animation 中的 steps(10) 這邊也就需要是相同的寬度，此時在透過 overflow: hidden 屬性將多餘的字體隱藏起來就可以呈現類似打字的動畫感覺。

閃爍游標的呈現方式，其實是透過 border-right / box-shadow 來達成，animation 中開始、結束都是透明 transparent 的，但在中間 50% 給他有 x軸 陰影，就能達成類似閃爍游標的效果。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.typing {
  width: 10em;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid transparent;
  animation: typing 3.5s steps(10, end), blinkCursor 0.75s step-end infinite;
}

/* 打字動畫 */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 10em;
  }
}

/* 閃爍游標 */
@keyframes blinkCursor {
  from{
    box-shadow: 2px 0 0 0 transparent;
  }
  50% {
    box-shadow: 2px 0 0 0;
  }
  to{
    box-shadow: 2px 0 0 0 transparent;
  }
}

也可以來我的 codepen 直接看範例：https://codepen.io/BeastRush/pen/VwLroyG