【三九消寒】第二天 · 亭

红影

三九用联：临亭相思昵浓送恬音
　　2024-1-10 文字：红影


路边的古老长亭 如一位老者
见证了各种痛入心扉的人间离情
故人乘舟远去 当帆影融入天际
含笑挥手 瞬间转化成泣声

有多少情义在唇边 默念不停
得意小字此后念与谁人听
人说知音难觅 如此心灵相契
却变做一场易碎的各自飘零

山高水远 此去天涯共月明
人世间变幻莫测 用浓情熬煮的
烟火气息 终如泡影 无形
默默观望的只有天边月 眼前亭

红影

和师兄选了相似的话题和歌曲，已经写完了，所以不想改了

梦油

长亭外 古道边 芳草碧连天……以《送别》作为这首诗的背景音乐再合适不过了。

庶民

这个诗歌用背景，是代码还是图片来？

红影

梦油 发表于 2024-1-10 11:04
长亭外 古道边 芳草碧连天……以《送别》作为这首诗的背景音乐再合适不过了。

是啊，看到这个亭字，特别容易想到这首著名歌曲呢

红影

庶民 发表于 2024-1-10 11:14
这个诗歌用背景，是代码还是图片来？

是代码，代码里也加了点小图。

樵歌

红影 发表于 2024-1-10 10:28
和师兄选了相似的话题和歌曲，已经写完了，所以不想改了

非常之好!

樵歌

师妹这首惜别之情浓烈，比我那生硬的说教感慨的好！

樵歌

我在网易去搜索“送别”就没找到女声和童声的

红影

樵歌 发表于 2024-1-10 13:27
非常之好!

其实我猜师兄也会选这个主题，本来想赶紧先发，但我写得太慢了

红影

樵歌 发表于 2024-1-10 13:30
师妹这首惜别之情浓烈，比我那生硬的说教感慨的好！

哪里啊，师兄的那首更大气，我这个格局小了。

红影

樵歌 发表于 2024-1-10 13:31
我在网易去搜索“送别”就没找到女声和童声的

这两个字为名的歌曲十分多啊，随便找个就是不同版本的呢。

梦油

红影 发表于 2024-1-10 12:42
是啊，看到这个亭字，特别容易想到这首著名歌曲呢

我也很喜欢这首歌。

庶民

红影 发表于 2024-1-10 12:42
是代码，代码里也加了点小图。

可以把代码给我吗？我也试试参与一i下

挑兮达兮

小字，画面，歌曲融合的恰到好处，点赞！很喜欢李叔同的《送别》。再听，潸然。送别的创作背后有一个凄美的故事。

小辣椒

打开页面首先听到美丽的童声

小辣椒

跟着后面的女声再看美丽的文字，亲爱的，好文采

红影

梦油 发表于 2024-1-10 15:06
我也很喜欢这首歌。

是的，这首歌特别好听。

红影

庶民 发表于 2024-1-10 11:14
这个诗歌用背景，是代码还是图片来？

1. <style>
   
2. #papa {
   
3.         width: 640px;       
   
4.         min-height: 1120px;
   
5.         padding: 40px;
   
6.         box-sizing: border-box;
   
7.         border-radius: 12px;
   
8.         box-shadow: 0 0 8px #000;
   
9.         position: relative;
   
10.         margin: 60px auto 80px auto;
    
11.         top: 0px;
    
12.         display: grid; user-select: none;
    
13.         place-items: center;
    
14.         user-select: none;
    
15. }
    
16. #tit {
    
17.         position: absolute;
    
18.         left: 175px;
    
19.         top: 400px;
    
20.         font: bold 20px/26px 'FangSong',serif;
    
21.         color: Sienna;
    
22. }
    
23. #papa::before, #papa::after {
    
24.         position: absolute;
    
25.         content: '';
    
26. }
    
27. #papa::before {
    
28.         left: 10px;
    
29.         top: 10px;
    
30.         right: 10px;
    
31.         bottom: 10px;
    
32.         border: 2px dashed Brown;
    
33.         border-radius: inherit;
    
34. }
    
35. #papa::after {
    
36.         content: '三九消寒第二天 亭 ';
    
37.         padding: 10px 40px 10px 10px;
    
38.         left: -10px;
    
39.         top: 20px;
    
40.         border-radius: 10px 0 0 10px;
    
41.         background: Sienna;
    
42.         opacity: .85;
    
43.         font: bold 16px/24px sans-serif;
    
44.         color: white;
    
45.         clip-path: polygon(0 0,100% 0,90% 50%, 100% 100%, 0 100%);
    
46. }
    
47. #pic {
    
48.         position: absolute;
    
49.         left: 70px;
    
50.         top: 90px;
    
51.         width: 500px;
    
52.         height: 260px;
    
53. }
    
54. .mpic { position: absolute; right: -10px; bottom: -10px; width: 300px; height: 183px; }
    
55. .mpic1 { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; opacity: .35;
    
56.         background: url('https://pic.imgdb.cn/item/647c033ef024cca17313a454.gif'); }
    
57. @keyframes swing { from { transform: rotate(3deg); } to { transform: rotate(-2deg); } }
    
58. </style>
    
59. 
    
60. <div id="papa">
    
61.        <div class="mpic1"></div>
    
62.        <img id="pic" src="https://pic.imgdb.cn/item/6599fbd5871b83018ac37069.jpg" alt="" />
    
63.        <img src="https://pic.imgdb.cn/item/6482db5b1ddac507ccaa9ddd.gif" alt="" class="mpic" />
    
64.         <div id="tit">三九用联：临亭相思昵浓送恬音<br>
    
