给小文转个轱辘
<style>#papa { left: -252px;top:120px; width: 1100px; height: 618px; background: gray url('https://pic.imgdb.cn/item/647d61201ddac507cc507b7f.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=304682.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>
读法：三言：碧。海斑澜，笔小娴，文摄画，点苍山。四言：碧海斑澜，澜笔小娴。娴文摄画，画点苍山。五绝：山碧海斑澜，斑澜笔小娴。小娴文摄画，摄画点苍山。七绝：点苍山碧海斑澜，碧海斑澜笔小娴。澜笔小娴文摄画，娴文摄画点苍山。
注：海，这里指洱海，苍山洱海为云南著名风景区。 @小文 找个小板凳旁听旁看 哎呀呀，这是樵歌的绝活儿{:4_199:} 脑细胞没浪费，轱辘的真好看啊。 实在静不下来，不然照猫个画个虎试试。{:4_189:} 师兄的轱辘里有嵌名，还点出了地名等信息，真不容易，很赞{:4_199:} 底图也取得很漂亮，师兄的帖子越做越棒了{:4_187:} 来欣赏老师的精彩，好帖。{:4_187:} 樵歌 发表于 2023-6-5 12:47
读法：三言：碧。海斑澜，笔小娴，文摄画，点苍山。四言：碧海斑澜，澜笔小娴。娴文摄画，画点苍山。五绝： ...
来研究下，老师大才。{:4_204:} 樵歌 发表于 2023-6-5 12:47
读法：三言：碧。海斑澜，笔小娴，文摄画，点苍山。四言：碧海斑澜，澜笔小娴。娴文摄画，画点苍山。五绝： ...
看得出来，樵歌朋友的作品是费了脑子的，是辛勤（脑力）劳动的结晶。 看到帖子，泪湿双眸。苍洱之间，是我潜心攻画之地，查先生的金庸书楼我参与了顶楼部分古建工程的设计与施工。今楼在人不在，令人感慨良多。苍山脚下，观音塘为一尼姑庵，小文就住旁边，天天可听她们念经理佛。信所左路中间，有著名的熊胆生产厂家，蛇胆川贝液就产自这个老字号的厂子。谢谢师叔，辛苦了！敬酒一杯！{:4_191:} 马黑黑 发表于 2023-6-5 12:51
找个小板凳旁听旁看
您坐上首席，俺旁听{:4_191:}！ 小文好好收藏起来！{:4_180:} 小文 发表于 2023-6-5 19:30
您坐上首席，俺旁听！
俺可不能反客为主{:4_170:} 马黑黑 发表于 2023-6-5 19:31
俺可不能反客为主
很应该的，南蛮都是这样不讲理数，谁有本事谁上座的。先生，应了噻{:4_180:}！ 梦油 发表于 2023-6-5 16:52
看得出来，樵歌朋友的作品是费了脑子的，是辛勤（脑力）劳动的结晶。
极认同。师叔费心了，感动！ 小文 发表于 2023-6-5 19:34
很应该的，南蛮都是这样不讲理数，谁有本事谁上座的。先生，应了噻！
不应{:4_170:} 小文 发表于 2023-6-5 19:35
极认同。师叔费心了，感动！
小文朋友多才多艺。{:4_171:}