论坛 › 现代文学 › 给归晚转个轱辘

樵歌 发表于 2023-6-1 12:27

给归晚转个轱辘

<style>
#papa { left: -252px;top:120px; width: 1100px; height: 618px; background: gray url('https://pic.imgdb.cn/item/64781b30f024cca173f5236c.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=116718.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-6-1 12:27

读法三言：镜。照人归，盼露霏，蕤簇岸，晚云飞。四言：镜照人归，归盼露霏。霏蕤簇岸，岸晚云飞。五绝：飞镜照人归，人归盼露霏。露霏蕤簇岸。簇岸晚云飞。七绝：晚云飞镜照人归，镜照人归盼露霏。归盼露霏蕤簇岸，霏蕤簇岸晚云飞。

樵歌 发表于 2023-6-1 12:28

@归晚

梦缘 发表于 2023-6-1 15:59

欣赏老师好文彩，老师大才。

梦油 发表于 2023-6-1 15:59

樵歌 发表于 2023-6-1 12:27
读法三言：镜。照人归，盼露霏，蕤簇岸，晚云飞。四言：镜照人归，归盼露霏。霏蕤簇岸，岸晚云飞。五绝：飞 ...

樵歌朋友撰写轱辘诗真是手到擒来啊。

梦缘 发表于 2023-6-1 15:59

樵歌 发表于 2023-6-1 12:27
读法三言：镜。照人归，盼露霏，蕤簇岸，晚云飞。四言：镜照人归，归盼露霏。霏蕤簇岸，岸晚云飞。五绝：飞 ...

感谢分享，好文笔。{:4_187:}

醉美水芙蓉 发表于 2023-6-1 16:50

归晚 发表于 2023-6-1 17:00

好巧，我刚打开就看到了，谢谢，六一快乐

归晚 发表于 2023-6-1 17:01

你真是随手转古韵，欣赏，也感谢{:4_204:}

归晚 发表于 2023-6-1 17:01

图美意境浓，古典美，意境美

一斛珠 发表于 2023-6-1 18:42

艾玛，想点支持，结果错地方了，要命啊。
樵歌勿怪我这老眼昏花的老太婆哇。

一斛珠 发表于 2023-6-1 18:44

转到太美了。{:4_199:}

红影 发表于 2023-6-1 18:44

明月如镜，照着晚归的人儿。师兄的轱辘意境好美{:4_199:}

一斛珠 发表于 2023-6-1 18:45

如我家晚晚说的意境很美的，赞一个！

红影 发表于 2023-6-1 18:46

恭喜师兄又完成一个轱辘，蝶儿收礼开心{:4_187:}

千羽 发表于 2023-6-1 19:23

樵歌老师大笔一挥，一个新轱辘就转出来了，大才子{:4_187:}

千羽 发表于 2023-6-1 19:23

美图美文采，樵歌老师棒棒哒{:4_187:}

千羽 发表于 2023-6-1 19:24

问好归晚，收礼开心{:4_199:}

樵歌 发表于 2023-6-1 20:30

梦油 发表于 2023-6-1 15:59
樵歌朋友撰写轱辘诗真是手到擒来啊。

就会点这套路{:4_173:}

樵歌 发表于 2023-6-1 20:31

梦缘 发表于 2023-6-1 15:59
感谢分享，好文笔。

谢谢梦缘来读{:4_187:}

查看完整版本: 给归晚转个轱辘