论坛 › 祝福礼堂 › 给菲儿转个轱辘唱首歌

樵歌 发表于 2025-4-2 15:44

给菲儿转个轱辘唱首歌

<style>
#papa { left: -252px;top:120px; width: 1100px; height: 738px; background: gray url('https://pic1.imgdb.cn/item/67ece6570ba3d5a1d7ea0872.jpg')
no-repeat center/cover; box-shadow: 4px 4px 24px #000; position: relative; }
#mama { position: absolute; left: 100px; top: calc(50% - 140px); display: grid; place-items: center; width: 360px; height: 360px; cursor: pointer; }
#tit { position: absolute; left: 26px; top: 46px; font: bold 26px / 26px sans-serif; color: #4D0CAF; text-shadow: 1px 1px 2px rgba(0,0,0,.8); }
.txt { position: absolute; width: 60px; height: 60px; font: bold 40px / 60px sans-serif; text-align: center; text-shadow: 2px 2px 4px rgba(0,0,0,.4); border-radius: 50%; color: snow; }
</style>

<div id="papa">
        <span id="tit">回文轱辘送菲儿 </span>
        <div id="mama"><span id="sMsg" class="txt">1</span></div>
      <div style="position: absolute; left:560px; top: 250px; width:451px;">
   <img alt="" src="https://pic.imgdb.cn/item/62479cbe27f86abb2adbb9bd.gif"/></div>
</div><br><br><br><br><br><br>

<script>
let idx = 0, step = 0;
let strAr = '雪蕊堆儿嬉笑觅芳菲遇杏花飞'.split(''), spans = [],
        sentences = [
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
                ,
        ];
let aud = new Audio();
aud.src = 'https://wj.zp68.com/qg01/2025/草原恋_巴阳.m4a';
aud.loop = true;
aud.autoplay = true;

let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;

for(let x in strAr) {
        let ele = document.createElement('span');
        ele.className = 'txt';
        ele.innerText = strAr;
        ele.style.transform = `rotate(${x*27.6}deg) translateY(180px) rotate(${-x*27.6}deg)`;
        mama.appendChild(ele);
        spans.push(ele);
}

txtColor()
txtCircle();

mama.onclick = () => aud.paused ? aud.play() : aud.pause();

function txtColor() {
        for(let y of spans) {
                y.style.color = 'snow';
                y.style.border = 'none';
        }
        for(let x of sentences) spans.style.color = `rgb(${num(0,255)},${num(0,255)},${num(0,255)})`;
        sMsg.innerText = idx + 1;
}

function txtCircle() {
        let x = sentences;
        spans.style.border = '1px solid purple';
        step ++;
        if(step > sentences.length - 1) {
                step = 0;
                idx ++;
                if(idx > sentences.length - 1) idx = 0;
                txtColor();
        }
        setTimeout(txtCircle, 1500);
}
</script>

樵歌 发表于 2025-4-2 15:45

@菲儿

樵歌 发表于 2025-4-2 15:45

读法：
三言：赏。杏花飞，雪蕊堆，儿好看，觅芳菲。
四言：赏杏花飞，飞雪蕊堆。堆儿好看，看觅芳菲。
五绝：菲赏杏花飞，花飞雪蕊堆。蕊堆儿好看，好看觅芳菲。
七绝：觅芳菲赏杏花飞，赏杏花飞雪蕊堆。飞雪蕊堆儿好看，堆儿好看觅芳菲。

樵歌 发表于 2025-4-2 15:53

这几天嗓子有点哑火了，鼻子在发炎，没好全。{:4_189:}没唱好。{:4_201:}

红影 发表于 2025-4-2 17:37

樵歌 发表于 2025-4-2 15:45
读法：
三言：赏。杏花飞，雪蕊堆，儿好看，觅芳菲。
四言：赏杏花飞，飞雪蕊堆。堆儿好看，看觅芳菲。 ...

这个儿字组词特别不易呢，被师兄组成了蕊堆儿，倒也很不错呢。
嵌字无痕，欣赏师兄好轱辘诗{:4_199:}

红影 发表于 2025-4-2 17:38

除了有轱辘诗相赠，还有翻唱相赠，师兄这份礼物真厚重，菲儿收礼开心{:4_187:}

红影 发表于 2025-4-2 17:39

樵歌 发表于 2025-4-2 15:53
这几天嗓子有点哑火了，鼻子在发炎，没好全。没唱好。

很好听呢，师兄学习过的，声音很放得开，给师兄点赞{:4_199:}

冬天的雨 发表于 2025-4-2 20:28

欣赏老首长高大上的精美制作{:4_178:}

冬天的雨 发表于 2025-4-2 20:30

现在背景图片都选的和诗词很相配了，送美女就暖色系了{:4_170:}

冬天的雨 发表于 2025-4-2 20:32

樵歌 发表于 2025-4-2 15:53
这几天嗓子有点哑火了，鼻子在发炎，没好全。没唱好。

翻唱应该还是不错的，只是歌曲名称是？冬雨歌盲一个{:4_196:}

冬天的雨 发表于 2025-4-2 20:32

菲儿收礼开心@菲儿

梦油 发表于 2025-4-2 22:03

拍案叫绝的好作品！{:5_116:}

小九 发表于 2025-4-3 11:55

这个帖子技术含量高，看着有点晕，图片很漂亮，菲儿收礼开心{:4_187:}{:4_190:}

清茶煮雪 发表于 2025-4-3 15:07

冬天的雨 发表于 2025-4-2 20:32
菲儿收礼开心@菲儿

谢谢帅哥提醒{:4_190:}才看见礼物{:4_205:}先慢慢欣赏一会~

清茶煮雪 发表于 2025-4-3 15:09

樵歌 发表于 2025-4-2 15:45
@菲儿

来了来了，谢谢焦哥老师好礼{:4_180:}先慢慢欣赏一会~

清茶煮雪 发表于 2025-4-3 15:16

本帖最后由 菲儿 于 2025-4-3 15:58 编辑

樵歌 发表于 2025-4-2 15:53
这几天嗓子有点哑火了，鼻子在发炎，没好全。没唱好。
声音挺好听的，浑厚富有磁性，第一次听，让人陶醉呢{:4_203:}老乡啊你咋这么优秀呢{:4_199:}真的非常好听，嗓音很具感染力，听着歌曲让人仿佛进入美丽又广阔的世界……真的太美了！

清茶煮雪 发表于 2025-4-3 15:19

本帖最后由 菲儿 于 2025-4-3 15:22 编辑

有轱辘诗，还有翻唱，樵歌老师这份礼物厚重，抱歉收礼来迟！菲儿很感动，也很惊喜！{:4_187:}谢谢老乡的友谊和礼物，菲儿珍惜并珍藏。

清茶煮雪 发表于 2025-4-3 15:24

小九 发表于 2025-4-3 11:55
这个帖子技术含量高，看着有点晕，图片很漂亮，菲儿收礼开心

谢谢九儿{:4_204:}，很荣幸收到樵歌老师的礼物，嗯，开心呢！

清茶煮雪 发表于 2025-4-3 15:25

冬天的雨 发表于 2025-4-2 20:32
翻唱应该还是不错的，只是歌曲名称是？冬雨歌盲一个

这首歌曲叫冬雨呀？谢谢友友{:4_190:}

清茶煮雪 发表于 2025-4-3 15:25

梦油 发表于 2025-4-2 22:03
拍案叫绝的好作品！

谢谢老师！{:4_190:}

查看完整版本: 给菲儿转个轱辘唱首歌