【中伏消暑】第十六天 羽 轱辘诗赠千羽
<style>#papa { left: -252px;top:120px; width: 1100px; height: 618px; background: gray url('https://pic.imgdb.cn/item/62f3c6dd16f2c2beb194d1e3.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=304849.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_173:} {:4_187:}{:4_187:}{:4_187:}赶上红影友友的精彩新作 三言：雨，落千山，月静闲。环翠羽，一帘烟。
四言：雨落千山，山月静闲。闲环翠羽，羽一帘烟。
五绝：烟雨落千山，千山月静闲。静闲环翠羽，翠羽一帘烟。
七绝：一帘烟雨落千山，雨落千山月静闲。山月静闲环翠羽，闲环翠羽一帘烟。。。。。中国水墨画的雅致，一言难尽，红影写的太好。高赞~！{:4_204:} 青青子衿 发表于 2022-8-10 23:20
三言：雨，落千山，月静闲。环翠羽，一帘烟。
四言：雨落千山，山月静闲。闲环翠羽，羽一帘烟。
五绝：烟 ...
多谢子衿高赞，只是凑字完成作业呢{:4_173:} @千羽 诗句和帖子一样精美雅致，并富有深意，读之似有所得。配乐与图意、题意贴合，真乃佳作！ 上来看到有礼物，高兴中……{:4_187:}{:4_205:} 背景画面的色调好爽，太养眼了{:4_185:} 影儿的轱辘诗写得真好，三言，四言，五绝，七绝句句贴切又上口，俺收藏了，慢慢体味{:4_187:} 很有高科技的感觉，轱辘诗的转换和变色好亮眼，影儿棒棒哒{:4_179:} 精致的礼物，影儿辛苦了，谢谢了哦{:4_179:} 马黑黑 发表于 2022-8-10 23:57
诗句和帖子一样精美雅致，并富有深意，读之似有所得。配乐与图意、题意贴合，真乃佳作！
多谢黑黑高赞，更谢你的代码，这个直接套用了你的代码呢{:4_187:} 千羽 发表于 2022-8-11 19:29
上来看到有礼物，高兴中……
羽儿的名字好，真好消寒字里有呢，影子完成作业和送礼一举两得了{:4_173:} 千羽 发表于 2022-8-11 19:33
背景画面的色调好爽，太养眼了
羽儿喜欢就好{:4_183:} 千羽 发表于 2022-8-11 19:37
影儿的轱辘诗写得真好，三言，四言，五绝，七绝句句贴切又上口，俺收藏了，慢慢体味
凑得有点赶，不太好，被羽儿说的都不好意思了{:4_173:} 千羽 发表于 2022-8-11 19:40
很有高科技的感觉，轱辘诗的转换和变色好亮眼，影儿棒棒哒
高科技是黑黑的功劳，这个代码是直接套用的黑黑的代码呢{:4_173:} 本帖最后由 加林森 于 2022-8-11 22:43 编辑
意境真好，一片宁静！赞！ 红影 发表于 2022-8-11 22:28
多谢黑黑高赞，更谢你的代码，这个直接套用了你的代码呢
{:4_190:}