论坛 › 祝福礼堂 › 七律 贺新年

樵歌 发表于 2025-1-29 09:08

七律 贺新年

<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: 360px;top: 110px; 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 24px/30px 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:510px; width: var(--w); overflow: hidden;}
.wz div { word-break: keep-all; white-space: nowrap; font-family: '微软雅黑','微软雅黑'; font-size: 24px; 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://music.163.com/#/song?id=1993366921.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<span class="tRight">——文字/樵歌//音画/小辣椒</span>`,
`<span class="tMid"><strong>【七律】 </strong><br>（其二）</span><br><br>\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>

樵歌 发表于 2025-1-29 09:11

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1993366921&auto=1&height=66"></iframe>

樵歌 发表于 2025-1-29 09:15

恭祝花潮朋友们蛇年新春快乐！

樵歌 发表于 2025-1-29 09:17

注，用的中华通韵。

梦油 发表于 2025-1-29 09:22

樵歌 发表于 2025-1-29 09:11


谢谢樵歌   谢谢小辣椒
祝花潮朋友们春节快乐

庶民 发表于 2025-1-29 09:52

万事如意，新春快乐！

樵歌 发表于 2025-1-29 11:24

@小辣椒，里面本身的音乐不响，只好另外在楼下加的

樵歌 发表于 2025-1-29 11:25

@小辣椒

红影 发表于 2025-1-29 11:27

给师兄拜年了，祝福阖家欢乐，万事如意{:4_177:}

梦江南 发表于 2025-1-29 17:20

给樵歌老师拜年了！祝新春快乐，阖家幸福！

小辣椒 发表于 2025-1-29 23:19

樵歌 发表于 2025-1-29 09:15
恭祝花潮朋友们蛇年新春快乐！

瞧哥哥最近很辛苦哦，佳作连连{:4_178:}

小辣椒 发表于 2025-1-29 23:20

瞧哥哥新年快乐！万事如意，今天初一，拜年咯{:4_177:}

樵歌 发表于 2025-1-30 08:05

红影 发表于 2025-1-29 11:27
给师兄拜年了，祝福阖家欢乐，万事如意

师妹初二开心！{:4_190:}

樵歌 发表于 2025-1-30 08:05

梦江南 发表于 2025-1-29 17:20
给樵歌老师拜年了！祝新春快乐，阖家幸福！

问好，初二快乐！

樵歌 发表于 2025-1-30 08:06

小辣椒 发表于 2025-1-29 23:19
瞧哥哥最近很辛苦哦，佳作连连

初二快乐!{:4_179:}

樵歌 发表于 2025-1-30 08:07

小辣椒 发表于 2025-1-29 23:20
瞧哥哥新年快乐！万事如意，今天初一，拜年咯

初二开心哈。你还没说为何里面的音乐不响呢{:4_173:}

红影 发表于 2025-1-30 12:44

樵歌 发表于 2025-1-30 08:05
师妹初二开心！

师兄很厉害，这个律诗写得好{:4_199:}

樵歌 发表于 2025-1-30 12:52

红影 发表于 2025-1-30 12:44
师兄很厉害，这个律诗写得好

有点口水化了，师妹知道的，我最怕凑对子了，只好用些常用的词汇来凑合{:4_189:}反正就是图喜庆

红影 发表于 2025-1-30 13:14

樵歌 发表于 2025-1-30 12:52
有点口水化了，师妹知道的，我最怕凑对子了，只好用些常用的词汇来凑合反正就是图喜庆

很好啊，师兄很有心，这个很赞的{:4_187:}

小辣椒 发表于 2025-1-30 20:27

樵歌 发表于 2025-1-30 08:06
初二快乐!

瞧哥哥每天快乐！{:4_179:}

查看完整版本: 七律 贺新年