论坛 › 音乐沙龙 › 【采桑子】 无题 三首 --- 文字 /樵歌

小辣椒 发表于 2024-7-2 22:15

【采桑子】 无题 三首 --- 文字 /樵歌

<style>
        #papa { --width: 1273px; margin: 120px 0 20px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 692px; background: url('https://wj.zp68.com/lxx/yunhua/2024/07/01/G2F.gif') no-repeat center/cover; box-shadow: 3px 3px 8px #666; user-select: none; z-index: 1; position: relative; }       
        #txtbox { position: absolute; right: 50px;top: 150px; width: 500px; 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/30px sans-serif; color: DarkGreen; 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: 300px; border: 0px solid; left:400px; top:510px; width: var(--w); overflow: hidden;}
.wz div { word-break: keep-all; white-space: nowrap; font-family: '微软雅黑','微软雅黑'; font-size: 24px; 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></span><br><br>\n 晓来突醒啼莺里，\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镇日惺忪醉一场。\n <span class="tRight">—— 樵歌 </span>`,
        `<span><strong>【采桑子】（三）</strong></span><br><br>\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-7-2 22:18

@樵歌
樵哥哥，这个我本来用的黑颜色的字体，感觉画面太黑了，又用了緑的颜色，喜欢什么颜色你就自己修改，我告诉你方法就可以了

小辣椒 发表于 2024-7-2 22:22

我哭。。。。刚才想上来发帖，在电脑前准备喝中药，结果不小心碰到杯子，倒翻了，整个电脑桌上键盘上，最心疼的是我的迷你主机，刚才擦是擦了，现在发了帖，准备电吹风再去吹一下，马上准备下，看见上面有60个回帖，只能对不起了，我得下了。。。。。。

红影 发表于 2024-7-2 22:52

又是一个文字模版，还是竖排的。师兄快来收礼{:4_187:}

红影 发表于 2024-7-2 22:53

这动图有意思，有那么多练剑的人呢，还有飘飞的大雁，很是灵动。
欣赏亲爱的好帖{:4_199:}

冬天的雨 发表于 2024-7-3 07:47

小辣椒 发表于 2024-7-2 22:22
我哭。。。。刚才想上来发帖，在电脑前准备喝中药，结果不小心碰到杯子，倒翻了，整个电脑桌上键盘上，最心 ...

哭，没有用，重新买一台{:4_170:}

冬天的雨 发表于 2024-7-3 07:51

小辣椒{:4_197:}{:4_185:}

冬天的雨 发表于 2024-7-3 07:53

老首长的字特别有水平，无论现代，古韵，都是上佳的{:4_178:}{:4_178:}

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

本帖最后由 梦江南 于 2024-7-3 08:20 编辑

您辛苦了，一边吃中药一边发帖，好感动！保重哦！{:4_187:}

梦油 发表于 2024-7-3 09:24

小辣椒和樵歌的绝妙配合，造就了一幅精美的作品。

梦油 发表于 2024-7-3 09:28

小辣椒 发表于 2024-7-2 22:22
我哭。。。。刚才想上来发帖，在电脑前准备喝中药，结果不小心碰到杯子，倒翻了，整个电脑桌上键盘上，最心 ...

擦干眼泪，别哭。{:4_184:}
电脑、键盘和迷你主机一会儿就干。

樵歌 发表于 2024-7-3 10:21

小辣椒 发表于 2024-7-2 22:18
@樵歌
樵哥哥，这个我本来用的黑颜色的字体，感觉画面太黑了，又用了緑的颜色，喜欢什么颜色你就自己修改 ...

好好，特别喜欢的一幅水墨丹青，虽在山中中修炼，但心系红尘。字体颜色、画面安排，修炼的小动图，播放器，和音乐，与文字十分契合。用心了，樵哥哥感动中{:4_185:}

樵歌 发表于 2024-7-3 10:24

小辣椒 发表于 2024-7-2 22:22
我哭。。。。刚才想上来发帖，在电脑前准备喝中药，结果不小心碰到杯子，倒翻了，整个电脑桌上键盘上，最心 ...

迷你主机是个啥？坏了没，要是坏了，樵哥哥给你再买一个{:4_197:}

樵歌 发表于 2024-7-3 10:26

樵哥哥要分秒必争滴修炼了，赶紧的返老还童，修炼成仙，好多多提携你们一起飞升{:4_170:}

樵歌 发表于 2024-7-3 10:27

红影 发表于 2024-7-2 22:52
又是一个文字模版，还是竖排的。师兄快来收礼

来了，一来就喜欢上了{:4_173:}

樵歌 发表于 2024-7-3 10:29

梦油 发表于 2024-7-3 09:24
小辣椒和樵歌的绝妙配合，造就了一幅精美的作品。

我那字很干巴，这一包装，少了些丑陋了。

樵歌 发表于 2024-7-3 10:30

红影 发表于 2024-7-2 22:53
这动图有意思，有那么多练剑的人呢，还有飘飞的大雁，很是灵动。
欣赏亲爱的好帖

是师兄的分身在里面修炼{:4_170:}

樵歌 发表于 2024-7-3 10:31

冬天的雨 发表于 2024-7-3 07:47
哭，没有用，重新买一台

是平板吗？

樵歌 发表于 2024-7-3 10:33

冬天的雨 发表于 2024-7-3 07:53
老首长的字特别有水平，无论现代，古韵，都是上佳的

是小辣椒装饰有限公司，包装出来的，瞧瞧那些明星，都是要包装滴。{:4_170:}

梦油 发表于 2024-7-3 11:02

樵歌 发表于 2024-7-3 10:29
我那字很干巴，这一包装，少了些丑陋了。

自谦了，自谦了。

查看完整版本: 【采桑子】 无题 三首 --- 文字 /樵歌