纯html+css实现打字效果

本文主要介绍了纯html+css实现打字效果，具有一定的参考价值，感兴趣的可以了解一下
效果图

分析


可以将动画看做三个不同的层次：

最底层的文字中间挡住文字的背景最上层的光标

文字是静止的，而中间的背景和最上层的光标是动态的。
初始时，背景挡住所有的文字，光标在最左边。
动画进行时，背景和光标以相同的步伐从左往右移动。
动画结束时，背景不再遮挡文字，光标则在最右边闪烁。

代码


html

1. <div class="text">hello,world!</div>

复制代码

css

1. :root {
2.     /* 字符数量 */
3.     --steps: 12;
4.     /* 动画时间 */
5.     --duration: 2.5s;
6.     /* 字体大小 */
7.     --fontSize: 50px;
8.     /* 光标大小 */
9.     --cursorSize: 20px;
10. }
12. .text {
13.     color: #333;;
14.     position: relative;
15.     display: inline-block;
16.     font-family: 'Courier New', Courier, monospace;
17.     font-size: var(--fontSize);
18.     line-height: 1;
19. }
21. .text::after {
22.     content: '';
23.     width: var(--cursorSize);
24.     height: var(--fontSize);
25.     background-color: black;
26.     z-index: 2;
27.     position: absolute;
28.     animation: blink 1s var(--duration) step-end infinite,
29.                moveCursor var(--duration) steps(var(--steps)) forwards;
30. }
32. .text::before {
33.     content: '';
34.     width: 100%;
35.     height: var(--fontSize);
36.     z-index: 1;
37.     position: absolute;
38.     background: linear-gradient(#fff, #fff) no-repeat top right;
39.     animation: showText var(--duration) steps(var(--steps)) forwards;
40. }
42. /* 光标闪烁动画 */
43. @keyframes blink {
44.     0% {
45.         background-color: black;
46.     }
47.     50% {
48.         background-color: transparent;
49.     }
50.     100% {
51.         background-color: black;
52.     }
53. }
55. /* 光标移动动画 */
56. @keyframes moveCursor {
57.     0% {
58.         left: 0%;
59.     }
60.     100% {
61.         left: 100%;
62.     }
63. }
65. /* 背景移动动画 */
66. @keyframes showText {
67.     0% {
68.         background-size: 100% 100%;
69.     }
70.     100% {
71.         background-size: 0% 100%;
72.     }
73. }

复制代码

注意
字体必须是等宽字体。因为光标每次移动的距离是是根据字符的数量 / 总宽度来决定的。

在线演示

到此这篇关于纯html+css实现打字效果的文章就介绍到这了,更多相关html css打字效果内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章，希望大家以后多多支持中国红客联盟！