长相思

马黑黑 发表于 2024-6-29 18:29

马黑黑 发表于 2024-6-29 18:30

本帖最后由马黑黑于 2024-6-29 20:41 编辑

帖子代码<style>
#papa { --width: 1000px; margin: 20px 0 20px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 562px; background: url('https://638183.freep.cn/638183/t24/3/ihxlsi.jpg') no-repeat center/cover; box-shadow: 3px 3px 8px #666; user-select: none; z-index: 1; position: relative; }
#papa::before { position: absolute; content: url('https://638183.freep.cn/638183/small/hf.webp'); mix-blend-mode: lighten; filter: blur(1px); }
#txtbox { position: absolute; left: 20px; top: 20px; width: 300px; min-height: 60px; padding: 10px 20px; box-sizing: border-box; overflow: hidden; }
#txtbox p { position: relative; margin: 4px 0; padding: 0; font: normal 24px/26px sans-serif; color: cyan; txtAr-shadow: 1px 1px 1px gray; animation: 2s forwards; }
#player { position: absolute; width: 120px; right: 60px; bottom: 100px; cursor: pointer; animation: rot 6s linear infinite; }
#vid { position: absolute; width: 100%; height: 80%; object-fit: cover; mix-blend-mode: screen; opacity: 0.5; pointer-events: none; }
.tMid, .tRight { display: inline-block; width: 100%; }
.tMid { text-align: center; }
.tRight { text-align: right; font-size: 18px; }
@keyframes move { to { transform: translate(0); } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1467202239" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/67/5b483eab6f0a1.mp4" muted autoplay loop></video>
<div id="txtbox"></div>
<img id="player" alt="" src="https://638183.freep.cn/638183/t23/btn/meihua_133482968750383750.png" title"播放/暂停" />
</div>

<script>
var txtAr = [
`<span class="tMid"><strong>长相思</strong>（其一）</span><br><br>\n长相思，在长安。\n络纬秋啼金井阑，\n微霜凄凄簟色寒。\n孤灯不明思欲绝，\n卷帷望月空长叹。\n美人如花隔云端。\n上有青冥之高天，\n下有渌水之波澜。\n天长路远魂飞苦，\n梦魂不到关山难。\n长相思，摧心肝。\n<span class="tRight">——[唐]李白</span>`,
`<span class="tMid"><strong>长相思</strong>（其二）</span><br><br>\n日色欲尽花含烟，\n月明欲素愁不眠。\n赵瑟初停凤凰柱，\n蜀琴欲奏鸳鸯弦。\n此曲有意无人传，\n愿随春风寄燕然。\n忆君迢迢隔青天。\n昔时横波目，\n今作流泪泉。\n不信妾肠断，\n归来看取明镜前。\n<span class="tRight">——[唐]李白</span>`
];
var curIdx = 0;
var paras = [];
var ww = txtbox.offsetWidth;

var addPs = () => {
var txtstr = txtAr;
txtbox.innerHTML = '';
paras.length = 0;
var ar = txtstr.split(/\n/).filter(item => item !=='');
ar.forEach((p,k) => {
var para = document.createElement('p');
para.innerHTML = p;
para.style.cssText += `transform: translate(${ww}px);`;
txtbox.appendChild(para);
paras.push(para);
});
curIdx = (curIdx + 1) % txtAr.length;
mkAni();
};

var parasReset = () => {
addPs();
paras.forEach(p => {
p.style.animationName = '';
p.style.transform = 'translate(${ww}px)';
setTimeout( () => { paras.style.animationName = 'move'; }, 500);
});
};

var mkAni = () => {
paras.forEach((p,k) => {
p.onanimationend = () => {
paras[(k+1) % paras.length].style.animationName = 'move';
if(k === paras.length - 1) setTimeout( () => parasReset(), 10000);
};
});
};

var mState = () => {
[...paras,...].forEach(p => p.style.animationPlayState = aud.paused ? 'paused' : 'running');
aud.paused ?vid.pause() : vid.play();
player.title = ['暂停', '播放'][+aud.paused];
};

aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();

addPs();
paras.style.animationName = 'move';

</script>

马黑黑 发表于 2024-6-29 18:30

本帖最后由马黑黑于 2024-6-29 21:08 编辑

相关说明：

（一）文本效果具体实现原理

请查阅 CSS关键帧动画文本效果：逐行出场 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com)

（二）待输出文本

代码在 23~26 行，变量是 txtAr，是个数组变量，支持单组数组（即只循环输出一段文本）。数组格式可以如下任意一种：

