【菩萨蛮】回文词TO 朝云暮雨

樵歌发表于 2023-4-15 21:10

樵歌发表于 2023-4-15 21:11

暮春伤别离津渡，渡津离别伤春暮。朝露滴潇潇，潇潇滴露朝。雨霁归静女，女静归霁雨。云幻梦惊人，人惊梦幻云。

樵歌发表于 2023-4-15 21:14

上海朝阳 发表于 2023-4-15 21:23

欣赏樵歌的制作文笔

马黑黑 发表于 2023-4-15 22:18

代码我整理了一下，主要是修正小错误、让右边的文本更易于阅读：

<style>#beijing {
margin: 80px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: lightblue url('https://pic.imgdb.cn/item/643a9c660d2dde577780ac68.jpg') center/cover no-repeat;
box-shadow: 3px 3px 20px #000;
overflow: hidden;
user-select: none;
position: relative;
}

#mplayer {
position: absolute;
left: 342px;
bottom: 40px;
width: fit-content;
height: fit-content;
display: flex;
align-items: center;
gap: 8px;
z-index: 9;
}

#btnwrap {
position: relative;
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 50%;
background: #ccc linear-gradient(to top right, rgba(255, 0, 0, .75), rgba(0, 255, 0, .75));
cursor: pointer;
}

#btnwrap:hover {
background: #000 linear-gradient(to top right, rgba(255, 0, 0, .75), rgba(0, 255, 0, .75));
}

#btnplay {
width: 20px;
height: 20px;
background: #ccc;
clip-path: polygon(0 0, 0% 100%, 100% 50%);
}

#btnpause {
width: 2px;
height: 20px;
border-style: solid;
border-width: 0px 4px;
border-color: transparent #eee;
display: none;
}

#prog {
width: 200px;
height: 2px;
background: #ccc linear-gradient(to right, red, orange, green, tomato) no-repeat;
background-size: 1px 2px;
cursor: pointer;
position: relative;
}

#prog::before {
position: absolute;
content: '';
top: -7px;
width: inherit;
height: 15px;
}

#prog:hover::before {
background: rgba(0, 200, 200, .15);
}

#tmsg {
font: normal 16px sans-serif;
color: #FDFDBD;
}

#lrc {
position: absolute;
left: 392px;
bottom: 80px;
font: bold 1.3em sans-serif;
color: #8CB9FB;
text-shadow: 1px 1px 2px #000;
text-align: center;
z-index: 8;
}

#lrc:hover,
#tmsg:hover {
color: snow;
}

.txt3d {
position: absolute;
left: 692px;
top: 180px;
width: 380px;
height: 280px;
line-height: 32px;
font-family: '微软雅黑', '黑体', sans-serif;
font-size: 1.6rem;
color: #8CB9FB;
letter-spacing: 4px;
text-shadow: 1px 1px 2px #000;
}

</style>

<div id="beijing">
<div id="mplayer">
<span id="btnwrap">
<span id="btnplay"></span>
<span id="btnpause"></span>
</span>
<span id="prog"></span>
<span id="tmsg">00:00 | 00:00</span>
</div>
<div id="lrc">lrc歌词</div>
<p class ="txt3d">菩萨蛮TO朝云暮雨<br><br>　暮春伤别离津渡，<br>　渡津离别伤春暮。<br>　朝露滴潇潇，<br>　潇潇滴露朝。<br><br>　雨霁归静女，<br>　女静归霁雨。<br>　云幻梦惊人，<br>　人惊梦幻云。<br>
</div>

<script>

let lrcAr = [ ['0.00','巫山归梦'], ['280.00','音阙诗听'] ];
let aud = new Audio();
aud.src='https://music.163.com/song/media/outer/url?id=1996268501.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.backgroundSize = prog.offsetWidth * aud.currentTime / aud.duration + 'px 2px';
tmsg.innerText = toMin(aud.duration) + ' | ' + toMin(aud.currentTime);
for(j=0; j<lrcAr.length; j++) { if(aud.currentTime >= lrcAr) lrc.innerText = lrcAr; } });
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
let toMin = (val) => { if (!val) return '00:00'; val = Math.floor(val); let min = parseInt(val / 60), sec = parseFloat(val % 60); if(min < 10) min = '0' + min; if(sec < 10) sec = '0' + sec; return min + ':' + sec; };
</script>

