论坛 › 古风雅韵 › 给大漠孤烟转个轱辘

樵歌 发表于 2023-4-13 13:53

给大漠孤烟转个轱辘

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

读法三言：月。冷长天，晓不眠。沙大漠，雁孤烟。四言：月冷长天，天晓不眠。眠沙大漠，漠雁孤烟。五绝：烟月冷长天，长天晓不眠。不眠沙大漠，大漠雁孤烟。七绝：雁孤烟月冷长天，月冷长天晓不眠。天晓不眠沙大漠，眠沙大漠雁孤烟。

大漠孤烟 发表于 2023-4-13 14:11

大礼，谢谢樵兄，我很喜欢{:5_109:}

大漠孤烟 发表于 2023-4-13 14:13

字好，音乐也很美，用心了，请茶{:5_109:}

大漠孤烟 发表于 2023-4-13 14:16

这么好听，可是嵇康的广陵散？{:5_117:}

樵歌 发表于 2023-4-13 14:18

大漠孤烟 发表于 2023-4-13 14:16
这么好听，可是嵇康的广陵散？

曲名：大漠孤烟，貌似专为你谱的{:4_173:}

樵歌 发表于 2023-4-13 14:19

大漠孤烟 发表于 2023-4-13 14:11
大礼，谢谢樵兄，我很喜欢

不谢哈，老朋友了{:4_176:}

樵歌 发表于 2023-4-13 14:20

大漠孤烟 发表于 2023-4-13 14:13
字好，音乐也很美，用心了，请茶

凑得迟了，因为美女优先{:4_170:}

大漠孤烟 发表于 2023-4-13 14:23

樵歌 发表于 2023-4-13 14:18
曲名：大漠孤烟，貌似专为你谱的

哈哈，漂亮

大漠孤烟 发表于 2023-4-13 14:24

樵歌 发表于 2023-4-13 14:20
凑得迟了，因为美女优先

嗯嗯，应该

梦油 发表于 2023-4-13 14:57

“大漠孤烟”四个字嵌得自然流畅、文采斐然。看得出樵歌朋友的文字功底十分雄厚

红影 发表于 2023-4-13 15:07

这个背景图好靓丽，跟大漠的名字十分吻合呢，轱辘诗也很漂亮。欣赏师兄好帖，大漠收礼开心{:4_187:}

红影 发表于 2023-4-13 15:07

樵歌 发表于 2023-4-13 14:20
凑得迟了，因为美女优先

又来了一位归晚美女呢{:4_173:}

樵歌 发表于 2023-4-13 17:23

大漠孤烟 发表于 2023-4-13 14:23
哈哈，漂亮

我界入你的名字，在网易云音乐上还真有这名字的纯音乐曲子，本来是想搜索一首古典军旅曲子的，

樵歌 发表于 2023-4-13 17:24

大漠孤烟 发表于 2023-4-13 14:24
嗯嗯，应该

必须的哈。

樵歌 发表于 2023-4-13 17:25

梦油 发表于 2023-4-13 14:57
“大漠孤烟”四个字嵌得自然流畅、文采斐然。看得出樵歌朋友的文字功底十分雄厚

都是参考借鉴古人的诗词意境，也没太处理得顺溜。

樵歌 发表于 2023-4-13 17:26

红影 发表于 2023-4-13 15:07
这个背景图好靓丽，跟大漠的名字十分吻合呢，轱辘诗也很漂亮。欣赏师兄好帖，大漠收礼开心

我输入名字，第一幅图图正好是这张，一看就喜欢这意境。

樵歌 发表于 2023-4-13 17:27

红影 发表于 2023-4-13 15:07
又来了一位归晚美女呢

等下先熟悉下她的作品再送。{:4_173:}

大漠孤烟 发表于 2023-4-13 17:54

樵歌 发表于 2023-4-13 17:23
我界入你的名字，在网易云音乐上还真有这名字的纯音乐曲子，本来是想搜索一首古典军旅曲子的，

用心了{:5_109:}

樵歌 发表于 2023-4-13 18:04

大漠孤烟 发表于 2023-4-13 17:54
用心了

不客气哈。{:4_190:}

查看完整版本: 给大漠孤烟转个轱辘