樵歌 发表于 2023-4-11 21:17

给羽衣转个轱辘

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

读法
三言：羽。化罗衣，舞翠薇。歌一曲，跨虹飞。四言：羽化罗衣，衣舞翠薇。薇歌一曲，曲跨虹飞。五绝：飞羽化罗衣，罗衣舞翠薇。翠薇歌一曲，一曲跨虹飞。七绝：跨虹飞羽化罗衣，羽化罗衣舞翠薇。衣舞翠薇歌一曲，薇歌一曲跨虹飞。

马黑黑 发表于 2023-4-11 21:18

加为精华

羽衣 发表于 2023-4-11 21:25

呀，灵犀了，俺也刚刚谢谢老师的小挂件，送了你一个。{:4_173:}

羽衣 发表于 2023-4-11 21:26

樵歌 发表于 2023-4-11 21:17
读法
三言：羽。化罗衣，舞翠薇。歌一曲，跨虹飞。四言：羽化罗衣，衣舞翠薇。薇歌一曲，曲跨虹飞。五绝： ...

老师大才，这个你咋想出来的？{:4_199:}{:4_199:}

羽衣 发表于 2023-4-11 21:28

谢谢老师，转得漂亮。{:4_204:}{:4_204:}

红影 发表于 2023-4-11 21:46

羽化罗衣，原来羽儿的名字这么美的。师兄的轱辘诗好棒。这个图图也选得漂亮，大大的彩虹，色彩斑斓，让跨虹飞的羽衣轻舞飞扬{:4_187:}

红影 发表于 2023-4-11 21:47

马黑黑 发表于 2023-4-11 21:18
加为精华

我来负责操作{:4_173:}

马黑黑 发表于 2023-4-11 22:00

红影 发表于 2023-4-11 21:47
我来负责操作

{:5_146:}

庶民 发表于 2023-4-12 06:23

玩的转，玩的精彩。

樵歌 发表于 2023-4-12 07:54

马黑黑 发表于 2023-4-11 21:18
加为精华

有你的股份{:4_189:}

樵歌 发表于 2023-4-12 07:55

羽衣 发表于 2023-4-11 21:25
呀，灵犀了，俺也刚刚谢谢老师的小挂件，送了你一个。

谢谢，那个礼物我喜欢{:4_190:}

樵歌 发表于 2023-4-12 07:57

羽衣 发表于 2023-4-11 21:26
老师大才，这个你咋想出来的？

以前玩凑了许多轱辘。以后可别老师老师挂小嘴边了，当不起呢{:4_189:}

樵歌 发表于 2023-4-12 07:57

羽衣 发表于 2023-4-11 21:28
谢谢老师，转得漂亮。

不客气哈。{:4_189:}

樵歌 发表于 2023-4-12 07:59

红影 发表于 2023-4-11 21:46
羽化罗衣，原来羽儿的名字这么美的。师兄的轱辘诗好棒。这个图图也选得漂亮，大大的彩虹，色彩斑斓，让跨虹 ...

真啥也瞒不住师妹，这个意境被师妹看得透透的{:4_173:}

樵歌 发表于 2023-4-12 08:00

红影 发表于 2023-4-11 21:47
我来负责操作
两个老师来飘扬，师兄也是飘了{:4_189:}

马黑黑 发表于 2023-4-12 08:13

樵歌 发表于 2023-4-12 07:54
有你的股份

俺要6毛就可以了{:4_170:}

大漠孤烟 发表于 2023-4-12 08:46

樵歌 发表于 2023-4-11 21:17
读法
三言：羽。化罗衣，舞翠薇。歌一曲，跨虹飞。四言：羽化罗衣，衣舞翠薇。薇歌一曲，曲跨虹飞。五绝： ...

我替羽儿收礼了

大漠孤烟 发表于 2023-4-12 08:48

樵哥才情茂盛，不输伯牙宋玉{:5_116:}

大漠孤烟 发表于 2023-4-12 08:50

羽儿刚诞下龙子，现在身子不便，樵哥见谅
页: [1] 2
查看完整版本: 给羽衣转个轱辘