论坛 › 古风雅韵 › 【满江红】八一抒怀

樵歌 发表于 2024-7-28 16:46

【满江红】八一抒怀

<style>
        #papa { --width: 1200px; margin: 130px 0 20px calc(50% - 681px); width: var(--width); height: 640px; background: url('https://pic.imgdb.cn/item/66a5a6e2d9c307b7e94b1389.jpg') no-repeat center/cover; box-shadow: 3px 3px 8px #666; user-select: none; z-index: 1; position: relative; }
        #txtbox { position: absolute; left: 420px; top: 80px; width: 300px; min-height: 160px; padding: 10px 20px; box-sizing: border-box; overflow: hidden; }
        #txtbox p { position: relative; margin: 4px 0; padding: 0; font: normal 22px/26px sans-serif; color: Teal; txtAr-shadow: 1px 1px 1px gray; animation: 2s forwards; }
        #player { position: absolute; width: 120px; right: 60px; bottom: 100px; cursor: pointer; animation: rot 6s linear infinite; }
        .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=1895402359" autoplay loop></audio>
        <div id="txtbox"></div>
        <img id="player" alt="" src="https://638183.freep.cn/638183/t23/btn/meihua_133482968750383750.png" 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<span class="tRight">——樵歌</span>`,
        `<span class="tMid"><strong>【满江红】</strong>（下阙）</span><br><br>\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-7-28 16:57

上阙中的——【唐】李白 没改啊，看得笑，李白怎么知道现代的事{:4_173:}

樵歌 发表于 2024-7-28 16:57

【满江红】八一抒怀热血军旗，扬浩宇、威严烈烈。忆往昔、南昌枪响，震惊环阙。万里长征豪气迈，八年抗战丹心热。再援朝、长剑斩妖顽，巡天伐。初心守，坚如铁。肩使命、何能歇。铸钢铁长城，雄姿英发。科技强军惊世界，昂扬斗志辉星月。望未来、一统国家圆，宏图叠。

红影 发表于 2024-7-28 16:57

一首豪迈热血的满江红，欣赏师兄好词，贺建军节快乐{:4_187:}

红影 发表于 2024-7-28 17:06

上阙写了我军英勇的过往，下阕写了心时代我军的辉煌的发展，还有对未来的展望。
借师兄好帖，向全体军人和退伍军人们致敬{:4_187:}

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

向伟大的中国人民解放军及退转军人和家属致以节日的问候！
                           祝樵歌朋友健康快乐！

                           https://image.xcar.com.cn/attachments/a/day_180716/2018071617_65dfa63334a1fe41e67eV378qvnGqc3c.gif

樵歌 发表于 2024-7-28 17:18

红影 发表于 2024-7-28 16:57
上阙中的——【唐】李白 没改啊，看得笑，李白怎么知道现代的事

昨天才从医院回家（陪护），匆匆凑个，好久没弄代码了，差点忘记了{:4_189:}

红影 发表于 2024-7-28 17:19

师兄可以把那个视频拿掉或者换个视频{:4_173:}

樵歌 发表于 2024-7-28 17:21

红影 发表于 2024-7-28 16:57
一首豪迈热血的满江红，欣赏师兄好词，贺建军节快乐

正好八一到了，不能忘记自己的曾经。必须凑几个字庆祝一下。

樵歌 发表于 2024-7-28 17:22

红影 发表于 2024-7-28 17:06
上阙写了我军英勇的过往，下阕写了心时代我军的辉煌的发展，还有对未来的展望。
借师兄好帖，向全体军人和 ...

每年这个时候，是俺们们的节日，得庆祝一下的。

樵歌 发表于 2024-7-28 17:23

梦油 发表于 2024-7-28 17:09
向伟大的中国人民解放军及退转军人和家属致以节日的问候！
                           祝樵歌朋友健康 ...

因事，约二十来天示来，问好梦老哥{:4_176:}

樵歌 发表于 2024-7-28 18:57

红影 发表于 2024-7-28 17:19
师兄可以把那个视频拿掉或者换个视频

不知道拿哪一个呵，我也不敢乱动。要不师妹成帮忙拿下吧。{:4_187:}

冬天的雨 发表于 2024-7-28 20:24

老首长节日快乐{:4_187:}

冬天的雨 发表于 2024-7-28 20:26

向老首长致敬，向革命老前辈精致{:4_178:}

红影 发表于 2024-7-28 20:39

樵歌 发表于 2024-7-28 18:57
不知道拿哪一个呵，我也不敢乱动。要不师妹成帮忙拿下吧。

已经拿掉了，只留了背景图，师兄看看{:4_173:}

红影 发表于 2024-7-28 20:40

樵歌 发表于 2024-7-28 17:22
每年这个时候，是俺们们的节日，得庆祝一下的。

这是必须的，很难忘的经历，很值得纪念的节日{:4_204:}

红影 发表于 2024-7-28 20:41

樵歌 发表于 2024-7-28 17:18
昨天才从医院回家（陪护），匆匆凑个，好久没弄代码了，差点忘记了

这首词很好，做成代码帖子更好了，给师兄点赞{:4_199:}

醉美水芙蓉 发表于 2024-7-28 21:33

醉美水芙蓉 发表于 2024-7-28 21:33

樵歌 发表于 2024-7-29 09:17

冬天的雨 发表于 2024-7-28 20:24
老首长节日快乐

小战友节日快乐{:4_183:}

查看完整版本: 【满江红】八一抒怀