65. 　　2024-1-10  文字：红影<br><br><br>
    
66. 路边的古老长亭 如一位老者<br>
    
67. 见证了各种痛入心扉的人间离情<br>
    
68. 故人乘舟远去 当帆影融入天际<br>
    
69. 含笑挥手 瞬间转化成泣声<br><br>
    
70. 
    
71. 有多少情义在唇边 默念不停<br>
    
72. 得意小字此后念与谁人听<br>
    
73. 人说知音难觅  如此心灵相契<br>
    
74. 却变做一场易碎的各自飘零<br><br>
    
75. 
    
76. 山高水远  此去天涯共月明<br>
    
77. 人世间变幻莫测 用浓情熬煮的<br>
    
78. 烟火气息 终如泡影 无形<br>
    
79. 默默观望的只有天边月 眼前亭<br><br>
    
80. 
    
81. </div><br>
    
82. 
    
83. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2037960352.mp3" loop autoplay></audio>
    
84. <script >
    
85. (function() {
    
86.         (function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 20px; left: 50%; transform: translateX(-50%);',playerCode: `<style>#mplayer {position: absolute;display: grid;grid-template-areas: 'cur btnplay dur''prog prog prog';gap: 8px 2px;place-items: end center;color: var(--color);font: normal 16px sans-serif;z-index: 999;--ww: 240px;--color: SaddleBrown;--track: hsla(90,100%,95%,.65);--prog: linear-gradient(90deg,hsla(90,30%,50%,.55),hsla(0,100%,50%,.75),hsla(180,100%,50%,.65));}#cur { grid-area: cur; color: var(--color); }#dur { grid-area: dur; color: var(--color); }#btnplay {--dis1: block;--dis2: none;grid-area: btnplay;width: 35px;height: 35px;border: 3px solid var(--color);border-radius: 50%;opacity: .95;cursor: pointer;transition: .3s;position: relative;}#btnplay:hover { opacity: 1; box-shadow: 0 0 5px var(--color), inset 0 0 5px var(--color); }#btnplay::before, #btnplay::after {position: absolute;content: '';width: 100%;height: 100%;background: var(--color);}#btnplay::before { display: var(--dis1); clip-path: polygon(35% 30%, 75% 50%, 35% 70%); }#btnplay::after {display: var(--dis2);clip-path: polygon(35% 30%, 45% 30%, 45% 70%, 35% 70%, 55% 70%, 65% 70%, 65% 30%, 55% 30%, 55% 70%, 35% 70%);}#prog {--xx: 0px;grid-area: prog;width: var(--ww);height: 4px;background: var(--track);position: relative;display: grid;place-items: center;}#prog::before, #prog::after { position: absolute; content: ''; }#prog::before {left: 0;width: var(--xx);height: 100%;border-radius: 6px;background: var(--prog);}#prog::after {left: calc(var(--xx) - 12px);opacity: .85;width: 16px;height: 16px;background: radial-gradient(transparent 2px, teal 0, black);border-radius: 50%;cursor: pointer;}#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(90, 50%, 50%, .45), hsla(0, 100%, 50%, .75));position: absolute;font: bold 1.0em serif;color: rgba(160,82,45, .95);white-space: pre;-webkit-background-clip: text; z-index: 1000;}#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}@keyframes cover1 { from { width: 0; } to { width: 100%; } }@keyframes cover2 { from { width: 0; } to { width: 100%; } }</style><div id="lrc" data-lrc="　">　</div><div id="mplayer"><span id="btnplay"></span><span id="prog"></span><span id="cur">00:00</span><span id="dur">00:00</span></div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;let mKey = 0, mFlag = true, mDrag = false;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();aud.addEventListener('timeupdate', () => {cur.innerText = toMin(aud.currentTime);dur.innerText = toMin(aud.duration);if(mDrag===false) prog.style.setProperty('--xx', aud.currentTime * prog.offsetWidth / aud.duration + 'px');for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr[j][0]) {cKey = j;if (mKey === j) showLrc(data.lrcAr[j][2]);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());prog.onmousedown = (e) => mDrag = true;prog.onmousemove = (e) => { if(mDrag) prog.style.setProperty('--xx',e.offsetX + 'px'); };prog.onmouseup = (e) => {aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;mDrag = false;};let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),btnplay.style.setProperty('--dis1','block'), btnplay.style.setProperty('--dis2','none')): (lrc.style.setProperty('--state','running'),btnplay.style.setProperty('--dis1','none'), btnplay.style.setProperty('--dis2','block'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr[mKey][1];lrc.dataset.lrc = lrcAr[mKey][1].replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr[j][0]) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr[mKey][2] - (aud.currentTime - data.lrcAr[mKey][0]);showLrc(time);};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;}};mkPlayer.HCPlayer = playCode;})(this);
    
87.         let lrcAr = [
    
88.                 [0.23, "送别 - 姚璎格", 2],
    
89.         ];
    
90.         HCPlayer({
    
91.                 lrcAr: lrcAr,
    
92.                 lrc_css: 'left: calc(50% - 60px); bottom: 64px; --bg: rgba(160,82,45, .95);',
    
93.                 player_css: 'left: 190px; bottom: 100px;--track: hsla(0,0%,80%,.95); --prog: linear-gradient(90deg,hsla(120,100%,50%,.55),hsla(0,100%,50%,.55),hsla(120,100%,50%,.65));',
    
94.         });
    
95. })();
    
96. </script>

复制代码

红影

庶民 发表于 2024-1-10 15:30
可以把代码给我吗？我也试试参与一i下

这个帖子的代码发给你了