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

樵歌

00:00 | 00:00

lrc歌词

菩萨蛮TO朝云暮雨

　暮春伤别离津渡，
　渡津离别伤春暮。
　朝露滴潇潇，
　潇潇滴露朝。

　雨霁归静女，
　女静归霁雨。
　云幻梦惊人，
　人惊梦幻云。

樵歌

暮春伤别离津渡，渡津离别伤春暮。朝露滴潇潇，潇潇滴露朝。

雨霁归静女，        女静归霁雨。云幻梦惊人，人惊梦幻云。

樵歌

<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(toright,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 rgba(206,225,253,0.8),2px 2px rgba(206,225,253,0.7),3px 3pxrgba(206,225,253,0.6),4px 4px rgba(206,225,253,0.4);

         }

         

         </style>

         <divid="beijing">

         <divid="mplayer"><span id="btnwrap"><spanid="btnplay"></span><span id="btnpause"></span></span><spanid="prog"></span><span id="tmsg">00:00 |00:00</span></div>

         <divid="lrc">lrc歌词</div>

         

         <pclass ="txt3d">菩萨蛮TO朝云暮雨<br><br>　暮春伤别离津渡，<br>　渡津离别伤春暮。<br>　朝露滴潇潇，<br>　潇潇滴露朝。<br><br>　雨霁归静女，<br>　女静归霁雨。<br>　云幻梦惊人，<br>　人惊梦幻云。<br>

         

         

         </div></div>

         

         <script>

         letlrcAr = [

         ['0.00','巫山归梦'],

         ['280.00','音阙诗听']

         ];

         letaud = 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[j][0]) lrc.innerText = lrcAr[j][1];

         }

         });

         letbtnstate = () => aud.paused ? (btnplay.style.display = 'block',btnpause.style.display = 'none') :

         

         (btnplay.style.display= 'none', btnpause.style.display = 'block');

         lettoMin = (val) => {

         if(!val) return '00:00';

         val= Math.floor(val);

         letmin = parseInt(val / 60), sec = parseFloat(val % 60);

         if(min< 10) min = '0' + min;

         if(sec< 10) sec = '0' + sec;

         returnmin + ':' + sec;

         }

         </script>

上海朝阳

欣赏樵歌的制作文笔

马黑黑

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

1. <style>#beijing {
   
2.     margin: 80px 0 0 calc(50% - 593px);
   
3.     width: 1024px;
   
4.     height: 640px;
   
5.     background: lightblue url('https://pic.imgdb.cn/item/643a9c660d2dde577780ac68.jpg') center/cover no-repeat;
   
6.     box-shadow: 3px 3px 20px #000;
   
7.     overflow: hidden;
   
8.     user-select: none;
   
9.     position: relative;
   
10. }
    
11. 
    
12. #mplayer {
    
13.     position: absolute;
    
14.     left: 342px;
    
15.     bottom: 40px;
    
16.     width: fit-content;
    
17.     height: fit-content;
    
18.     display: flex;
    
19.     align-items: center;
    
20.     gap: 8px;
    
21.     z-index: 9;
    
22. }
    
23. 
    
24. #btnwrap {
    
25.     position: relative;
    
26.     width: 36px;
    
27.     height: 36px;
    
28.     display: grid;
    
29.     place-items: center;
    
30.     border-radius: 50%;
    
31.     background: #ccc linear-gradient(to top right, rgba(255, 0, 0, .75), rgba(0, 255, 0, .75));
    
32.     cursor: pointer;
    
33. }
    
34. 
    
35. #btnwrap:hover {
    
36.     background: #000 linear-gradient(to top right, rgba(255, 0, 0, .75), rgba(0, 255, 0, .75));
    
37. }
    
38. 
    
39. #btnplay {
    
40.     width: 20px;
    
41.     height: 20px;
    
42.     background: #ccc;
    
43.     clip-path: polygon(0 0, 0% 100%, 100% 50%);
    
44. }
    
45. 
    
46. #btnpause {
    
47.     width: 2px;
    
48.     height: 20px;
    
49.     border-style: solid;
    
50.     border-width: 0px 4px;
    
51.     border-color: transparent #eee;
    
52.     display: none;
    
53. }
    
54. 
    
55. #prog {
    
56.     width: 200px;
    
57.     height: 2px;
    
58.     background: #ccc linear-gradient(to right, red, orange, green, tomato) no-repeat;
    
