论坛 › 祝福礼堂 › 转轱辘--绿叶清舟芳辰

樵歌 发表于 2023-2-20 09:47

转轱辘--绿叶清舟芳辰

<style>
#papa { left: -252px;top:120px; width: 1100px; height: 618px; background: gray url('http://p3.itc.cn/q_70/images03/20200905/93e43817dd264a23b819f4862d7139b3.jpeg')
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=304849.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-2-20 09:48

读法：三言：荡。漾清流，水绿悠，扬一叶，木兰舟。
四言：荡漾清流，流水绿悠。悠扬一叶，叶木兰舟。
五绝：舟荡漾清流，清流水绿悠。绿悠扬一叶，一叶木兰舟。
七绝：木兰舟荡漾清流，荡漾清流水绿悠，流水绿悠扬一叶，悠扬一叶木兰舟。

樵歌 发表于 2023-2-20 09:48

恭贺绿叶清舟芳辰快乐！

红影 发表于 2023-2-20 10:03

一叶兰舟荡清流，师兄的轱辘已经好淡雅美妙。清舟生日快乐，收礼开心{:4_187:}

红影 发表于 2023-2-20 10:24

师兄还把轱辘做成了音画，做得真好{:4_187:}

梦缘 发表于 2023-2-20 10:51

精彩的轱辘回文，欣赏点赞问你好！{:4_187:}

醉美水芙蓉 发表于 2023-2-20 11:46

樵歌 发表于 2023-2-20 12:52

红影 发表于 2023-2-20 10:03
一叶兰舟荡清流，师兄的轱辘已经好淡雅美妙。清舟生日快乐，收礼开心

好长时间没玩这个了，一是文体差点忘记了，二是师妹用代码把圈圈滚得圆还能加动图图，也差点忘记了{:4_189:}

樵歌 发表于 2023-2-20 12:54

红影 发表于 2023-2-20 10:24
师兄还把轱辘做成了音画，做得真好

嗯，师兄来抄师妹的作业了{:4_170:}

樵歌 发表于 2023-2-20 12:54

梦缘 发表于 2023-2-20 10:51
精彩的轱辘回文，欣赏点赞问你好！

谢谢梦缘。{:4_187:}

樵歌 发表于 2023-2-20 12:55

醉美水芙蓉 发表于 2023-2-20 11:46
欣赏樵歌佳作！同祝清舟生日快乐！

问好芙蓉，同祝清舟生日快乐！

庶民 发表于 2023-2-20 13:37

这样的作品真有文学味道。

梦油 发表于 2023-2-20 16:01

制作成音画的轱辘回文太精美了。谨借樵歌朋友的美图，祝福清舟生日快乐。

小辣椒 发表于 2023-2-20 16:59

樵哥哥这么高大上的作品，小辣椒点100个赞{:4_199:}

小辣椒 发表于 2023-2-20 17:01

现在樵哥哥威武了，不但会做黑黑的转轱辘-，还会添加音乐和配图图了{:4_178:}

小辣椒 发表于 2023-2-20 17:02

清舟生日快乐~~收礼开心@绿叶清舟

小辣椒 发表于 2023-2-20 17:03

小辣椒鱼儿的贺帖还没有做，清舟生日了，得抓紧做帖了

樵歌 发表于 2023-2-20 20:57

庶民 发表于 2023-2-20 13:37
这样的作品真有文学味道。

文字游戏耳{:4_173:}

樵歌 发表于 2023-2-20 20:58

梦油 发表于 2023-2-20 16:01
制作成音画的轱辘回文太精美了。谨借樵歌朋友的美图，祝福清舟生日快乐。

除了内容，其它抄红影的作业{:4_173:}

樵歌 发表于 2023-2-20 20:59

小辣椒 发表于 2023-2-20 16:59
樵哥哥这么高大上的作品，小辣椒点100个赞

可别把小手点酸了，樵哥哥可惹祸上身了{:4_173:}

查看完整版本: 转轱辘--绿叶清舟芳辰