css steps实现文本一个字一个字显示-Toy模板网

这篇具有很好参考价值的文章主要介绍了css steps实现文本一个字一个字显示。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

大致思路：

　　使用相对定位的div覆盖文本内容，并用animation控制宽度，位置。

　　换行步骤在外层div上控制高度即可。

css的steps与animation一起使用可以控制文字单个显示，类似于文本输入，不过显示频率是线性。

添加一些css变量控制步骤宽度、高度和时间等，便于vue中也通过组件的props控制文章来源地址https://www.toymoban.com/news/detail-410658.html

  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>