论坛 › 古风雅韵 › 给一斛珠转个轱辘

樵歌 发表于 2023-4-12 21:29

给一斛珠转个轱辘

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

樵歌 发表于 2023-4-12 21:29

读法三言：玉。琢仙躯，与世殊。能抱一，斛盈珠。四言：玉琢仙躯，躯与世殊。殊能抱一，一斛盈珠。五绝：珠玉琢仙躯，仙躯与世殊。世殊能抱一，抱一斛盈珠。七绝：斛盈珠玉琢仙躯，玉琢仙躯与世殊。躯与世殊能抱一，殊能抱一斛盈珠。

樵歌 发表于 2023-4-12 21:30

这个转得不是太好，笑纳哈

红影 发表于 2023-4-12 21:33

这个选图很有仙气呢，轱辘诗也很仙气的，非常漂亮的轱辘{:4_199:}

红影 发表于 2023-4-12 21:34

珠儿的名字用来嵌字还是挺不容易的，师兄还是写成了，而且这么美{:4_199:}

红影 发表于 2023-4-12 21:35

珠珠赶快来收礼@一斛珠{:4_187:}

一斛珠 发表于 2023-4-12 22:31

来鸟来鸟，如影儿说的，轱辘的好有仙气，我必须仙起来哒

一斛珠 发表于 2023-4-12 22:38

我读了好几遍，那种感觉无以言表，唯有赞叹！

一斛珠 发表于 2023-4-12 22:40

一定费脑细胞，来来{:4_191:}走一个，权当谢意。

朝云暮雨 发表于 2023-4-13 00:21

真能转，我还没空转，哈哈{:4_204:}

樵歌 发表于 2023-4-13 07:31

红影 发表于 2023-4-12 21:33
这个选图很有仙气呢，轱辘诗也很仙气的，非常漂亮的轱辘

虽然那斛字有点难，但好在有个珠字，就想向仙灵上靠，也算勉强能混下来了{:4_173:}，后面的大漠孤烟，三个仄韵还没凑，不知道怎么凑呢。{:4_189:}

樵歌 发表于 2023-4-13 07:32

红影 发表于 2023-4-12 21:34
珠儿的名字用来嵌字还是挺不容易的，师兄还是写成了，而且这么美

师妹别夸了，只能说勉强凑成，{:4_189:}

樵歌 发表于 2023-4-13 07:38

一斛珠 发表于 2023-4-12 22:31
来鸟来鸟，如影儿说的，轱辘的好有仙气，我必须仙起来哒

红影说的一点不错，珠儿本身自带仙气。{:4_173:}

樵歌 发表于 2023-4-13 07:39

一斛珠 发表于 2023-4-12 22:38
我读了好几遍，那种感觉无以言表，唯有赞叹！

没凑好，勉强看呗{:4_201:}

樵歌 发表于 2023-4-13 07:40

一斛珠 发表于 2023-4-12 22:40
一定费脑细胞，来来走一个，权当谢意。

找合适图不好找，也不知道你喜欢那首歌，只好用了云水禅心，不知道珠儿姑娘是否喜欢。

樵歌 发表于 2023-4-13 07:41

朝云暮雨 发表于 2023-4-13 00:21
真能转，我还没空转，哈哈

等你有空了交流呗{:4_190:}

一斛珠 发表于 2023-4-13 10:25

樵歌 发表于 2023-4-13 07:39
没凑好，勉强看呗

要学会骄傲，骄傲使人进步，骄傲才更帅，若是如此谦虚，那可不好玩。{:4_172:}

一斛珠 发表于 2023-4-13 10:27

樵歌 发表于 2023-4-13 07:38
红影说的一点不错，珠儿本身自带仙气。

{:4_203:}原来是这个夸，我太容易骄傲，成仙了哈。

一斛珠 发表于 2023-4-13 10:29

樵歌 发表于 2023-4-13 07:40
找合适图不好找，也不知道你喜欢那首歌，只好用了云水禅心，不知道珠儿姑娘是否喜欢。

昨晚来欣赏，先生睡觉轻，不敢有音乐。
这首音乐一直是我喜欢的，记得以前总会拿来配文字，音画。

一斛珠 发表于 2023-4-13 10:32

再谢樵管管。{:4_191:}

查看完整版本: 给一斛珠转个轱辘