大致思路：
使用相對定位的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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/549780.html
標籤：其他