【七绝】菊韵（三首）（冬约分茶代码）

巫山烟云

冬至约分茶

1

巫山烟云

<style>
#papa { left: -102px;top:120px; width: 1200px; height: 680px; background: gray url('https://img.wyc520.com.cn/data/attachment/forum/202512/10/132427k9eq0kqsldlwdsab.png')
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">2026贺迎新岁</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 = [
                [7,8,9,9],
                [10,11,12,12],
                [0,1,2,2],
                [3,4,5,5],
                [6,7,8,9,9],
                [9,10,11,12,12],
                [12,0,1,2,2],
                [2,3,4,5,5],
                [5,6,7,8,9,9],
                [8,9,10,11,12,12],
                [11,12,0,1,2,2],
                [1,2,3,4,5,5],
                [3,4,5,6,7,8,9,9],
                [6,7,8,9,10,11,12,12],
                [9,10,11,12,0,1,2,2],
                [12,0,1,2,3,4,5,5],
        ];
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=161114.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[x];
        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[idx]) spans[x].style.color = `rgb(${num(0,255)},${num(0,255)},${num(0,255)})`;
        sMsg.innerText = idx + 1;
}

function txtCircle() {
        let x = sentences[idx][step];
        spans[x].style.border = '1px solid purple';
        step ++;
        if(step > sentences[idx].length - 1) {
                step = 0;
                idx ++;
                if(idx > sentences.length - 1) idx = 0;
                txtColor();
        }
        setTimeout(txtCircle, 1500);
}
</script>

巫山烟云

玉玲珑

巫山烟云 发表于 2025-11-16 22:27
点评的这么仔细    最近写不出字来，就弄这一小花花草草，唉！！！哈哈哈

你继续弄，我继续收藏呵呵~~~

巫山烟云

玉玲珑 发表于 2025-11-16 22:31
你继续弄，我继续收藏呵呵~~~

也对也对

玉玲珑

巫山烟云 发表于 2025-11-16 22:33
也对也对

不是也对，是太对，非常对~~~

艾米莉

欣赏好绝！

巫山烟云

艾米莉 发表于 2025-11-16 22:56
欣赏好绝！

谢谢，晚上好这位姑娘！！

田间识字翁··

欣赏佳作

宇泽长安

开始写律诗了，一写三首，每首都有不一样的意境。
有空我也写一下。