大致思路：
使用相对定位的div覆盖文本内容，并用animation控制宽度，位置。
换行步骤在外层div上控制高度即可。
css的steps与animation一起使用可以控制文字单个显示，类似于文本输入，不过显示频率是线性。
添加一些css变量控制步骤宽度、高度和时间等，便于vue中也通过组件的props控制
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>春江花月夜 唐·张若虚</title>
6 <style type="text/css">
7 body {
8 margin: 0;
9 }
10
11 div.step {
12 --step-width: 16em;
13 --start-step-height: 5em;
14 --end-step-height: 41em;
15 --step-row-count: 18;
16 --step-row-second: 4s;
17 --step-column-count: 16;
18 --step-column-second: 4s;
19 --animation-text-flicker-time: 0.3s;
20
21 position: relative;
22 width: var(--step-width);
23 height: var(--start-step-height);
24 margin: 0 auto;
25 font-size: 14px;
26 overflow: hidden;
27 animation: addHeight calc(var(--step-row-second) * var(--step-row-count)) steps(var(--step-row-count), jump-start) 0s forwards;
28 }
29 .step h1,h4 {
30 margin: 0.5em 0;
31 text-align: center;
32 line-height: 1;
33 }
34 .step p {
35 line-height: 1;
36 }
37 .step .hide {
38 position: absolute;
39 left: 0em;
40 top: calc(var(--start-step-height) + 1em);
41 width: var(--step-width);
42 height: 1em;
43 background-color: #fff;
44 z-index: 1;
45 animation: toRight var(--step-column-second) steps(var(--step-column-count), jump-start) infinite, toBootomOne calc(var(--step-row-second) * var(--step-row-count)) steps(var(--step-row-count), jump-start) var(--step-column-second) forwards, hide 0s calc(var(--step-row-second) * var(--step-row-count)) forwards;
46 }
47 .step .hide::before {
48 position: absolute;
49 width: 2px;
50 height: 1em;
51 top: 0;
52 left: 1px;
53 background-color: #000;
54 animation: text var(--animation-text-flicker-time) infinite;
55 content: '';
56 }
57
58 @keyframes toRight {
59 0% {}
60 100% { left: var(--step-width);width: 0; }
61 }
62 @keyframes toBootomOne {
63 0% {}
64 100% { top: calc(var(--end-step-height) + 1em); }
65 }
66 @keyframes addHeight {
67 0% {}
68 100% { height: var(--end-step-height); }
69 }
70 @keyframes text {
71 0% {}
72 100% { width: 0px; }
73 }
74 @keyframes hide {
75 0% {}
76 100% { display: none; }
77 }
78 </style>
79 </head>
80 <body>
81 <div class="step">
82 <h1>春江花月夜</h1>
83 <h4>唐·张若虚</h4>
84 <p>春江潮水连海平，海上明月共潮生。</p>
85 <p>滟滟随波千万里，何处春江无月明！</p>
86 <p>江流宛转绕芳甸，月照花林皆似霰；</p>
87 <p>空里流霜不觉飞，汀上白沙看不见。</p>
88 <p>江天一色无纤尘，皎皎空中孤月轮。</p>
89 <p>江畔何人初见月？江月何年初照人？</p>
90 <p>人生代代无穷已，江月年年望相似。</p>
91 <p>不知江月待何人，但见长江送流水。</p>
92 <p>白云一片去悠悠，青枫浦上不胜愁。</p>
93 <p>谁家今夜扁舟子？何处相思明月楼？</p>
94 <p>可怜楼上月裴回，应照离人妆镜台。</p>
95 <p>玉户帘中卷不去，捣衣砧上拂还来。</p>
96 <p>此时相望不相闻，愿逐月华流照君。</p>
97 <p>鸿雁长飞光不度，鱼龙潜跃水成文。</p>
98 <p>昨夜闲潭梦落花，可怜春半不还家。</p>
99 <p>江水流春去欲尽，江潭落月复西斜。</p>
100 <p>斜月沉沉藏海雾，碣石潇湘无限路。</p>
101 <p>不知乘月几人归，落月摇情满江树。</p>
102 <div class="hide"></div>
103 </div>
104 </body>
105 </html>
View Code
标签：--,height,width,step,steps,var,文本,css,row
From： https://www.cnblogs.com/carrote/p/17306946.html