论坛 › 祝福礼堂 › 轱辘贺女神节

樵歌 发表于 2024-3-6 17:13

轱辘贺女神节

<style>
#papa { left: -252px;top:120px; width: 1100px; height: 618px; background: gray url('https://pic.imgdb.cn/item/64b360c81ddac507cc4d556f.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=396351.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-3-6 17:14

读法：三言：月，照佳辰，集女神，清气爽，喜逢春。
四言：月照佳辰，辰集女神。神清气爽，爽喜逢春。
五绝：春月照佳辰，佳辰集女神。女神清气爽，气爽喜逢春。
七绝：喜逢春月照佳辰。月照佳辰集女神。辰集女神清气爽，神清气爽喜逢春。

樵歌 发表于 2024-3-6 17:16

祝福花潮女神们节日快乐！

小文 发表于 2024-3-6 19:00

借师叔吉言，恭祝花潮女神们节日快乐！{:4_204:}{:4_204:}{:4_204:}

梦油 发表于 2024-3-6 20:01

借樵歌朋友美帖祝花潮女神节日快乐！

红影 发表于 2024-3-6 20:30

师兄把春天的节日和女神节几个字都嵌进去了，十分得体和漂亮的轱辘。
欣赏师兄好帖，同祝女神们节日快乐{:4_187:}

冬天的雨 发表于 2024-3-6 21:11

老首长的轱辘高大上的{:4_178:}

冬天的雨 发表于 2024-3-6 21:12

借美帖祝福论坛的美女们节日快乐！

醉美水芙蓉 发表于 2024-3-6 22:48

樵歌 发表于 2024-3-7 07:45

小文 发表于 2024-3-6 19:00
借师叔吉言，恭祝花潮女神们节日快乐！

好的，和小文一起祝福她们开心快乐！

樵歌 发表于 2024-3-7 07:45

梦油 发表于 2024-3-6 20:01
借樵歌朋友美帖祝花潮女神节日快乐！

哈，一起来祝福！{:4_176:}

樵歌 发表于 2024-3-7 07:47

红影 发表于 2024-3-6 20:30
师兄把春天的节日和女神节几个字都嵌进去了，十分得体和漂亮的轱辘。
欣赏师兄好帖，同祝女神们节日快乐{: ...

师兄一时找不到啥牌子来写祝福贴，就用熟悉的轱辘了{:4_173:}
祝师妹女神世开心快乐玩一天吧。看你最近太累了{:4_197:}

樵歌 发表于 2024-3-7 07:49

冬天的雨 发表于 2024-3-6 21:11
老首长的轱辘高大上的

小新兵&&，以后不用手掌来手掌去了，别把你小手拍红了{:4_349:}

樵歌 发表于 2024-3-7 07:50

冬天的雨 发表于 2024-3-6 21:12
借美帖祝福论坛的美女们节日快乐！

那是应该的哈，你也跟着开心呗{:4_176:}

樵歌 发表于 2024-3-7 07:51

醉美水芙蓉 发表于 2024-3-6 22:48
樵歌厉害了！谢谢分享！

芙蓉美女开心快乐！{:4_187:}

三月的阳光 发表于 2024-3-7 08:24

借美帖祝福论坛的姐妹们女神节快乐！~~{:4_187:}

三月的阳光 发表于 2024-3-7 08:25

同祝樵歌师兄开心快乐~~{:4_176:}

流水光阴 发表于 2024-3-7 11:41

{:4_199:}{:4_199:}{:4_199:}

这个有点高端制作的

流水光阴 发表于 2024-3-7 11:41

借美贺帖祝美女们节日快乐！

小辣椒 发表于 2024-3-7 12:36

樵歌 发表于 2024-3-6 17:16
祝福花潮女神们节日快乐！

感谢樵哥哥的精美贺帖{:4_178:}

查看完整版本: 轱辘贺女神节