JS+CSS实现逐行逐字输出诗词方法之一

马黑黑

马黑黑

代码

1. <style>
   
2. #mydiv {
   
3.         width: 600px;
   
4.         height: 400px;
   
5.         border: 1px solid gray;
   
6.         position: relative;
   
7.         margin: 20px auto;
   
8. }
   
9. .zi {
   
10.         position: absolute;
    
11.         width: 50px;
    
12.         height: 50px;
    
13.         text-align: center;
    
14.         font: bold 2em / 50px sans-serif;
    
15.         text-shadow: 1px 1px 2px #000;
    
16.         opacity: 0;
    
17.         transition: 0.1s;
    
18.         animation: output var(--tt) var(--delay) forwards;
    
19. }
    
20. @keyframes output {
    
21.         0% { opacity: 0; }
    
22.         95% { opacity: 0; }
    
23.         100% { opacity: 1; }
    
24. }
    
25. </style>
    
26. 
    
27. <div id="mydiv"></div>
    
28. 
    
29. <script>
    
30. let sstr = `白居易·忆江南\n\n江南好，\n风景旧曾谙。\n日出江花红胜火，\n春来江水绿如蓝。\n能不忆江南？`;
    
31. let tt = 20;
    
32. let output = (ele,str) => {
    
33.         ele.innerText = '';
    
34.         let lines = str.split('\n'), ziNum = 0, delay = 0.2;
    
35.         for(j = 0; j < lines.length; j ++) {
    
36.                 let ar = lines[j].split('');
    
37.                 for(k = 0; k < ar.length; k ++) {
    
38.                         ziNum ++;
    
39.                         let zi = document.createElement('span');
    
40.                         zi.className = 'zi';
    
41.                         zi.innerText = ar[k];
    
42.                         zi.style.cssText += `
    
43.                                 left: ${k*40}px;
    
44.                                 top: ${j* 40}px;
    
45.                                 color: #${Math.random().toString(16).substr(-6)};
    
46.                                 --tt: ${ziNum * delay}s;
    
47.                                 --delay: ${ziNum * delay - delay}s;
    
48.                         `;
    
49.                         ele.appendChild(zi);
    
50.                 }
    
51.         }
    
52.         tt = ziNum * delay * 2000 + 2000;
    
53. };
    
54. 
    
55. let update = () => {
    
56.         output(mydiv,sstr);
    
57.         setTimeout(() => { update(); }, tt);
    
58. };
    
59. 
    
60. setTimeout(update,100);
    
61. 
    
62. </script>

复制代码

马黑黑

说明：

一、思路

与前几天演示的css-doodle排版相关的文章一样，使用元素的 opacity 属性令文本从完全透明到不透明的方式逐一呈现出来。

二、CSS和HTML部分

（一）需要一个父窗体作为文字输出场景（#mydiv 选择器）；
（二）文字个体（含标点）需要一个span元素装载（.zi 选择器）；
（三）需要一个关键帧动画（@keyframes 设定的 output）。调用关键帧动画的 animation 属性内设两个CSS变量：--tt 是单字运行关键帧动画总时长，--delay 是延时执行动画的时间。

三、JS部分

（一）变量 sstr 是字符串变量，是要输出的诗词，规范是断行使用 \n 符号；
（二）变量 tt 是定时器运行周期时间（秒），预设的值随意，后面会根据字数重新计算赋值；
（三）函数 output(ele,str) 用于清除、加载文本，其思路是，每次执行它，先清空父窗体所有内容，然后设置、装载文本，在设置文本时，给每一个 span 标签定义好 ① 位置 ② 随机文本颜色 ③ 两个CSS变量值，最后计算出 JS变量 tt 值。
（四）函数 update() 运行（三）的函数，内置定时器 setTimeout 令其每隔 tt 毫秒循环执行 output(ele,str ) 函数，注意函数参数的代入值。

（四）其他

第60行启动一次 update() 函数，令程序进入工作状态。

焱鑫磊

黑黑老师厉害了。

亦是金

谢谢老师教程！收藏学习备用！

马黑黑

焱鑫磊 发表于 2023-5-22 09:09
黑黑老师厉害了。

果酱果酱

马黑黑

亦是金 发表于 2023-5-22 10:40
谢谢老师教程！收藏学习备用！

还有一个可以控制的，马上发出

马黑黑

醉美水芙蓉 发表于 2023-5-22 11:44
欣赏老师佳作！

中午好

南无月

第一版实现方式不同，两版可对比学习。老师好细心

马黑黑

南无月 发表于 2023-5-22 12:35
第一版实现方式不同，两版可对比学习。老师好细心

纯JS做的，有很多种实现方式，这里提供的两种，我个人觉得第二种比较好

红影

这个好，换行更方便，而且时间掌握上完全和字数对应了。给黑黑点赞

梦缘

感谢老师的分享，欣赏点赞！

红影

去试了一下，空格也认的呢

南无月

马黑黑 发表于 2023-5-22 12:54
纯JS做的，有很多种实现方式，这里提供的两种，我个人觉得第二种比较好

我尽量努力看懂为啥第二种比较好

马黑黑

南无月 发表于 2023-5-22 17:56
我尽量努力看懂为啥第二种比较好

一个是观感，二个是可控性，三个是使用元素的多寡

南无月

马黑黑 发表于 2023-5-22 18:05
一个是观感，二个是可控性，三个是使用元素的多寡

这么说的话就明白了，可控和代码少是可见的优势。观感没感觉，看上去差不多。。

马黑黑

红影 发表于 2023-5-22 17:02
这个好，换行更方便，而且时间掌握上完全和字数对应了。给黑黑点赞

这个可以玩玩，但我总是不是太满意，主要在控制方面，需要的编程开销比较大

马黑黑

红影 发表于 2023-5-22 17:05
去试了一下，空格也认的呢

它不会忽略空格，我编写代码的时候注意到了这一点，虽然我对此什么也没做

马黑黑

南无月 发表于 2023-5-22 18:14
这么说的话就明白了，可控和代码少是可见的优势。观感没感觉，看上去差不多。。

还是有差别的