论坛 › 祝福礼堂 › 给亦是金转个轱辘

樵歌 发表于 2023-4-4 09:39

给亦是金转个轱辘

<style>
#papa { left: -252px;top:120px; width: 1100px; height: 618px; background: gray url('https://pic.ntimg.cn/file/20171016/3468880_155934970039_2.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=396277.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-4 09:40

读法如下：
三言：玉。裂瑶琴。是雅吟，声入画，亦如金。四言：玉裂瑶琴，琴是雅吟。吟声入画，画亦如金。五绝：金玉裂瑶琴，瑶琴是雅吟。雅吟声入画，入画亦如金。七绝：亦如金玉裂瑶琴，玉裂瑶琴是雅吟。琴是雅吟声入画，吟声入画亦如金。

庶民 发表于 2023-4-4 10:04

这样的玩法，洒家大赞。

朝云暮雨 发表于 2023-4-4 10:16

这个像八卦阵。。{:4_187:}

红影 发表于 2023-4-4 10:33

进来便看到师兄的背景图选得很好，非常淡雅，再加上美美的轱辘诗，这个帖子太棒了。@亦是金收礼开心{:4_199:}

红影 发表于 2023-4-4 10:37

樵歌 发表于 2023-4-4 09:40
读法如下：
三言：玉。裂瑶琴。是雅吟，声入画，亦如金。四言：玉裂瑶琴，琴是雅吟。吟声入画，画亦如金。 ...

瑶琴弹出金玉之声，不禁想到琵琶行里的“银瓶乍破水浆迸”，这么激烈的琴声倒是适合男士。
琴棋书画都是雅致的事，师兄拟了雅致的物件，却又带有雄壮的气势，这个轱辘诗很赞{:4_199:}

梦油 发表于 2023-4-4 10:49

山水之美，美在自然，美在天地间，怎一个美字了得！

樵歌 发表于 2023-4-4 12:24

庶民 发表于 2023-4-4 10:04
这样的玩法，洒家大赞。

昨天给你转了个请请笑纳
https://www.huachaowang.com/forum.php?mod=viewthread&tid=67734&extra=page%3D1

亦是金 发表于 2023-4-4 15:40

谢谢樵歌送的美帖！辛苦了！我得慢慢品！{:4_191:}

樵歌 发表于 2023-4-4 18:56

红影 发表于 2023-4-4 10:37
瑶琴弹出金玉之声，不禁想到琵琶行里的“银瓶乍破水浆迸”，这么激烈的琴声倒是适合男士。
琴棋书画都是 ...

被师妹得怪不好意思了{:4_173:}

樵歌 发表于 2023-4-4 19:20

亦是金 发表于 2023-4-4 15:40
谢谢樵歌送的美帖！辛苦了！我得慢慢品！

凑合收呗，{:4_173:}

樵歌 发表于 2023-4-4 19:21

梦油 发表于 2023-4-4 10:49
山水之美，美在自然，美在天地间，怎一个美字了得！

他们都是做音画高手，我只能抄红影师妹的作业{:4_173:}

樵歌 发表于 2023-4-4 19:23

红影 发表于 2023-4-4 10:33
进来便看到师兄的背景图选得很好，非常淡雅，再加上美美的轱辘诗，这个帖子太棒了。@亦是金收礼开心{:4_1 ...

要实出轱辘字，只好选淡雅的图图{:4_204:}

樵歌 发表于 2023-4-4 19:24

朝云暮雨 发表于 2023-4-4 10:16
这个像八卦阵。。

哈哈，还通阴阳五行哈{:4_173:}

梦油 发表于 2023-4-4 21:07

樵歌 发表于 2023-4-4 19:21
他们都是做音画高手，我只能抄红影师妹的作业

你们都是高手。

红影 发表于 2023-4-4 21:37

樵歌 发表于 2023-4-4 18:56
被师妹得怪不好意思了

师兄的轱辘诗表达得就是这个意思吧，非常棒{:4_199:}

红影 发表于 2023-4-4 21:38

樵歌 发表于 2023-4-4 19:23
要实出轱辘字，只好选淡雅的图图

对的，我也觉得淡雅的背景更突出轱辘诗的效果呢，师兄的感觉很到位{:4_187:}

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

红影 发表于 2023-4-4 21:37
师兄的轱辘诗表达得就是这个意思吧，非常棒

好不好师兄心里有自知之明呢，{:4_173:}

樵歌 发表于 2023-4-5 13:15

红影 发表于 2023-4-4 21:38
对的，我也觉得淡雅的背景更突出轱辘诗的效果呢，师兄的感觉很到位

和师妹想法一样的。{:4_173:}

红影 发表于 2023-4-5 21:25

樵歌 发表于 2023-4-5 13:14
好不好师兄心里有自知之明呢，

是师兄写的啊，排篇布局师兄肯定最知道呢{:4_173:}

查看完整版本: 给亦是金转个轱辘