福宝 发表于 2024-6-30 00:36

岁闲青山


<style>
    #papa { --width: 1350px; margin: 120px 0 20px calc(50% - (var(--width) / 2 + 90px)); width: var(--width); height: 2400px; background: url('https://gd-hbimg.huaban.com/456a213d8d8305fa4c8d701e0a489228077e178b1131e-hrdVYw_fw1200') 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://gd-hbimg.huaban.com/49e442019ae97d92226ab873054a0648f783f1867d1d-UQFEO7_fw1200'); 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: 240px; right: 180px; bottom: 1200px; 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=556204026" 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://gd-hbimg.huaban.com/ad169caa0f05cdcff8db7663f1cfdd30c1d58c5e19190b-XTCQ4V" 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
借片春色千金不换\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
不知何谢方知心头的暖\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-30 09:16

好看{:10_402:}

福宝 发表于 2024-6-30 15:38

多谢临帖
页: [1]
查看完整版本: 岁闲青山