樵歌 发表于 2023-2-19 15:31

轱辘庆芳辰TO鱼儿

<style>
#papa { left: -252px;top:120px; width: 1100px; height: 618px; background: gray url('https://pic.imgdb.cn/item/62f3c6dd16f2c2beb194d1e3.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=304849.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-2-19 15:33

读法：
三言：岸。柳莺歌，起舞和，鱼跳跃，月儿河。
四言：岸柳莺歌，歌起舞和。和鱼跳跃，跃月儿河。
五绝：河岸柳莺歌，莺歌起舞和。舞和鱼跳跃，跳跃月儿河。
七绝：月儿河岸柳莺歌，岸柳莺歌起舞和。歌起舞和鱼跳跃，和鱼跳跃月儿河。

樵歌 发表于 2023-2-19 15:40

恭祝鱼儿生日快乐！{:4_204:}

红影 发表于 2023-2-19 16:25

记得这个是可以转起来的吧，这样用代码弄出来的果然圆了很多{:4_173:}

红影 发表于 2023-2-19 16:26

还嵌了鱼儿的名字呢，很漂亮的轱辘诗。鱼儿收礼开心，生日快乐{:4_187:}

梦油 发表于 2023-2-19 17:12

借樵歌精彩作品祝福鱼儿生日快乐！

庶民 发表于 2023-2-19 18:09

玩的真好，这个可以动一动的。

马黑黑 发表于 2023-2-19 19:27

高深

樵歌 发表于 2023-2-19 20:26

红影 发表于 2023-2-19 16:25
记得这个是可以转起来的吧，这样用代码弄出来的果然圆了很多

就是师妹以前教弄的，代码没变呀。我再找下原代码试下

樵歌 发表于 2023-2-19 20:27

红影 发表于 2023-2-19 16:26
还嵌了鱼儿的名字呢，很漂亮的轱辘诗。鱼儿收礼开心，生日快乐

师兄发现轱辘对个别不好组词的字放的位置。{:4_173:}

樵歌 发表于 2023-2-19 20:28

庶民 发表于 2023-2-19 18:09
玩的真好，这个可以动一动的。

我再找找红影以前弄的看。

樵歌 发表于 2023-2-19 20:28

马黑黑 发表于 2023-2-19 19:27
高深

不好意西，马术不精，{:4_189:}

马黑黑 发表于 2023-2-19 20:31

樵歌 发表于 2023-2-19 20:28
不好意西，马术不精，

{:5_116:}

樵歌 发表于 2023-2-19 21:08

照搬了红影师妹的模板，图图音乐和创意都没变只改了内容，@红影 谢谢了{:4_187:}

庶民 发表于 2023-2-20 05:39

樵歌 发表于 2023-2-19 20:28
我再找找红影以前弄的看。

这样的文字游戏很有趣。

梦缘 发表于 2023-2-20 10:52

借老师的精彩回文，祝鱼儿生日快乐！{:4_428:}

樵歌 发表于 2023-2-20 13:09

庶民 发表于 2023-2-20 05:39
这样的文字游戏很有趣。

要不然，光图个写字，啥乐子也没有，成了写字机了{:4_189:}

樵歌 发表于 2023-2-20 13:10

梦缘 发表于 2023-2-20 10:52
借老师的精彩回文，祝鱼儿生日快乐！

就是借鱼儿生日图个乐和乐和{:4_189:}

小九 发表于 2023-2-20 18:19

@鱼儿鱼儿快来收礼！ 生日快乐！{:4_187:}

鱼儿 发表于 2023-2-20 19:10

樵歌 发表于 2023-2-19 15:40
恭祝鱼儿生日快乐！

谢谢！谢谢！{:6_243:}
页: [1] 2
查看完整版本: 轱辘庆芳辰TO鱼儿