樵歌 发表于 2024-9-14 06:55

【一剪梅】TO 绿叶清舟

<style>
        #papa { --width: 1269px; margin: 120px 0 20px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 764px; background: url('https://xlaj.cn/assets/file/zp/20240630174320.gif ') no-repeat center/cover; box-shadow: 3px 3px 8px #666; user-select: none; z-index: 1; position: relative; }
       
        #txtbox { position: absolute; right: 460px;top: 90px; width: 300px; min-height: 100px; padding: 10px 20px; box-sizing: border-box; overflow: hidden; }
        #txtbox p { position: relative; margin: 4px 0; padding: 0; font: normal 20px/24px sans-serif; color: Teal; txtAr-shadow: 1px 1px 1px gray; animation: 2s forwards; }
        #player { position: absolute; width: 100px;   left: 80px; bottom: 70px; 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: 400px; border: 0px solid; left:400px; top:560px; width: var(--w); overflow: hidden;}
.wz div { word-break: keep-all; white-space: nowrap; font-family: '微软雅黑','微软雅黑'; font-size: 18px; color: Teal; 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://file.uhsea.com/2406/bac62f056ef2bbf6fb217c90e6278e203C.mp3" autoplay loop></audio>

        <div id="txtbox"></div>
        <img id="player" alt="" src="https://xlaj.cn/assets/file/zp/20240630174238.png" title"播放/暂停" />

<div class="wz"><div>绿叶清舟翠可招。桨声憩时，凉月飘摇。钟深更远下姑苏，白露星稀，渔火枫桥。
叶渐黄时最寂寥。忆来怀往，漫浪江潮。幽思遥睇雁低回，寄语秋空，调弄长箫。
清影重重红袖招。月移花动，香袅云摇。霓裳羽曲戴银辉，载酒乌篷，倚醉蓝桥。
舟泊秋江星阔寥。一腔情素，凝作愁潮。江南弹唱入云天，烟火红尘，几处笙箫。 --- 文字 樵歌/音画/小辣椒</div></div>
</div>

</div>

<script>
var txtAr = [
        `<span class="tMid"><strong>【一剪梅】 </strong><br>（其一）</span><br><br>\n绿叶清舟翠可招\n桨声憩时\n凉月飘摇\n钟深更远下姑苏\n白露星稀\n渔火枫桥\n
叶渐黄时最寂寥\n忆来怀往\n漫浪江潮\n幽思遥睇雁低回\n寄语秋空\n调弄长箫\n<span class="tRight">——文字/樵歌//音画/小辣椒</span>`,
`<span class="tMid"><strong>【一剪梅】 </strong><br>（其二）</span><br><br>\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-9-14 06:56

【一剪梅】TO 绿叶清舟（其一）绿叶清舟翠可招。桨声憩时，凉月飘摇。钟深更远下姑苏，白露星稀，渔火枫桥。叶渐黄时最寂寥。忆来怀往，漫浪江潮。幽思遥睇雁低回，寄语秋空，调弄长箫。（其二）清影重重红袖招。月移花动，香袅云摇。霓裳羽曲戴银辉，载酒乌篷，倚醉蓝桥。舟泊秋江星阔寥。一腔情素，凝作愁潮。江南弹唱入云天，烟火红尘，几处笙箫。

樵歌 发表于 2024-9-14 06:56

@绿叶清舟

醉美水芙蓉 发表于 2024-9-14 07:07

醉美水芙蓉 发表于 2024-9-14 07:08

起个网名好难 发表于 2024-9-14 08:59

http://5b0988e595225.cdn.sohucs.com/images/20180609/f85bb2266e7e495d8a8203f3e12af903.gif

梦油 发表于 2024-9-14 09:05

樵歌 发表于 2024-9-14 06:56
【一剪梅】TO 绿叶清舟（其一）绿叶清舟翠可招。桨声憩时，凉月飘摇。钟深更远下姑苏，白露星稀，渔火枫桥 ...

樵歌朋友这高洁情怀、直抒心意的诗作使人拍案叫绝。
预祝樵歌朋友中秋节快乐！
预祝清舟朋友中秋节快乐！

梦江南 发表于 2024-9-14 10:04

漂亮啊！都好厉害！

疏星淡月 发表于 2024-9-14 13:25

浪漫江湖，这个岁数很难浪漫了{:4_174:}

红影 发表于 2024-9-14 15:02

为了这帖子格式，师兄连着填写两首《一剪梅》呢，而且还是嵌头的，真不容易。
欣赏师兄好词，欣赏师兄好制作{:4_199:}

红影 发表于 2024-9-14 15:06

才发现这两首还是步韵的，更不容易了。而且带着题图的意味。
这两首词真好。清舟收礼开心{:4_187:}

红影 发表于 2024-9-14 15:07

再看，感觉这个模版也特别好呢。@小辣椒 亲爱的辛苦了{:4_187:}

红影 发表于 2024-9-14 15:08

藏头的嵌字加步韵，必须给师兄点赞{:4_199:}

小辣椒 发表于 2024-9-14 15:09

红影 发表于 2024-9-14 15:07
再看，感觉这个模版也特别好呢。@小辣椒 亲爱的辛苦了

亲爱的，来了

小辣椒 发表于 2024-9-14 15:10

哇塞，樵哥哥现在是越来越厉害了，不但诗词写的美，编辑制作都是一流了{:4_199:}

小辣椒 发表于 2024-9-14 15:12

樵哥哥身体刚恢复就开始玩高精制作了，赞的！还是多休息哦{:4_179:}

小辣椒 发表于 2024-9-14 15:14

呼叫清舟@緑叶清舟

樵歌 发表于 2024-9-14 19:28

醉美水芙蓉 发表于 2024-9-14 07:07
樵歌好厉害！非常震撼的作品！

欢迎芙蓉美女来欣赏文字哈。代码音画，还是你们做得好！

樵歌 发表于 2024-9-14 19:29

醉美水芙蓉 发表于 2024-9-14 07:08
诗词写得精彩，还有暗语。清舟美女收礼开心！

谢谢谬赞了哈{:4_190:}

樵歌 发表于 2024-9-14 19:30

起个网名好难 发表于 2024-9-14 08:59


将就看哈。{:4_190:}
页: [1] 2 3
查看完整版本: 【一剪梅】TO 绿叶清舟