论坛 › 祝福礼堂 › 给菲儿转个轱辘

樵歌 发表于 2024-1-23 08:40

给菲儿转个轱辘

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

樵歌 发表于 2024-1-23 08:41

读法：
三言：影。照空堂，案墨芳，菲入梦，月儿香。
四言：影照空堂，堂案墨芳。芳菲入梦，梦月儿香。
五绝：香影照空堂，空堂案墨芳。墨芳菲入梦，入梦月儿香。
七言：月儿香影照空堂，影照空堂案墨芳。堂案墨芳菲入梦，芳菲入梦月儿香。

樵歌 发表于 2024-1-23 08:41

@菲儿

红影 发表于 2024-1-23 09:13

这个轱辘诗好看，芳菲入梦月儿香，精美的轱辘句，还嵌了菲儿的名字呢。@菲儿收礼开心{:4_187:}

红影 发表于 2024-1-23 09:14

这个不但诗句好看，做的音画也好看。给师兄点赞{:4_199:}

樵歌 发表于 2024-1-23 11:34

红影 发表于 2024-1-23 09:13
这个轱辘诗好看，芳菲入梦月儿香，精美的轱辘句，还嵌了菲儿的名字呢。@菲儿收礼开心

带儿字的都比较难弄，常用的也就月儿，花儿，风儿、妹儿等。{:4_173:}

樵歌 发表于 2024-1-23 11:36

红影 发表于 2024-1-23 09:14
这个不但诗句好看，做的音画也好看。给师兄点赞

音画不是抄的师妹改良后的代码吗{:4_187:}

清茶煮雪 发表于 2024-1-23 15:10

才看见消息，立马就来了，樵歌才子啊 {:5_116:}会做代码音画，还会写文字……先欣赏一下

清茶煮雪 发表于 2024-1-23 15:12

听着动听的曲子，先玩了一下那个圈字，鼠标放上去文字会变色，太好玩了{:4_173:}

清茶煮雪 发表于 2024-1-23 15:16

本帖最后由 菲儿 于 2024-1-23 15:18 编辑

樵歌 发表于 2024-1-23 08:41
读法：
三言：影。照空堂，案墨芳，菲入梦，月儿香。
四言：影照空堂，堂案墨芳。芳菲入梦，梦月儿香。

我不太懂诗词{:5_111:}，但我喜欢这诗（……芳菲入梦月儿香）意境微妙唯美{:4_187:}，谢谢樵歌帅才~

清茶煮雪 发表于 2024-1-23 15:32

樵歌 发表于 2024-1-23 08:41
@菲儿

一枚明月当空照，满树梅花香自来，两两白鹤嬉飞翔，一曲仙乐来添彩。俺姗姗来迟喜满怀~{:4_173:}

清茶煮雪 发表于 2024-1-23 15:34

红影 发表于 2024-1-23 09:13
这个轱辘诗好看，芳菲入梦月儿香，精美的轱辘句，还嵌了菲儿的名字呢。@菲儿收礼开心

谢谢红影传音{:4_179:}，嗯，收礼开心呢~

清茶煮雪 发表于 2024-1-23 15:40

原来那个变色文字也是歌曲暂停建，等空了我也学习套用{:4_173:}

樵歌 发表于 2024-1-23 17:54

菲儿 发表于 2024-1-23 15:16
我不太懂诗词，但我喜欢这诗（……芳菲入梦月儿香）意境微妙唯美，谢谢樵歌帅才~

因为要嵌入名字，所以意境局限了，将就着看呗{:4_173:}

樵歌 发表于 2024-1-23 17:57

菲儿 发表于 2024-1-23 15:10
才看见消息，立马就来了，樵歌才子啊 会做代码音画，还会写文字……先欣赏一下

我不会音画，除字图音乐外，代码抄用马黑和红步的。我是照猫画虎，都沒画好呢。

樵歌 发表于 2024-1-23 17:59

菲儿 发表于 2024-1-23 15:12
听着动听的曲子，先玩了一下那个圈字，鼠标放上去文字会变色，太好玩了

都是马老师代码加持才有点效果。

樵歌 发表于 2024-1-23 18:01

菲儿 发表于 2024-1-23 15:32
一枚明月当空照，满树梅花香自来，两两白鹤嬉飞翔，一曲仙乐来添彩。俺姗姗来迟喜满怀~

觉得这底图比较清郎，和文字还算适合就用了。

红影 发表于 2024-1-23 21:23

樵歌 发表于 2024-1-23 11:34
带儿字的都比较难弄，常用的也就月儿，花儿，风儿、妹儿等。

是的，这个字难组词，师兄用在月儿上，很优美也很巧妙{:4_187:}

红影 发表于 2024-1-23 21:24

樵歌 发表于 2024-1-23 11:36
音画不是抄的师妹改良后的代码吗

哪里，底图的意境至少是师兄的啊{:4_187:}

红影 发表于 2024-1-23 21:24

菲儿 发表于 2024-1-23 15:34
谢谢红影传音，嗯，收礼开心呢~

这个轱辘诗里有菲儿的名字呢，非常好看{:4_187:}

查看完整版本: 给菲儿转个轱辘