论坛 › 祝福礼堂 › 【轱辘诗】- 贺田间识字翁 生辰

红影 发表于 2025-1-18 19:55

【轱辘诗】- 贺田间识字翁 生辰

<style>
#papa {margin: 60px 0 30px calc(50% - 681px); width: 1200px; height: 640px; background: gray url('https://pic1.imgdb.cn/item/678b9447d0e0a243d4f578d9.jpg') no-repeat center/cover; box-shadow: 4px 4px 24px #000; position: relative; }
#mama { position: absolute; left: 620px; top: calc(50% - 210px); display: grid; place-items: center; width: 360px; height: 360px; cursor: pointer; }
#tit { position: absolute; left: 90px; top: 80px; font: bold 30px / 30px sans; color: brown; 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,.7); 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>

<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=1952267065.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-18 19:56

三言： 逸，隐田间，识上仙，翁字醉，水云闲。
四言：逸隐田间，间识上仙。仙翁字醉，醉水云闲。
五绝：闲逸隐田间，田间识上仙。上仙翁字醉，字醉水云闲。
七绝：水云闲逸隐田间，逸隐田间识上仙，间识上仙翁字醉，仙翁字醉水云闲。

红影 发表于 2025-1-18 19:57

今天腊月十九，是王老师生日，祝福生日快乐，幸福安康{:4_187:}

梦油 发表于 2025-1-18 20:15

借红影精彩的轱辘诗祝福田间识字翁生日快乐！

小辣椒 发表于 2025-1-18 20:21

欣赏亲爱的精美的【轱辘诗】{:4_199:}

小辣椒 发表于 2025-1-18 20:22

祝王老师生日快乐{:4_177:}

@田间识字翁

樵歌 发表于 2025-1-18 21:35

借师妹拿手绝活轱辘诗祝王老师生日快乐！

樵歌 发表于 2025-1-18 21:36

嵌字无痕，很有意境！诗意道出王老师高隐人生！

红影 发表于 2025-1-18 21:52

梦油 发表于 2025-1-18 20:15
借红影精彩的轱辘诗祝福田间识字翁生日快乐！

和梦油一起祝福王老师{:4_187:}

红影 发表于 2025-1-18 21:53

小辣椒 发表于 2025-1-18 20:21
欣赏亲爱的精美的【轱辘诗】

做这个稍许快点，就选了这个方式做个贺帖。今天是王老师好日子，我们一起祝福他{:4_187:}

红影 发表于 2025-1-18 21:54

樵歌 发表于 2025-1-18 21:35
借师妹拿手绝活轱辘诗祝王老师生日快乐！

今天正好有点事去忙了一下，想做个贺帖，就想起师兄的轱辘了，我也做了个{:4_173:}

红影 发表于 2025-1-18 21:55

樵歌 发表于 2025-1-18 21:36
嵌字无痕，很有意境！诗意道出王老师高隐人生！

谢谢师兄，记得师兄还嵌过夕夕的名字呢，那个字更多{:4_173:}

樵歌 发表于 2025-1-19 14:35

红影 发表于 2025-1-18 21:54
今天正好有点事去忙了一下，想做个贺帖，就想起师兄的轱辘了，我也做了个

轱辘是你首先引进来，师兄可是跟你学来着的{:4_189:}

樵歌 发表于 2025-1-19 14:35

红影 发表于 2025-1-18 21:55
谢谢师兄，记得师兄还嵌过夕夕的名字呢，那个字更多

貌似转过一个。{:4_189:}

红影 发表于 2025-1-19 19:46

樵歌 发表于 2025-1-19 14:35
轱辘是你首先引进来，师兄可是跟你学来着的

其实这个也挺不容易的，要考虑字的前后搭配，师兄现在轻车熟路，我每次填写个都挺吃力的{:4_173:}

红影 发表于 2025-1-19 19:47

樵歌 发表于 2025-1-19 14:35
貌似转过一个。

那个简直是顶级了，最难的轱辘呢{:4_187:}

田间识字翁 发表于 2025-1-20 09:51

红影 发表于 2025-1-18 19:56
三言： 逸，隐田间，识上仙，翁字醉，水云闲。
四言：逸隐田间，间识上仙。仙翁字醉，醉水云闲。
五绝： ...

谢谢{:4_176:}

田间识字翁 发表于 2025-1-20 09:52

梦油 发表于 2025-1-18 20:15
借红影精彩的轱辘诗祝福田间识字翁生日快乐！

谢谢{:4_191:}

田间识字翁 发表于 2025-1-20 09:52

樵歌 发表于 2025-1-18 21:35
借师妹拿手绝活轱辘诗祝王老师生日快乐！

谢谢{:4_191:}

梦油 发表于 2025-1-20 13:33

田间识字翁 发表于 2025-1-20 09:52
谢谢

不客气{:4_190:}

查看完整版本: 【轱辘诗】- 贺田间识字翁 生辰