//使用 \n 分隔符：小角引号或反引号都可以（本例三段文本）
var txtAr = [
'第一句\n第二句\n第三句\n第N句',
'第一句\n第二句\n第三句\n第N句',
'第一句\n第二句\n第三句\n第N句',
];

//分行书写：要求使用反引号（本例两段文本）
var txtAr = [
`
   第一句
   第二句
   第三句
   第N句
`,
`
   第一句
   第二句
   第三句
   第N句
`,
];

如果只有一段文本：

//使用 \n 分隔符
var txtAr = [
'第一句\n第二句\n第三句\n第N句',
];

//分行写：必须使用反引号
var txtAr = [
`
   第一句
   第二句
   第三句
   第N句
`,
];

（三）相关函数（没有把握的不要去修改）

① addPs() : 主要功能是生成 p 标签，并负责文本组索引号的变更；
② parasReset() : 重置 P标签动画和位置；
③ mkAni() : 批量生成p标签的动画结束时间，一个文本组输出完毕调用 parasReset() 函数。

函数中有彼此调用的情节，理解不了的没关系，知道整体原理就行（请参阅前面给的帖子）。

（四）首次开启动画

代码在 74~75行，主要顺序：先生成p标签，再令第一个p标签运行动画——

addPs();
paras.style.animationName = 'move';

梦江南 发表于 2024-6-29 18:33

老师又出新作了，学习也来不及了！

南无月 发表于 2024-6-29 18:39

来早了，等代码说明。。。{:4_173:}
一首刚理解到七七八八，两首的就来了。。
老师这出贴速度神一〇八

南无月 发表于 2024-6-29 18:55

贴子画面浪漫梦幻，铁汉也柔情{:4_170:}

马黑黑 发表于 2024-6-29 18:57

南无月发表于 2024-6-29 18:55
贴子画面浪漫梦幻，铁汉也柔情

游戏打累了休闲休闲{:4_170:}

马黑黑 发表于 2024-6-29 18:57

南无月发表于 2024-6-29 18:39
来早了，等代码说明。。。
一首刚理解到七七八八，两首的就来了。。
老师这出贴速度神一〇八

你先看看源码也是可以的

马黑黑 发表于 2024-6-29 18:57

梦江南发表于 2024-6-29 18:33
老师又出新作了，学习也来不及了！

{:4_190:}

千羽发表于 2024-6-29 19:14

黑黑老师现在做柔情图了，景美人也美，播放器也是一如既往的美{:4_187:}

千羽发表于 2024-6-29 19:15

问好黑黑老师，周末快乐{:4_187:}

南无月 发表于 2024-6-29 19:16

马黑黑发表于 2024-6-29 18:57
游戏打累了休闲休闲

高段位游戏师
休闲怎么少得了香咖啡。。
来一杯{:4_190:}{:4_173:}
再跷个二郎腿

南无月 发表于 2024-6-29 19:19

马黑黑发表于 2024-6-29 18:57
你先看看源码也是可以的

在看，span class本来没有在JS里的，现在跑到这里来了。。
span class="tRight可以右对齐。。{:4_173:}

红影发表于 2024-6-29 19:30

这个好，保留了标点符号，还加了标题和作者。现在无论是诗还是词或曲，都可以做到帖子里了{:4_199:}

红影发表于 2024-6-29 19:31

@樵歌快来，你又可以把自己的诗词做成帖子了{:4_173:}

红影发表于 2024-6-29 19:35

这个不但能每首单独字句展示，还是两首或多首作为独立单元分别展示呢，太赞了{:4_199:}

马黑黑 发表于 2024-6-29 20:21

红影发表于 2024-6-29 19:35
这个不但能每首单独字句展示，还是两首或多首作为独立单元分别展示呢，太赞了

理论上多少首都可以，只要按格式熟悉输出数组变量

马黑黑 发表于 2024-6-29 20:21

红影发表于 2024-6-29 19:31
@樵歌快来，你又可以把自己的诗词做成帖子了

本来这帖是出一首诗的，樵歌问了我就改了一下，成了现在这样纸

马黑黑 发表于 2024-6-29 20:22

红影发表于 2024-6-29 19:30
这个好，保留了标点符号，还加了标题和作者。现在无论是诗还是词或曲，都可以做到帖子里了

可以的

马黑黑 发表于 2024-6-29 20:22

千羽发表于 2024-6-29 19:14
黑黑老师现在做柔情图了，景美人也美，播放器也是一如既往的美

硬汉子不都是铁石心肠滴{:4_170:}

页: [1] 2 3 4 5 6 7 8 9 10

花潮论坛's Archiver

长相思