论坛 › 古风雅韵 › 给恬静雪雪转个轱辘

樵歌 发表于 2023-7-2 12:59

给恬静雪雪转个轱辘

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

读法三言：雪。静恬晨，月镜巡，梅雪映，海河春。四言：雪静恬晨，晨月镜巡。巡梅雪映，映海河春。五绝：春雪静恬晨，恬晨月镜巡。镜巡梅雪映，雪映海河春。七绝：海河春雪静恬晨，雪静恬晨月镜巡，晨月镜巡梅雪映，巡梅雪映海河春。

樵歌 发表于 2023-7-2 13:00

@恬静雪雪

醉美水芙蓉 发表于 2023-7-2 13:42

恬静雪雪 发表于 2023-7-2 15:03

哇塞，我哥大手笔，轱辘体诗，清新优美，赏心悦目
妹妹还在外，我姐姐家孙子过生日，才来收大礼
等我回家后好好唠嗑。{:4_204:}

恬静雪雪 发表于 2023-7-2 15:04

醉美水芙蓉 发表于 2023-7-2 13:42
欣赏樵歌佳作！

大美女一起赏轱辘诗{:4_204:}

梦油 发表于 2023-7-2 15:26

樵歌 发表于 2023-7-2 12:59
读法三言：雪。静恬晨，月镜巡，梅雪映，海河春。四言：雪静恬晨，晨月镜巡。巡梅雪映，映海河春。五绝：春 ...

万籁无声、月白风清，这是一幅赏心悦目得好礼啊！

恬静雪雪 发表于 2023-7-2 15:30

梦油 发表于 2023-7-2 15:26
万籁无声、月白风清，这是一幅赏心悦目得好礼啊！

梦兄。请茶，一同欣赏我哥好诗{:4_191:}

红影 发表于 2023-7-2 15:41

这个轱辘好漂亮，嵌了雪雪的名字，营造了一份美妙的场景。欣赏师兄好词{:4_199:}

红影 发表于 2023-7-2 15:43

雪雪的名字有2个同样的字，嵌入真不容易。还嵌入了雪雪的所在地，厉害了{:4_187:}

恬静雪雪 发表于 2023-7-2 15:43

红影 发表于 2023-7-2 15:41
这个轱辘好漂亮，嵌了雪雪的名字，营造了一份美妙的场景。欣赏师兄好词

一转身，影子宝贝来了，抱抱。
兄长用心之作，感动至极。谢谢送雪雪大礼{:4_204:}
我先下去了，我姐家孙子过生日，晚点回来{:4_183:}

樵歌 发表于 2023-7-2 16:06

恬静雪雪 发表于 2023-7-2 15:03
哇塞，我哥大手笔，轱辘体诗，清新优美，赏心悦目
妹妹还在外，我姐姐家孙子过生日，才来收大礼
等我回家 ...

知道妹妹是海河之花，所以特别标上贵府，{:4_173:}并以春雪映梅方能配上妹妹之高洁。

樵歌 发表于 2023-7-2 16:08

红影 发表于 2023-7-2 15:41
这个轱辘好漂亮，嵌了雪雪的名字，营造了一份美妙的场景。欣赏师兄好词

还暗中点岀雪雪的尊府上呢{:4_173:}

樵歌 发表于 2023-7-2 16:10

红影 发表于 2023-7-2 15:43
雪雪的名字有2个同样的字，嵌入真不容易。还嵌入了雪雪的所在地，厉害了

全籁师妹创新的代码增持呢{:4_187:}

樵歌 发表于 2023-7-2 16:12

梦油 发表于 2023-7-2 15:26
万籁无声、月白风清，这是一幅赏心悦目得好礼啊！

梦兄学识渊博，一下就点出文字的主旨！{:4_190:}

樵歌 发表于 2023-7-2 16:13

醉美水芙蓉 发表于 2023-7-2 13:42
欣赏樵歌佳作！

谢谢芙蓉临帖{:4_190:}

东篱闲人 发表于 2023-7-2 16:47

老樵见着美女就转轱辘。。。{:5_117:}

小文 发表于 2023-7-2 17:20

欣赏师叔大作，美！{:4_191:}

红影 发表于 2023-7-2 19:19

恬静雪雪 发表于 2023-7-2 15:43
一转身，影子宝贝来了，抱抱。
兄长用心之作，感动至极。谢谢送雪雪大礼
我先下去了，我姐家 ...

抱抱雪雪，这么快乐的事赶紧去吧{:4_179:}

红影 发表于 2023-7-2 19:20

樵歌 发表于 2023-7-2 16:08
还暗中点岀雪雪的尊府上呢

师兄考虑的周全，太厉害了。{:4_199:}

查看完整版本: 给恬静雪雪转个轱辘