论坛 › 古风雅韵 › 给南无月转个轱辘

樵歌 发表于 2023-5-29 13:02

给南无月转个轱辘

<style>
#papa { left: -252px;top:120px; width: 1100px; height: 618px; background: gray url('https://pic1.imgdb.cn/item/647421d1f024cca17399ce83.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=310190.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-29 13:03

读法：三言：月。射江南，客亦甘，无色相，映空潭。四言：月射江南，南客亦甘。甘无色相，相映空潭。五绝：潭月射江南，江南客亦甘。亦甘无色相，色相映空潭。七绝：映空潭月射江南，月射江南客亦甘，南客亦甘无色相，甘无色相映空潭。

樵歌 发表于 2023-5-29 13:03

@南无月你是音画高手，俺草划个圈圈，聊表心意。见笑了{:4_173:}

梦油 发表于 2023-5-29 15:31

哇！这个背景流光溢彩，太美了。

梦缘 发表于 2023-5-29 16:24

厉害啊，老师好文彩，欣赏点赞！{:4_178:}

醉美水芙蓉 发表于 2023-5-29 17:01

南无月 发表于 2023-5-29 18:15

樵歌 发表于 2023-5-29 13:03
@南无月你是音画高手，俺草划个圈圈，聊表心意。见笑了

顺着提示来到这里，看到精美音画，背景十分漂亮，动态飞鸟十分恰当。
欣赏樵管好文采，感谢樵管对新手会员的鼓励和支持{:4_187:}

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

梦油 发表于 2023-5-29 15:31
哇！这个背景流光溢彩，太美了。

借了个与文字相近的图图，得谢谢拍图图原作者。

樵歌 发表于 2023-5-29 18:16

梦缘 发表于 2023-5-29 16:24
厉害啊，老师好文彩，欣赏点赞！

谢谢梦来点赞{:4_187:}

樵歌 发表于 2023-5-29 18:16

醉美水芙蓉 发表于 2023-5-29 17:01
欣赏樵歌好作品！

问好美芙蓉{:4_187:}

樵歌 发表于 2023-5-29 18:18

南无月 发表于 2023-5-29 18:15
顺着提示来到这里，看到精美音画，背景十分漂亮，动态飞鸟十分恰当。
欣赏樵管好文采，感谢樵管对新手会 ...

你不新手吗{:4_172:}
喜欢俺就开森了

马黑黑 发表于 2023-5-29 20:30

美美哒

红影 发表于 2023-5-29 20:47

这个漂亮，师兄这么快又转了个轱辘啊，厉害{:4_187:}

红影 发表于 2023-5-29 20:49

这个背景也选得好，跟词意很接近的呢。
月入空潭，如此清净淡雅。这意境带着禅意，真棒{:4_187:}

小文 发表于 2023-5-29 20:52

很舒服的图景

樵歌 发表于 2023-5-30 07:02

马黑黑 发表于 2023-5-29 20:30
美美哒

得仙师赞，早上嚎{:4_190:}

樵歌 发表于 2023-5-30 07:04

红影 发表于 2023-5-29 20:47
这个漂亮，师兄这么快又转了个轱辘啊，厉害

算了一下，还有好几个没转呢。
主是找图图来配合轱辘文字的意境太难了，音乐还好对付一点，反正弄个古典曲子就差不多了

樵歌 发表于 2023-5-30 07:05

红影 发表于 2023-5-29 20:49
这个背景也选得好，跟词意很接近的呢。
月入空潭，如此清净淡雅。这意境带着禅意，真棒

总是感觉不够好，知道是个别文字

樵歌 发表于 2023-5-30 07:06

小文 发表于 2023-5-29 20:52
很舒服的图景

也算巧了，没费事就把这衅给找到了

马黑黑 发表于 2023-5-30 08:19

樵歌 发表于 2023-5-30 07:02
得仙师赞，早上嚎

你嚎你嚎

查看完整版本: 给南无月转个轱辘