论坛 › 现代文学 › 【中伏消暑】第九天 年 轱辘TO马黑黑

樵歌 发表于 2022-8-3 08:06

【中伏消暑】第九天 年 轱辘TO马黑黑

<style>
#papa { left: -214px; width: 1024px; height: 600px; background: gray url('/data/attachment/forum/202208/01/121439t4vgel87lzgr7vfr.jpg') no-repeat center/cover; box-shadow: 4px 4px 24px #000; position: relative; }
#mama { position: absolute; left: 100px; top: calc(50% - 180px); display: grid; place-items: center; width: 360px; height: 360px; cursor: pointer; }
#tit { position: absolute; left: 26px; top: 26px; font: bold 26px / 26px sans-serif; color: lightblue; 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,.7); 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>

<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=1873763455.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>

樵歌 发表于 2022-8-3 08:07

三言：跃。马唭鸣，剑隽英，年守黑，黑龙腾。四言：跃马嘶鸣，鸣剑隽英。英年守黑，黑黑龙腾。五绝：腾跃马嘶鸣，嘶鸣剑隽英。隽英年守黑，守黑黑龙腾。七绝：黑龙腾跃马嘶鸣，跃马嘶鸣剑隽英。鸣剑隽英年守黑，英年守黑黑龙腾。

樵歌 发表于 2022-8-3 08:08

@马黑黑 ，谢谢你的那个，给搬来套上了{:4_190:}

小星世龙 发表于 2022-8-3 08:45

图文声融为一体，十分精彩，点赞！

浣溪沙 发表于 2022-8-3 09:39

黑黑收礼快乐！{:4_204:}

浣溪沙 发表于 2022-8-3 09:40

樵歌的文字太精彩了{:4_178:}

梦油 发表于 2022-8-3 10:50

樵歌朋友灵气逼人、才华横溢、善良体贴、精明强干。期待樵歌更多好作品问世。

红影 发表于 2022-8-3 10:51

师兄把轱辘做成代码帖子了，好赞啊。以后的轱辘都可以这样玩了呢{:4_187:}

马黑黑 发表于 2022-8-3 12:11

浣溪沙 发表于 2022-8-3 09:39
黑黑收礼快乐！

一同欣赏樵歌佳作，一同开心

樵歌 发表于 2022-8-3 19:23

红影 发表于 2022-8-3 10:51
师兄把轱辘做成代码帖子了，好赞啊。以后的轱辘都可以这样玩了呢

照黑黑那帖代码，只把字改了，音乐图不敢乱动{:4_173:}

樵歌 发表于 2022-8-3 19:24

梦油 发表于 2022-8-3 10:50
樵歌朋友灵气逼人、才华横溢、善良体贴、精明强干。期待樵歌更多好作品问世。

梦兄大过誉了哈，夸得俺老脸都红啦{:4_190:}

小辣椒 发表于 2022-8-3 19:26

黒黑的特效手机也是可以欣赏，

樵歌 发表于 2022-8-3 19:26

小星世龙 发表于 2022-8-3 08:45
图文声融为一体，十分精彩，点赞！

问好夏安{:4_190:}

小辣椒 发表于 2022-8-3 19:27

欣赏樵哥哥精彩回文

樵歌 发表于 2022-8-3 19:28

浣溪沙 发表于 2022-8-3 09:40
樵歌的文字太精彩了

两个黑字还真有点难{:4_173:}

梦油 发表于 2022-8-3 19:54

樵歌 发表于 2022-8-3 19:24
梦兄大过誉了哈，夸得俺老脸都红啦

这是你留给我的印象。

红影 发表于 2022-8-3 21:32

樵歌 发表于 2022-8-3 19:23
照黑黑那帖代码，只把字改了，音乐图不敢乱动

这样就可以了，这就是套用啊。改图也是一样的。

樵歌 发表于 2022-8-4 20:10

小辣椒 发表于 2022-8-3 19:27
欣赏樵哥哥精彩回文

字是我写的，其它抄的作业{:4_189:}

樵歌 发表于 2022-8-4 20:12

梦油 发表于 2022-8-3 19:54
这是你留给我的印象。

你太谦虚了{:4_190:}

樵歌 发表于 2022-8-4 20:13

红影 发表于 2022-8-3 21:32
这样就可以了，这就是套用啊。改图也是一样的。

能换一张图和音乐吗？

查看完整版本: 【中伏消暑】第九天 年 轱辘TO马黑黑