论坛 › 古风雅韵 › 给罗浮梦转个轱辘

樵歌 发表于 2023-5-6 07:16

给罗浮梦转个轱辘

<style>
#papa { left: -252px;top:120px; width: 1100px; height: 618px; background: gray url('https://pic2.imgdb.cn/item/645588f70d2dde5777247d92.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=2013545717.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-5-6 07:16

读法：三言：影。舞罗裳，袂染香，梅萼碎，梦浮芳。
四言：影舞罗裳，裳袂染香。香梅萼碎，碎梦浮芳。
五绝：芳影舞罗裳，罗裳袂染香。染香梅萼碎，萼碎梦浮芳。
七绝：梦浮芳影舞罗裳，影舞罗裳袂染香。裳袂染香梅萼碎，香梅萼碎梦浮芳。

小星世龙 发表于 2023-5-6 07:36

拜读佳作，十分精彩，文图声融为一体，点赞！

梦油 发表于 2023-5-6 09:17

图、文、声、意并茂，好礼，好贴。罗浮梦快来收礼。

红影 发表于 2023-5-6 13:42

师兄弄错一个字，最后那个字是“芳”，师兄错写成“香”字了，快改一下吧{:4_173:}

七绝：梦浮芳影舞罗裳，影舞罗裳袂染香。裳袂染香梅萼碎，香梅萼碎梦浮香。

红影 发表于 2023-5-6 13:45

这个轱辘转得特别漂亮，无论是三言四言还是五绝七绝都特别美，非常难得。给师兄点赞{:4_199:}

红影 发表于 2023-5-6 13:46

这个不但流畅自然，而且特别美。太赞了{:4_199:}

樵歌 发表于 2023-5-6 18:12

小星世龙 发表于 2023-5-6 07:36
拜读佳作，十分精彩，文图声融为一体，点赞！

谢谢小星抬爱{:4_190:}

樵歌 发表于 2023-5-6 18:13

梦油 发表于 2023-5-6 09:17
图、文、声、意并茂，好礼，好贴。罗浮梦快来收礼。

老哥抬爱了{:4_190:}

樵歌 发表于 2023-5-6 18:13

红影 发表于 2023-5-6 13:42
师兄弄错一个字，最后那个字是“芳”，师兄错写成“香”字了，快改一下吧

七绝：梦浮芳影舞罗 ...
又得说那句了“有个师妹真好”{:4_190:}

樵歌 发表于 2023-5-6 18:15

红影 发表于 2023-5-6 13:45
这个轱辘转得特别漂亮，无论是三言四言还是五绝七绝都特别美，非常难得。给师兄点赞

这个稍微顺点，因为专门云查了这三字的意思和有关典故。{:4_190:}

樵歌 发表于 2023-5-6 18:17

红影 发表于 2023-5-6 13:46
这个不但流畅自然，而且特别美。太赞了

有师妹的代码加持，师兄才敢大胆凑呢。
也谢谢黑师的原始代码！@马黑黑 {:4_176:}

梦油 发表于 2023-5-6 20:03

樵歌 发表于 2023-5-6 18:13
老哥抬爱了

真羡慕你轱辘诗的创作。

醉美水芙蓉 发表于 2023-5-6 20:29

红影 发表于 2023-5-6 20:33

樵歌 发表于 2023-5-6 18:13
又得说那句了“有个师妹真好”

这个是小事，师兄只是手误{:4_173:}

马黑黑 发表于 2023-5-6 20:45

越来越上手了

红影 发表于 2023-5-6 20:46

樵歌 发表于 2023-5-6 18:15
这个稍微顺点，因为专门云查了这三字的意思和有关典故。

这个非常流畅呢，应该是所有轱辘中最好的一个{:4_199:}

红影 发表于 2023-5-6 20:46

樵歌 发表于 2023-5-6 18:17
有师妹的代码加持，师兄才敢大胆凑呢。
也谢谢黑师的原始代码！@马黑黑

嗯嗯，跟师兄一起感谢黑黑{:4_187:}

千羽 发表于 2023-5-6 21:10

樵歌老师的古韵图做得太美了，飞鸟动图让古韵美图更加生动了，点赞送花花啦{:4_199:}{:4_187:}{:4_204:}

千羽 发表于 2023-5-6 21:12

转轱辘是樵歌老师的拿手绝活，必须顶起来{:4_199:}{:4_178:}

查看完整版本: 给罗浮梦转个轱辘