樵歌 发表于 2024-5-31 14:15

轱辘贺顾念生日

<style>
#papa { left: -252px;top:120px; width: 1100px; height: 618px; background: gray url('https://pic.imgdb.cn/item/665968c6d9c307b7e97bb6d7.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://music.163.com/song/media/outer/url?id=303421.mp3';
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>


樵歌 发表于 2024-5-31 14:16

@顾念 @素衣

樵歌 发表于 2024-5-31 14:17

读法：
三言：雪，满诗囊，盛锦章，回顾念，素衣香。
四言：雪满诗囊，囊盛锦章。章回顾念，念素衣香。
五绝：香雪满诗囊，诗囊盛锦章。锦章回顾念，顾念素衣香。
七绝：素衣香雪满诗囊，雪满诗囊盛锦章。囊盛锦章回顾念，章回顾念素衣香。

樵歌 发表于 2024-5-31 14:18

祝顾念生日快乐，素衣快乐！{:4_191:}{:4_176:}

素衣 发表于 2024-5-31 14:52

好帅的轱辘体，没想到我也跟着寿星一起有礼收，谢谢樵哥{:4_204:}

梦油 发表于 2024-5-31 15:04

借樵歌朋友的精美诗作，祝福顾念生日快乐！

小辣椒 发表于 2024-5-31 17:50

樵哥哥特别厉害，高大上的贺礼{:4_178:}

小辣椒 发表于 2024-5-31 17:51

借樵哥哥的精美礼物 祝顾念生日快乐，年轻永远!

樵歌 发表于 2024-5-31 17:53

素衣 发表于 2024-5-31 14:52
好帅的轱辘体，没想到我也跟着寿星一起有礼收，谢谢樵哥

开心在一起，快乐不离分哈。{:4_173:}

樵歌 发表于 2024-5-31 17:54

梦油 发表于 2024-5-31 15:04
借樵歌朋友的精美诗作，祝福顾念生日快乐！

借顾念友友生日，大家一起开心。

樵歌 发表于 2024-5-31 17:56

小辣椒 发表于 2024-5-31 17:50
樵哥哥特别厉害，高大上的贺礼

又来吹樵哥哥了。知道你樵哥哥刚好点，怕风么。{:4_189:}

樵歌 发表于 2024-5-31 17:57

小辣椒 发表于 2024-5-31 17:51
借樵哥哥的精美礼物 祝顾念生日快乐，年轻永远!

刚才好借小辣椒音乐开心了一回呢{:4_173:}

红影 发表于 2024-5-31 19:01

这个嵌了两个人的名字，还这么流畅典雅，师兄厉害了{:4_199:}

红影 发表于 2024-5-31 19:02

画面和音乐也好。这个帖子太棒了。
借师兄好帖，同祝顾念生日快乐{:4_187:}

小辣椒 发表于 2024-5-31 20:51

樵歌 发表于 2024-5-31 17:56
又来吹樵哥哥了。知道你樵哥哥刚好点，怕风么。
樵哥哥这个礼物确实高大上的，没有夸张的{:4_173:}
音乐也是配的特别好

樵歌 发表于 2024-5-31 20:56

红影 发表于 2024-5-31 19:01
这个嵌了两个人的名字，还这么流畅典雅，师兄厉害了

主要是这俩名字又雅又有韵味。

樵歌 发表于 2024-5-31 21:00

红影 发表于 2024-5-31 19:02
画面和音乐也好。这个帖子太棒了。
借师兄好帖，同祝顾念生日快乐

我花钱钱下载了个摄图网，这下找图可方便了{:4_173:}

小九 发表于 2024-5-31 21:39

这个礼物非常高大尚，顾念再转几个轱辘会是啥样啊{:4_189:}

和樵歌一起再贺顾念生日快乐{:4_191:}{:4_176:}

小文 发表于 2024-5-31 23:28

刚看到，太喜欢了。我得好好学习师叔大作！问好！{:4_191:}

梦油 发表于 2024-6-1 10:20

樵歌 发表于 2024-5-31 17:54
借顾念友友生日，大家一起开心。

樵歌朋友注意身体，别累着。
页: [1] 2 3
查看完整版本: 轱辘贺顾念生日