【隐者】 TO东篱闲人
<style>#papa { --width: 1275px; margin: 120px 0 20px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 713px; background: url('https://cccimg.com/view.php/6010fcb48da7189bde857527a20f2e61.gif') no-repeat center/cover; box-shadow: 3px 3px 8px #666; user-select: none; z-index: 1; position: relative; }
#txtbox { position: absolute; right: 180px;top: 100px; width: 700px; min-height: 120px; padding: 10px 20px; box-sizing: border-box; overflow: hidden;writing-mode:vertical-lr; letter-spacing: 5px;}
#txtbox p { position: relative; margin: 4px 0; padding: 0; font: normal 26px/36px sans-serif; \9ED1\4F53;color: Black; txtAr-shadow: 1px 1px 1px gray; animation: 2s forwards; }
#player { position: absolute; width: 100px;right: 50%;bottom: 40px; cursor: pointer; animation: rot 6s linear infinite; opacity: 0.65; z-index: 5;}
#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; }
.wz { position: relative; --w: 300px; border: 0px solid; left:600px; top:510px; width: var(--w); overflow: hidden;}
.wz div { word-break: keep-all; white-space: nowrap; font-family: '\9ED1\4F53'; font-size: 22px; color: Black; animation: wz1 52s linear infinite; opacity: .95; }
@keyframes wz1 { from { transform: translateX(100%); } to { transform: translateX(calc(-240% - var(--w))); }}
@keyframes move { to { transform: translate(0); } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://wj.zp68.com/qg01/2025/相逢是首歌_巴阳.m4a" autoplay loop></audio>
<div id="txtbox"></div>
<img id="player" alt="" src="https://cccimg.com/view.php/4609b38b6f0f5a23a8e8c9f89df414a3.png " title"播放/暂停" />
<div class="wz"><div>【隐者】 TO东篱闲人-文//樵歌-图//小辣椒</div></div>
</div>
</div>
<script>
var txtAr = [
`<span><strong>一</strong></span><br><br>\n铜灯穿越成宋时的明月 \n端砚里涨着汴河的潮汐\n风吮着竹帘，不断地誊写曹植\n从笔洗中，泾流向五大莲池\n<span class="tRight">—— 樵歌 </span>`,
`<span><strong>二</strong></span><br><br>\n 草堂正被烟雨润泽成，泛黄的瘦金体\n一袭蓑衣，在墙隅酿制烧刀\n不断发酵与炮制\n绿蚁便背上了商周的香腻\n <span class="tRight">—— 樵歌 </span>`,
`<span><strong>二</strong></span><br><br>\n 推窗时，南山之南的\n野菊花，便蜂涌地挤进陶罐\n再从笔端溢出鹧鸪斑，洒满洛阳\n所有的纸面\n <span class="tRight">—— 樵歌 </span>`,
`<span><strong>二</strong></span><br><br>\n 电子萤火照亮陱潜的影子\n那脊椎骨不断地，溢出他的染色体\n当投影仪将松烟和竹林\n3 D成像素，梅花们立即泪流如洗\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>
《隐者》铜灯穿越成宋时的明月端砚里涨着汴河的潮汐风吮着竹帘，不断地誊写曹植从笔洗中，泾流向五大莲池
草堂正被烟雨润泽成，泛黄的瘦金体一袭蓑衣，在墙隅酿制烧刀不断发酵与炮制绿蚁便背上了商周的香腻
推窗时，南山之南的野菊花，便蜂涌地挤进陶罐再从笔端溢出鹧鸪斑，洒满洛阳所有的纸面
电子萤火照亮陱潜的影子那脊椎骨不断地，溢出他的染色体当投影仪将松烟和竹林3 D成像素，梅花们立即泪流如洗
@东篱闲人 珠联璧合的精美礼让人品拍案叫绝！ 老樵这贴实在是太有功力了，那比驴跑的还快的是咱吗？{:4_172:} 樵歌 发表于 2025-4-22 15:46
《隐者》铜灯穿越成宋时的明月端砚里涨着汴河的潮汐风吮着竹帘，不断地誊写曹植从笔洗中，泾流向五大莲池
...
这文字，怎一个雅字了得，大才子啊。。。{:4_204:} 本帖最后由 东篱闲人 于 2025-4-22 19:59 编辑
这歌声中气十足，饱满高亢，一看就是放了道台的人，还能娶五房姨太太。。。。{:4_181:} 图文并茂，美不胜收。赞个 梦油 发表于 2025-4-22 17:26
珠联璧合的精美礼让人品拍案叫绝！
谢谢老哥来捧场哈{:4_190:} 东篱闲人 发表于 2025-4-22 19:37
老樵这贴实在是太有功力了，那比驴跑的还快的是咱吗？
那代步工具是你师傅@小辣椒 为你准备滴{:4_170:} 樵歌 发表于 2025-4-22 19:56
那代步工具是你师傅@小辣椒 为你准备滴
这个极好。。。{:5_106:} 东篱闲人 发表于 2025-4-22 19:38
这文字，怎一个雅字了得，大才子啊。。。
本来是打算凑古韵的，但我的古韵在你面前岂不班门弄斧么，只好写几句白话了{:4_189:} 东篱闲人 发表于 2025-4-22 19:39
这歌声中气十足，饱满高亢，一看就是放了道台的人，还能娶五房姨太太。。。。
一时没找到合适的，就自己献丑唱吧。道台是哈滴，他凭啥才娶一房，多几百房不行么{:4_170:} 樵歌 发表于 2025-4-22 20:03
本来是打算凑古韵的，但我的古韵在你面前岂不班门弄斧么，只好写几句白话了
咱最爱看你谦虚的小样子。。。{:4_172:} 樵歌 发表于 2025-4-22 20:05
一时没找到合适的，就自己献丑唱吧。道台是哈滴，他凭啥才娶一房，多几百房不行么
看你这精气神，可以考虑。。。{:4_181:} 樵歌 发表于 2025-4-22 15:46
《隐者》铜灯穿越成宋时的明月端砚里涨着汴河的潮汐风吮着竹帘，不断地誊写曹植从笔洗中，泾流向五大莲池
...
师兄的诗句，把东篱大哥描述成隐者了，这隐者那么雅致，连烟雨草堂都透着古韵气息。
这诗句很棒。{:4_199:} 帖子不但有诗句还有师兄自己的翻唱呢，这首翻唱也特别好，情感饱满，气息稳定。
这个回礼很厚重，内容丰富啊。东篱大哥收礼开心{:4_199:} 红影 发表于 2025-4-22 20:15
帖子不但有诗句还有师兄自己的翻唱呢，这首翻唱也特别好，情感饱满，气息稳定。
这个回礼很厚重，内容丰富 ...
人家的礼物好生珍贵，俺们也得拿出点象样的呗。{:4_189:}不过这首歌调子简单好唱点。 红影 发表于 2025-4-22 20:11
师兄的诗句，把东篱大哥描述成隐者了，这隐者那么雅致，连烟雨草堂都透着古韵气息。
这诗句很棒。{:4_19 ...
有鉴于东篱先生的音画功夫了得，加上其名曰东篱，所以就以古文化为强的宋朝等加了些宋朝的元素进去，虚实写真。还算是无愧于他的美丽音画了。 东篱闲人 发表于 2025-4-22 20:08
看你这精气神，可以考虑。。。
那准备封俺 那一路的道台丫？{:4_189:}先说好宁古塔那苦寒之地俺 决不去上任{:4_334:}