樵歌 发表于 2025-3-25 20:33

【山茶花】 TO小九 生日快乐

<style>
        #papa { --width: 1275px; margin: 120px 0 20px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 713px; background: url('https://cccimg.com/view.php/6010fcb48da7189bde857527a20f2e61.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: 700px; 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 26px/36px sans-serif; \9ED1\4F53;color: Black; txtAr-shadow: 1px 1px 1px gray; animation: 2s forwards; }
        #player { position: absolute; width: 100px;right: 50%;bottom: 40px; 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:600px; top:510px; width: var(--w); overflow: hidden;}
.wz div { word-break: keep-all; white-space: nowrap; font-family: '\9ED1\4F53'; font-size: 22px; color: Black; 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/qg01/2025/今夜草原有雨(DJ女版)_巴阳.m4a" autoplay loop></audio>

        <div id="txtbox"></div>
        <img id="player" alt="" src="https://cccimg.com/view.php/4609b38b6f0f5a23a8e8c9f89df414a3.png " title"播放/暂停" />

<div class="wz"><div>【山茶花】 TO小九-文//樵歌-图//小辣椒</div></div>
</div>
</div>
<script>
var txtAr = [
        `<span><strong>一</strong></span><br><br>\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   <span class="tRight">—— 樵歌 </span>`,
        `<span><strong>三</strong></span><br><br>\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-3-25 20:34

@小九

樵歌 发表于 2025-3-25 20:34

《山茶花》
朝天门的汽笛声披着满天星子,一遍遍的把去年寄出的信笺大声朗诵聆听的山茶花在春分后的某个芳晨把自己开得百媚千红

花儿洇染整个山城春风从码头开始数数一瓣落上洪崖洞的灯笼一瓣飘进磁器口的茶碗 最珍贵的那瓣把它印上你的指纹邮戳作为一生收藏的邮票


思念的索道在薄雾中迷茫整座山城都在花瓣上摇晃
注:诗中朝天门、红崖洞、磁器口等均为山城重庆某著名景点。

樵歌 发表于 2025-3-25 20:34


本来是另一首歌的,但放不出来,只好临时找了首自己翻唱的“今夜草原原雨”来凑数了{:4_173:}


今夜草原有雨
作词:宋青松
作曲:朝乐蒙
原唱:王喆


今夜的草原有雨
我就在毡房里等你
让那些牛羊早些归圈
炊烟是我约你来的消息
今夜的月光回避
我就在毡房里等你
把所有美丽全都点亮
窗口有我要敞开的秘密
今夜的草原有雨
马头琴一声声诉说情谊
我们就这样相依相偎
让我的心暧到你的心里
今夜的月光回避
我就在毡房里等你
把所有美丽全都点亮
窗口有我要敞开的秘密
今夜的草原有雨
马头琴一声声诉说情谊
我们就这样相依相偎
让我的心暧到你的心里
今夜的草原有雨
马奶酒一杯杯壮着豪气
我们就从此相亲相爱
让你的梦住进我的梦里
让你的梦住进我的梦里

梦油 发表于 2025-3-25 21:00

伴随着樵歌朋友这优美的歌声,祝福小九生日快乐!

      https://pic1.imgdb.cn/item/6690ecc5d9c307b7e97a2121.gif

小辣椒 发表于 2025-3-25 21:29

樵歌 发表于 2025-3-25 20:34
本来是另一首歌的,但放不出来,只好临时找了首自己翻唱的“今夜草原原雨”来凑数了




樵哥哥那首歌曲不能出来

小辣椒 发表于 2025-3-25 21:37

借樵哥哥精美的诗词,和好声音,祝福小九生日快乐!永远幸福!{:4_204:}{:4_204:}{:4_204:}

樵歌 发表于 2025-3-25 21:37

小辣椒 发表于 2025-3-25 21:29
樵哥哥那首歌曲不能出来

这首歌出来了呀{:4_189:}

樵歌 发表于 2025-3-25 21:39

梦油 发表于 2025-3-25 21:00
伴随着樵歌朋友这优美的歌声,祝福小九生日快乐!

这几天声音有点哑火了{:4_189:}

红影 发表于 2025-3-25 22:51

师兄用诗歌还有歌声为九儿贺生,这份礼物太厚重了。制作精美,歌声好听。
欣赏师兄好帖,祝九儿生日快乐{:4_199:}

樵歌 发表于 2025-3-26 08:14

小辣椒 发表于 2025-3-25 21:37
借樵哥哥精美的诗词,和好声音,祝福小九生日快乐!永远幸福!

根据小九的贵府写了几句哈。{:4_189:}

樵歌 发表于 2025-3-26 08:17

红影 发表于 2025-3-25 22:51
师兄用诗歌还有歌声为九儿贺生,这份礼物太厚重了。制作精美,歌声好听。
欣赏师兄好帖,祝九儿生日快乐{: ...

看到你催生了,以为很快就生了,{:4_189:}所以匆匆忙忙写了几句,本来是另一首的,放不出来,只好换首草原歌曲了,和文字不是太匹配,只好将就了{:4_173:}

庶民 发表于 2025-3-26 08:29

欣赏您的作品,祝福生日。

红影 发表于 2025-3-26 09:43

樵歌 发表于 2025-3-26 08:17
看到你催生了,以为很快就生了,所以匆匆忙忙写了几句,本来是另一首的,放不出来,只好换首草 ...

很不错的,更显得是两种形式的原创呢,诗歌的原创和歌声的原创啊{:4_173:}

红影 发表于 2025-3-26 09:44

还看到右边有个小毛驴驮着满满的礼物,前面的人走得大步流星的,这送礼的意图太急切了{:4_173:}

小九 发表于 2025-3-26 09:52

小辣椒 发表于 2025-3-25 21:37
借樵哥哥精美的诗词,和好声音,祝福小九生日快乐!永远幸福!

谢谢辣椒,帖子很美,制作精美,很喜欢{:4_183:}

小九 发表于 2025-3-26 09:53

樵歌 发表于 2025-3-26 08:14
根据小九的贵府写了几句哈。

写得好,很有特色,贵府的特点都突显出来{:4_189:}{:4_180:}

小九 发表于 2025-3-26 09:54

红影 发表于 2025-3-26 09:44
还看到右边有个小毛驴驮着满满的礼物,前面的人走得大步流星的,这送礼的意图太急切了

这个细节也被影子发现了{:4_189:}{:4_187:}

小九 发表于 2025-3-26 09:55

红影 发表于 2025-3-26 09:43
很不错的,更显得是两种形式的原创呢,诗歌的原创和歌声的原创啊

诗词和歌还有画面很融合,非常好,谢谢樵歌和辣椒的精美礼物{:4_183:}{:4_176:}{:4_204:}

小九 发表于 2025-3-26 09:55

庶民 发表于 2025-3-26 08:29
欣赏您的作品,祝福生日。

谢谢庶民的祝福,同乐{:4_187:}
页: [1] 2 3
查看完整版本: 【山茶花】 TO小九 生日快乐