千羽发表于 2023-4-15 23:01

樵歌老师的音画已经熟能生巧了，必须点赞送花花{:4_187:}{:4_199:}

千羽发表于 2023-4-15 23:04

樵歌发表于 2023-4-15 21:11
暮春伤别离津渡，渡津离别伤春暮。朝露滴潇潇，潇潇滴露朝。雨霁归静女，女静归霁雨。云幻梦惊人， ...

字字珠玑，樵歌老师神来之笔啊{:4_187:}

红影发表于 2023-4-15 23:52

马黑黑发表于 2023-4-15 22:18
代码我整理了一下，主要是修正小错误、让右边的文本更易于阅读：
看到黑黑的这个才发现，樵歌的代码里怎么类似div id= let 。。。btnstate =等等好多地方的空格都没了，给他代码的时候明明都有的，我还特地赶紧去查看了一下。这样居然也能帖子正常{:4_173:}

红影发表于 2023-4-15 23:54

哈，到帖子里一看，原来如此。怪不得{:4_173:}

红影发表于 2023-4-16 00:02

樵歌发表于 2023-4-15 21:11
暮春伤别离津渡，渡津离别伤春暮。朝露滴潇潇，潇潇滴露朝。雨霁归静女，女静归霁雨。云幻梦惊人， ...

师兄这个厉害了，不但嵌字，而且在固定位置上嵌字，更是增加了难度。在这样的难度下还能写成，而且这么优美，太厉害了{:4_199:}

朝云暮雨 发表于 2023-4-16 00:19

天呀，天呀，你太太太厉害了吧。哈哈{:4_173:}

朝云暮雨 发表于 2023-4-16 00:20

俺得拼命追。看能不能追上。哈000

朝云暮雨 发表于 2023-4-16 00:25

樵歌发表于 2023-4-15 21:11
暮春伤别离津渡，渡津离别伤春暮。朝露滴潇潇，潇潇滴露朝。雨霁归静女，女静归霁雨。云幻梦惊人， ...

词得太好，不回文的难道，还有就是把内在的伤痕都勾画得淋漓尽致。你理解得真通透。{:4_204:}

樵歌发表于 2023-4-16 07:03

朝云暮雨发表于 2023-4-16 00:19
天呀，天呀，你太太太厉害了吧。哈哈

云儿见笑了，比起琴棋书画来，俺小巫终于见大巫了{:4_187:}

樵歌发表于 2023-4-16 07:04

朝云暮雨发表于 2023-4-16 00:20
俺得拼命追。看能不能追上。哈000

这话正好倒过来说，俺才是拍马难及。

樵歌发表于 2023-4-16 07:08

朝云暮雨发表于 2023-4-16 00:25
词得太好，不回文的难道，还有就是把内在的伤痕都勾画得淋漓尽致。你理解得真通透。

不小心触动云儿伤心处，实在无心之举，{:4_185:}走过那那片雾霭，前面就是山明水秀，一片朗朗晴天，{:4_183:}

樵歌发表于 2023-4-16 07:37

马黑黑发表于 2023-4-15 22:18
代码我整理了一下，主要是修正小错误、让右边的文本更易于阅读：

谢谢啦{:4_176:}也许是在代码上替换图图和音乐时把行打乱了，我有时看到后就自行“修改”了，可能问题就出现在这{:4_189:}

樵歌发表于 2023-4-16 07:38

千羽发表于 2023-4-15 23:01
樵歌老师的音画已经熟能生巧了，必须点赞送花花

还时老问题，抄作业不认真{:4_189:}

樵歌发表于 2023-4-16 07:39

千羽发表于 2023-4-15 23:04
字字珠玑，樵歌老师神来之笔啊

千羽经常谬赞，这次更是如此{:4_187:}

樵歌发表于 2023-4-16 07:41

红影发表于 2023-4-15 23:52
看到黑黑的这个才发现，樵歌的代码里怎么类似div id= let 。。。btnstate =等等好多地方的空格都没了，给 ...

不知道怎么搞的，我是把音乐和图图添加后，就复制贴坛上了，居然没能出来，{:4_173:}

页: [1] 2 3 4

花潮论坛's Archiver

【菩萨蛮】回文词TO 朝云暮雨