樵歌 发表于 2023-5-28 09:18

给焱鑫磊转个轱辘

<style>
#papa { left: -252px;top:120px; width: 1100px; height: 618px; background: gray url('https://pic1.imgdb.cn/item/6472a27bf024cca173ee6081.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=1944404.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-28 09:18

@焱鑫磊

樵歌 发表于 2023-5-28 09:18

读法:
三言,磊。落环回,与梦堆,鑫砌玉,焱华瑰。四言:磊落环回,回与梦堆,堆鑫砌玉,玉焱华瑰。五绝:瑰磊落环回,环回与梦堆。梦堆鑫砌玉,砌玉焱华瑰。焱华瑰磊落环回,磊落环回与梦堆。回与梦堆鑫砌玉。堆鑫砌玉焱华瑰。

樵歌 发表于 2023-5-28 09:21

半个月没弄差点忘记了{:4_173:}

焱鑫磊 发表于 2023-5-28 09:23

樵歌 发表于 2023-5-28 09:18
@焱鑫磊

樵歌厉害!谢谢!{:4_187:}

焱鑫磊 发表于 2023-5-28 09:24

樵歌 发表于 2023-5-28 09:18
读法:
三言,磊。落环回,与梦堆,鑫砌玉,焱华瑰。四言:磊落环回,回与梦堆,堆鑫砌玉,玉焱华瑰。五绝 ...

{:4_176:}{:4_176:}{:4_176:}

梦油 发表于 2023-5-28 10:25

风流潇洒、才识过人,难得的家园当家人。
身体如何?“羊”走了没有?当小队长了吧。{:4_189:}

樵歌 发表于 2023-5-28 10:33

焱鑫磊 发表于 2023-5-28 09:23
樵歌厉害!谢谢!

见笑。你这名字真是有些难度呢{:4_189:}

樵歌 发表于 2023-5-28 10:34

焱鑫磊 发表于 2023-5-28 09:24


好好,正好多天没喝酒了{:4_176:}

樵歌 发表于 2023-5-28 10:40

梦油 发表于 2023-5-28 10:25
风流潇洒、才识过人,难得的家园当家人。
身体如何?“羊”走了没有?当小队长了吧。

谢谢老哥关心了。上次是假羊,住院当天全面查都是阴的。说是上感引起肺部感染,住了十几天,顺带把颈椎理疗做了,前些天不能上网,现在全好了。{:4_190:}

红影 发表于 2023-5-28 10:58

师兄厉害了,这三个字做轱辘诗组词特别难,师兄却写成了,很赞{:4_199:}

红影 发表于 2023-5-28 11:00

师兄用深色背景制作也很漂亮呢,看起来多尝试会有更多的美妙{:4_199:}

梦油 发表于 2023-5-28 11:08

樵歌 发表于 2023-5-28 10:40
谢谢老哥关心了。上次是假羊,住院当天全面查都是阴的。说是上感引起肺部感染,住了十几天,顺带把颈椎理 ...

一场虚惊啊!喝杯香槟压压惊吧!{:4_176:}

醉美水芙蓉 发表于 2023-5-28 12:02

樵歌 发表于 2023-5-28 12:16

红影 发表于 2023-5-28 10:58
师兄厉害了,这三个字做轱辘诗组词特别难,师兄却写成了,很赞

虽然做到了,但意境不是很好。欠了许多帐了,得还呵{:4_189:}

樵歌 发表于 2023-5-28 12:16

红影 发表于 2023-5-28 11:00
师兄用深色背景制作也很漂亮呢,看起来多尝试会有更多的美妙

主要是师妹选 轱辘字的颜色选得好{:4_189:}

樵歌 发表于 2023-5-28 12:17

梦油 发表于 2023-5-28 11:08
一场虚惊啊!喝杯香槟压压惊吧!

谢谢呵{:4_176:}

樵歌 发表于 2023-5-28 12:17

醉美水芙蓉 发表于 2023-5-28 12:02
欣赏樵歌美贴!

谢谢美女来欣赏{:4_190:}

红影 发表于 2023-5-28 13:51

樵歌 发表于 2023-5-28 12:16
虽然做到了,但意境不是很好。欠了许多帐了,得还呵

能写成已经相当不容易啊,这3个字我都不知道怎么组词呢{:4_173:}

红影 发表于 2023-5-28 13:52

樵歌 发表于 2023-5-28 12:16
主要是师妹选 轱辘字的颜色选得好

这个也是黑黑的代码功劳呢{:4_173:}
页: [1] 2 3 4
查看完整版本: 给焱鑫磊转个轱辘