- A+
所属分类：Web前端
大致思路：
使用相对定位的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
