【悬空的石头】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://s2.ananas.chaoxing.com/sv-w7/audio/aa/d2/3b/002cf79344f12adb91c08fe3a998e045/audio.mp3" 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石头，夜夜圧在我的心上\n <span class="tRight">—— 樵歌 </span>`,
`<span><strong>二</strong></span><br><br>\n 午夜的风里，梦游的灵魂\n匍匐如婴儿，爬进我\n蜿蜒的诗句\n黑夜没有星子\n石头眨着幽暗的光芒\n 我的眼睛一刻不停\n不放过任何动静\n <span class="tRight">—— 樵歌 </span>`,
`<span><strong>三</strong></span><br><br>\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>
【悬空的石头】TO 小辣椒
道路是如此深广， 悠长
踉跄的亲人忧心如焚， 是谁
在路的上方悬着一方巨大的
石头，夜夜圧在我的心上
午夜的风里，梦游的灵魂
匍匐如婴儿，爬进我
蜿蜒的诗句
黑夜没有星子，石头眨着幽暗的光芒
我的眼睛一刻不停
不放过任何动静
经过不断的吟咏和搓磨
天亮时，刚许下第一千零一个愿
石头就湮灭了
天使重回天上，她说
来自人间的每一个关怀
都给她添上了一双翅膀
@小辣椒 小辣椒老师快来收礼！ 欣赏樵歌老师的精彩图文。问好！ 樵歌 发表于 2024-11-18 11:31
@小辣椒
谢谢樵哥哥，来了{:4_187:}
看见樵哥哥的这些文字，小辣椒泪目了，感谢樵哥哥一直以来的关系和爱护{:4_179:}
梦江南 发表于 2024-11-18 11:36
欣赏樵歌老师的精彩图文。问好！
谢谢来捧场哈。{:4_187:} 小辣椒知道怎么感恩，对论坛其他关心小辣椒的好朋友们，一样让我好感动的，感受到花潮大家庭的温暖，感谢大家{:4_179:} 梦江南 发表于 2024-11-18 11:34
小辣椒老师快来收礼！
谢谢梦江南，来了，别叫老师啊{:4_171:} 小辣椒 发表于 2024-11-18 12:27
谢谢樵哥哥，来了
看见樵哥哥的这些文字，小辣椒泪目了，感谢樵哥哥一直以来的关系和爱护{:4 ...
其实这字早写好，得到好消息后，稍微改了下，才敢发出来。{:4_179:} 小辣椒 发表于 2024-11-18 12:27
谢谢樵哥哥，来了
看见樵哥哥的这些文字，小辣椒泪目了，感谢樵哥哥一直以来的关系和爱护{:4 ...
这个纯音乐和文字也挺配的，以前我用的那“心愿”我发不出声来{:4_201:} 背景音乐加了一首【夜雨花 (纯音乐)】
樵哥哥这个模版现在看看也是挺漂亮的，哈哈，玩的开心，第一次看见你用这个模版 樵歌 发表于 2024-11-18 12:34
其实这字早写好，得到好消息后，稍微改了下，才敢发出来。
谢谢樵哥哥，知道你的用心，小辣椒会记住你的好{:4_179:} 樵歌 发表于 2024-11-18 12:35
这个纯音乐和文字也挺配的，以前我用的那“心愿”我发不出声来
你的音乐是不能外链了，现在网易许多音乐不能外链的 樵歌 发表于 2024-11-18 12:32
谢谢来捧场哈。
这么好的图文音画来欣赏也是种享受呢。下午好！ 小辣椒 发表于 2024-11-18 12:33
谢谢梦江南，来了，别叫老师啊
能者为师啊，习惯了。{:4_204:} 欣赏精美帖子， 赞！ 逐行出现的诗句，设计制作真出彩啊。 小辣椒 发表于 2024-11-18 12:39
背景音乐加了一首【夜雨花 (纯音乐)】
樵哥哥这个模版现在看看也是挺漂亮的，哈哈，玩的开心，第一次看 ...
我本来收藏在微信“我的文件传输助手”里的，可惜过了时间，丢了，后来才在帖子里找出来的。{:4_189:} 小辣椒 发表于 2024-11-18 12:47
谢谢樵哥哥，知道你的用心，小辣椒会记住你的好
樵哥哥是应当的哈{:4_204:}