樵歌 发表于 2025-1-27 08:02

转个轱辘庆贺东篱闲人生日

<style>
#papa { left: -252px;top:120px; width: 1100px; height: 618px; background: gray url('https://pic1.imgdb.cn/item/6796ca6ed0e0a243d4f82513.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=1974450136.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>

樵歌 发表于 2025-1-27 08:03

读法（中华通韵）三言：赋。咏东山，卧散仙，人叹慕，醉篱闲。四言：赋咏东山，山卧散仙。仙人叹慕，慕醉篱闲。五绝：闲赋咏东山，东山卧散仙。散仙人叹慕，叹慕醉篱闲。七绝：醉篱闲赋咏东山，赋咏东山卧散仙。山卧散仙人叹慕，仙人叹慕醉篱闲。

樵歌 发表于 2025-1-27 08:03

@东篱闲人

梦江南 发表于 2025-1-27 08:35

祝东篱老师生日快乐！




愤怒的葡萄 发表于 2025-1-27 09:53

祝东篱闲人生日快乐！~~~

樵歌 发表于 2025-1-27 13:12

愤怒的葡萄 发表于 2025-1-27 09:53
祝东篱闲人生日快乐！~~~

过大年了喝酒切了{:4_189:}

红影 发表于 2025-1-27 17:19

这个好，嵌字自然，意境非常飘逸，欣赏师兄好词，同贺东篱大哥生日快乐{:4_187:}{:4_177:}

庶民 发表于 2025-1-27 18:16

这个要技巧多多

小辣椒 发表于 2025-1-27 21:14

瞧哥哥漂亮的轱辘{:4_178:}

小辣椒 发表于 2025-1-27 21:15

借瞧哥哥美帖贺老头生日快乐@东篱闲人

樵歌 发表于 2025-1-28 08:25

红影 发表于 2025-1-27 17:19
这个好，嵌字自然，意境非常飘逸，欣赏师兄好词，同贺东篱大哥生日快乐

这四字都是平声，只好用通韵了{:4_189:}

樵歌 发表于 2025-1-28 08:26

庶民 发表于 2025-1-27 18:16
这个要技巧多多

用熟悉了{:4_189:}

樵歌 发表于 2025-1-28 08:27

小辣椒 发表于 2025-1-27 21:14
瞧哥哥漂亮的轱辘

图图不是太满意

庶民 发表于 2025-1-28 09:34

樵歌 发表于 2025-1-28 08:26
用熟悉了

厉害，羡慕。

红影 发表于 2025-1-28 11:57

樵歌 发表于 2025-1-28 08:25
这四字都是平声，只好用通韵了

是的，仄音的字更容易在轱辘里使用呢{:4_173:}

东篱闲人 发表于 2025-2-11 10:26

樵歌 发表于 2025-1-27 08:03
@东篱闲人

老樵用心了，感动的话就不说了。。。{:4_176:}

东篱闲人 发表于 2025-2-11 10:26

梦江南 发表于 2025-1-27 08:35
祝东篱老师生日快乐！

谢谢江南。。。{:4_176:}

东篱闲人 发表于 2025-2-11 10:27

愤怒的葡萄 发表于 2025-1-27 09:53
祝东篱闲人生日快乐！~~~

谢谢葡萄。。。。{:4_176:}

东篱闲人 发表于 2025-2-11 10:27

小辣椒 发表于 2025-1-27 21:15
借瞧哥哥美帖贺老头生日快乐@东篱闲人

{:4_176:}

东篱闲人 发表于 2025-2-11 10:27

红影 发表于 2025-1-27 17:19
这个好，嵌字自然，意境非常飘逸，欣赏师兄好词，同贺东篱大哥生日快乐

{:4_176:}
页: [1] 2
查看完整版本: 转个轱辘庆贺东篱闲人生日