论坛 › 古风雅韵 › 给朝云暮雨转个轱辘

樵歌 发表于 2023-4-11 07:24

给朝云暮雨转个轱辘

<style>
#papa { left: -252px;top:120px; width: 1100px; height: 618px; background: gray url('https://pic.imgdb.cn/item/643498690d2dde5777c00978.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=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;
        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-11 07:25

读法：三言：雨。洗朝云，卧女神，游旦暮，楚山新。四言：雨洗朝云，云卧女神。神游旦暮，暮楚山新。五绝：新雨洗朝云，朝云卧女神。女神游旦暮，旦暮楚山新。七绝：楚山新雨洗朝云，雨洗朝云卧女神。云卧女神游旦暮，神游旦暮楚山新。

上海朝阳 发表于 2023-4-11 09:13

拜读樵歌的新作

小星世龙 发表于 2023-4-11 09:45

漂亮，制作精细，点赞！

羽衣 发表于 2023-4-11 09:57

新颖的制作，漂亮，老师高才。{:4_204:}{:4_204:}

梦油 发表于 2023-4-11 09:59

背景画面太美了，几只大雁在空中翱翔，使整个画面都有了生气。

红影 发表于 2023-4-11 10:08

师兄好漂亮的轱辘诗，朝云暮雨的名字嵌入得很顺畅。将神话故事和云儿的神女姿态表达得很完美{:4_187:}

红影 发表于 2023-4-11 10:09

一直觉得嵌入多字的轱辘诗更难，师兄却写得如此流畅自然，很赞。云儿收礼开心@朝云暮雨{:4_187:}

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

非常感谢，谢谢樵歌！！{:4_187:}

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

啊，太惊喜。哈哈哈{:4_204:}

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

樵歌 发表于 2023-4-11 07:25
读法：三言：雨。洗朝云，卧女神，游旦暮，楚山新。四言：雨洗朝云，云卧女神。神游旦暮，暮楚山新。五绝： ...

是诗意跟名字太帖切！！{:4_173:}

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

《朝云暮雨》是一首我最喜欢的歌，一直认为是为我写的，其中有一句：你是巫峡牵不住的云烟把我守候成十二座痴心的山
你是长江钓不完的碧雪
只让我在蓑衣里编织着从前

……

对我来说，很有意义！！{:4_204:}

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

红影 发表于 2023-4-11 10:09
一直觉得嵌入多字的轱辘诗更难，师兄却写得如此流畅自然，很赞。云儿收礼开心@朝云暮雨

谢谢红影！

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

谢谢，收了，能不能给我复制出代码。。{:4_173:}搬家去欣赏，哈哈哈

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

上海朝阳 发表于 2023-4-11 09:13
拜读樵歌的新作

谢谢朝阳来读{:4_190:}

樵歌 发表于 2023-4-11 13:30

小星世龙 发表于 2023-4-11 09:45
漂亮，制作精细，点赞！

谬赞了哈。{:4_190:}

樵歌 发表于 2023-4-11 13:31

羽衣 发表于 2023-4-11 09:57
新颖的制作，漂亮，老师高才。

感谢才女抬爱，见笑了哈。{:4_190:}

樵歌 发表于 2023-4-11 13:33

梦油 发表于 2023-4-11 09:59
背景画面太美了，几只大雁在空中翱翔，使整个画面都有了生气。

这可是小弟俺抄红影的作业呢{:4_189:}

樵歌 发表于 2023-4-11 13:35

红影 发表于 2023-4-11 10:08
师兄好漂亮的轱辘诗，朝云暮雨的名字嵌入得很顺畅。将神话故事和云儿的神女姿态表达得很完美

是人家名字诗意盎然，师兄没凑好呢{:4_187:}

樵歌 发表于 2023-4-11 13:37

红影 发表于 2023-4-11 10:09
一直觉得嵌入多字的轱辘诗更难，师兄却写得如此流畅自然，很赞。云儿收礼开心@朝云暮雨

这不一直在师妹的指引下才勉强完成的么，图图也是抄了师妹的许多作业。{:4_173:}

查看完整版本: 给朝云暮雨转个轱辘