论坛 › 古风雅韵 › 天仙子◆一卷春声春恨长 <三>

朝云暮雨 发表于 2024-7-6 23:56

天仙子◆一卷春声春恨长 <三>

<style>
      #papa { --width: 1273px; margin: 120px 0 20px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 692px; background: url('https://cccimg.com/view.php/3da0fc848339c532572015dfc983554b.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: 550px; 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 24px/36px sans-serif;color: DarkGreen ; txtAr-shadow: 1px 1px 1px gray; animation: 2s forwards; }
      #player { position: absolute; width: 100px;   right: 62%;   bottom: 60px; 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:500px; top:530px; width: var(--w); overflow: hidden;}
.wz div { word-break: keep-all; white-space: nowrap; font-family: '微软雅黑','微软雅黑'; font-size: 20px; color: DarkGreen; 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/lxx/yunhua/2023/08/13/02.mp3" autoplay loop></audio>

      <div id="txtbox"></div>
      <img id="player" alt="" src="https://wj.zp68.com/lxx/yunhua/2024/07/01/ann.png" title"播放/暂停" />
<div class="wz"><div>【天仙子】 料峭深闺春恨长，不见人儿罢晚妆。欲斟离绪共觥觞，邀小月，到檀床，怎寄相思入钱塘？ ---朝云暮雨-代码-小辣椒</div></div>

</div>
</div>
<script>
var txtAr = [
`<span><strong>【天仙子】一卷春声春恨长</strong><br>（一）</strong></span><br><br>\n 料峭深闺春恨长，\n不见人儿罢晚妆。\n
欲斟离绪共觥觞，\n邀小月，\n到檀床，\n怎寄相思入钱塘？\n <span class="tRight">——朝云暮雨-代码-小辣椒 </span>`,
`<span><strong>【天仙子】一卷春声春恨长</strong><br>（二）</strong></span><br><br>\n 万井落花随细雨，\n廿四风云笼烟树。\n
琵琶弦上可相知？\n始深虑，\n便无语，\n莫问闲愁都几许！\n <span class="tRight">—— 朝云暮雨-代码-小辣椒 </span>`,
`<span><strong>【天仙子】一卷春声春恨长</strong><br>（三）</strong></span><br><br>\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-7-6 23:58

@樵歌 照描了一个{:4_182:}

朝云暮雨 发表于 2024-7-6 23:59

天仙子◆一卷春声春恨长
/朝云暮雨

<一>
料峭深闺春恨长，不见人儿罢晚妆。
欲斟离绪共觥觞，邀小月，到檀床，怎寄相思入钱塘？

﹤二>
万井落花随细雨，廿四风云笼烟树。
琵琶弦上可相知？始深虑，便无语，莫问闲愁都几许！

<三>
极目烟舟飘去远，细雨游丝轻弄晚。
自闩门户锁春深。澄泥砚，桃花扇，玉漏箫声吹不断。

梦江南 发表于 2024-7-7 08:08

欣赏老师漂亮的音画，早上好！

小星世龙 发表于 2024-7-7 08:15

好文采，意境尤美，景情融契，笔法灵动，韵味深长！

小星世龙 发表于 2024-7-7 08:16

构思别致，描摹生动，文字曼妙，韵味悠长，笔法娴熟，文辞优雅，点赞精彩！

小星世龙 发表于 2024-7-7 08:17

制作精细、精美、精彩！{:4_204:}{:4_204:}

红影 发表于 2024-7-7 10:06

这是小辣椒的代码呢，做得漂亮，欣赏云儿好帖{:4_199:}

红影 发表于 2024-7-7 10:09

朝云暮雨 发表于 2024-7-6 23:59
天仙子◆一卷春声春恨长
/朝云暮雨



非常婉约的词句，将闺中春愁写得很细腻传神，好词{:4_187:}

樵歌 发表于 2024-7-7 11:08

朝云暮雨 发表于 2024-7-6 23:58
@樵歌 照描了一个

厉害呵，小辣椒给我做好后，我照套出都了问题，这你一下子就弄好了。{:4_187:}

樵歌 发表于 2024-7-7 11:10

底图选得极好，曲子也配得相当不错，看来以前是做过音画的吧。{:4_172:}

樵歌 发表于 2024-7-7 11:30

乍下面只循环第一首呵？我去我那帖子看看是乍回事。。。。

樵歌 发表于 2024-7-7 13:22

整了好久，照那长相思帖子一一对照，改了几个地方，但下面还是不循环。{:4_198:}

樵歌 发表于 2024-7-7 13:24

词意婉约，意境隽永，思绪绵密。端的是好词！

朝云暮雨 发表于 2024-7-7 14:02

梦江南 发表于 2024-7-7 08:08
欣赏老师漂亮的音画，早上好！

谢谢问好友友。瞎玩一通。{:4_173:}

朝云暮雨 发表于 2024-7-7 14:03

小星世龙 发表于 2024-7-7 08:16
构思别致，描摹生动，文字曼妙，韵味悠长，笔法娴熟，文辞优雅，点赞精彩！

小星辛苦了，午好{:4_191:}

朝云暮雨 发表于 2024-7-7 14:03

小星世龙 发表于 2024-7-7 08:17
制作精细、精美、精彩！

乱七八糟的乱玩的。哈哈

朝云暮雨 发表于 2024-7-7 14:04

红影 发表于 2024-7-7 10:06
这是小辣椒的代码呢，做得漂亮，欣赏云儿好帖

很喜欢那文字的特效。{:4_187:}

朝云暮雨 发表于 2024-7-7 14:04

红影 发表于 2024-7-7 10:09
非常婉约的词句，将闺中春愁写得很细腻传神，好词

没发觉，是之前闲时写的了。{:4_173:}

朝云暮雨 发表于 2024-7-7 14:05

樵歌 发表于 2024-7-7 11:08
厉害呵，小辣椒给我做好后，我照套出都了问题，这你一下子就弄好了。

换一下底图和文字，这个简单。哈哈

查看完整版本: 天仙子◆一卷春声春恨长 <三>