朝云暮雨 发表于 2023-4-11 10:34
非常感谢，谢谢樵歌！！
不客气，没太凑好，见笑哈{:4_190:}
朝云暮雨 发表于 2023-4-11 10:34
啊，太惊喜。哈哈哈
还给你赠送了几枚章子挂上就更美啦{:4_173:}
朝云暮雨 发表于 2023-4-11 10:48
谢谢，收了，能不能给我复制出代码。。搬家去欣赏，哈哈哈
<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 10:35
是诗意跟名字太帖切！！
还是个别有凑韵的痕迹，因为要兼顾绝的格，平仄的位置不能动，所以好多想用的字都只好牺牲了{:4_173:}
朝云暮雨 发表于 2023-4-11 10:43
《朝云暮雨》是一首我最喜欢的歌，一直认为是为我写的，其中有一句：你是巫峡牵不住的云烟把我守候成十二座 ...
我还不知道有“朝云暮雨”这首歌，我云找找，不然换上试试
朝云暮雨 发表于 2023-4-11 10:43
《朝云暮雨》是一首我最喜欢的歌，一直认为是为我写的，其中有一句：你是巫峡牵不住的云烟把我守候成十二座 ...
已经换了音乐“朝云暮雨”了，确实好听，我也喜欢{:4_181:}
朝云暮雨 发表于 2023-4-11 10:48
谢谢，收了，能不能给我复制出代码。。搬家去欣赏，哈哈哈
看回复，已经给复制下来了。代码是马黑黑创作的，我只是从红影那抄来的。
谢谢樵歌，这歌，听得，会让我泪流满面.....
第一次见这样轱辘，稳稳妥妥的，轱辘的老好看。
不由得赞叹啊，花潮卧虎藏龙啊。
樵歌 发表于 2023-4-11 13:33
这可是小弟俺抄红影的作业呢
真是一件惊人的杰作。
朝云暮雨 发表于 2023-4-11 10:44
谢谢红影！
轱辘里面有云儿的名字呢，是为云儿量身定做的礼物{:4_187:}
樵歌 发表于 2023-4-11 13:35
是人家名字诗意盎然，师兄没凑好呢
云儿的名字很美，师兄的轱辘更美{:4_187:}
樵歌 发表于 2023-4-11 13:37
这不一直在师妹的指引下才勉强完成的么，图图也是抄了师妹的许多作业。
这个还是黑黑的代码啊，咱们都是抄的作业{:4_173:}
朝云暮雨 发表于 2023-4-11 14:03
谢谢樵歌，这歌，听得，会让我泪流满面.....
真是情细腻的姑娘啦{:4_173:}
一斛珠 发表于 2023-4-11 14:13
第一次见这样轱辘，稳稳妥妥的，轱辘的老好看。
以前也凑好上百个轱辘，都是干巴巴的文字，马黑黑来后，帮我们用代码把文字弄圆了，还能上图配音，真得谢谢马黑@马黑黑
一斛珠 发表于 2023-4-11 14:13
不由得赞叹啊，花潮卧虎藏龙啊。
都是些纸老虎{:4_170:}
红影 发表于 2023-4-11 19:17
云儿的名字很美，师兄的轱辘更美
主要是名字美{:4_190:}
红影 发表于 2023-4-11 19:17
这个还是黑黑的代码啊，咱们都是抄的作业
就抄作业，师兄也是后进末学{:4_189:}
梦油 发表于 2023-4-11 15:09
真是一件惊人的杰作。
老哥哥这个评价，让人受宠若惊呢{:4_190:}