59.     background-size: 1px 2px;
    
60.     cursor: pointer;
    
61.     position: relative;
    
62. }
    
63. 
    
64. #prog::before {
    
65.     position: absolute;
    
66.     content: '';
    
67.     top: -7px;
    
68.     width: inherit;
    
69.     height: 15px;
    
70. }
    
71. 
    
72. #prog:hover::before {
    
73.     background: rgba(0, 200, 200, .15);
    
74. }
    
75. 
    
76. #tmsg {
    
77.     font: normal 16px sans-serif;
    
78.     color: #FDFDBD;
    
79. }
    
80. 
    
81. #lrc {
    
82.     position: absolute;
    
83.     left: 392px;
    
84.     bottom: 80px;
    
85.     font: bold 1.3em sans-serif;
    
86.     color: #8CB9FB;
    
87.     text-shadow: 1px 1px 2px #000;
    
88.     text-align: center;
    
89.     z-index: 8;
    
90. }
    
91. 
    
92. #lrc:hover,
    
93. #tmsg:hover {
    
94.     color: snow;
    
95. }
    
96. 
    
97. .txt3d {
    
98.     position: absolute;
    
99.     left: 692px;
    
100.     top: 180px;
     
101.     width: 380px;
     
102.     height: 280px;
     
103.     line-height: 32px;
     
104.     font-family: '微软雅黑', '黑体', sans-serif;
     
105.     font-size: 1.6rem;
     
106.     color: #8CB9FB;
     
107.     letter-spacing: 4px;
     
108.     text-shadow: 1px 1px 2px #000;
     
109. }
     
110. 
     
111. </style>
     
112. 
     
113. <div id="beijing">
     
114.         <div id="mplayer">
     
115.                 <span id="btnwrap">
     
116.                         <span id="btnplay"></span>
     
117.                         <span id="btnpause"></span>
     
118.                 </span>
     
119.                 <span id="prog"></span>
     
120.                 <span id="tmsg">00:00 | 00:00</span>
     
121.         </div>
     
122.         <div id="lrc">lrc歌词</div>
     
123.         <p class ="txt3d">菩萨蛮TO朝云暮雨<br><br>　暮春伤别离津渡，<br>　渡津离别伤春暮。<br>　朝露滴潇潇，<br>　潇潇滴露朝。<br><br>　雨霁归静女，<br>　女静归霁雨。<br>　云幻梦惊人，<br>　人惊梦幻云。<br>
     
124. </div>
     
125.        
     
126. <script>
     
127. 
     
128. let lrcAr = [ ['0.00','巫山归梦'], ['280.00','音阙诗听'] ];
     
129. let aud = new Audio();
     
130. aud.src='https://music.163.com/song/media/outer/url?id=1996268501.mp3';
     
131. aud.autoplay = true;
     
132. aud.loop = true;
     
133. btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
     
134. prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
     
135. aud.addEventListener('pause', () => btnstate());
     
136. aud.addEventListener('play',() => btnstate());
     
137. aud.addEventListener('timeupdate', () => {
     
138. prog.style.backgroundSize = prog.offsetWidth * aud.currentTime / aud.duration + 'px 2px';
     
139. tmsg.innerText = toMin(aud.duration) + ' | ' + toMin(aud.currentTime);
     
140. for(j=0; j<lrcAr.length; j++) { if(aud.currentTime >= lrcAr[j][0]) lrc.innerText = lrcAr[j][1]; } });
     
141. let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
     
142. 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; };
     
143. </script>

复制代码

千羽

樵歌老师的音画已经熟能生巧了，必须点赞送花花

千羽

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

字字珠玑，樵歌老师神来之笔啊

红影

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

看到黑黑的这个才发现，樵歌的代码里怎么类似div id= let 。。。btnstate =等等好多地方的空格都没了，给他代码的时候明明都有的，我还特地赶紧去查看了一下。这样居然也能帖子正常

红影

哈，到帖子里一看，原来如此。怪不得

红影

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

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

朝云暮雨

天呀，天呀，你太太太厉害了吧。哈哈

朝云暮雨

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

朝云暮雨

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

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

樵歌

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

云儿见笑了，比起琴棋书画来，俺小巫终于见大巫了

樵歌

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

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

樵歌

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

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

樵歌

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

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

樵歌

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

还时老问题，抄作业不认真

樵歌

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

千羽经常谬赞，这次更是如此

樵歌

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

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