1

2

3

<div class="typewriter">

  <h1 class="typing">The cat and the hat.</h1>

</div>

1

2

3

4

5

/* 打字机动画 */

@keyframes typing {

  from { width: 0 }

  to { width: 100% }

}

1

2

3

4

5

/* 光标动画 */

@keyframes blink-caret {

  from, to { border-color: transparent }

  50% { border-color: orange }

}

1

2

3

4

5

6

7

8

9

10

11

12

.typewriter .typing {

  color: #fff;

  font-family: monospace;

  overflow: hidden; /* 保证文字在动画之前隐藏 */

  border-right: .15em solid orange; /* 使用边框实现光标 */

  white-space: nowrap;

  margin: 0 auto;

  letter-spacing: .15em;

  animation:  /** 动画效果 */

    typing 3.5s steps(30, end),

    blink-caret .5s step-end infinite;

}