【一九消寒】第四天 · 思

红影

一九用联：客种秋思语怨幽庭枊
　　2023-12-25 文字：红影


碧空如洗 思念的云
被拉得极细极薄 恍若透明
虫鸣蝉唱一霎时退潮
阶前的青苔沉默
寂寞秋庭 辽远空旷 无声无息

最初的韵脚 兀自挥洒笔墨
毫无成章的希望
破门而入的寒凉 收割着希冀
飞雪未至 心便空白了一块

露从今夜白 誓言 系不住
天边 远去的雁脚
寒风里的枫叶渐渐红了眼眶
无法料知时光另一头的境况
任一壶思念 在深夜沸腾

红影

去搜《思》，真有这个曲子。正好用帖子里

红影

继续混，减少点欠债

冬天的雨

美女辛苦，双面齐下，才女就这样全能

小九

看你们写的字，真的很享受。

梦油

其实，有一个能够思念的人那也是一种幸福。

红影

冬天的雨 发表于 2023-12-28 23:48
美女辛苦，双面齐下，才女就这样全能

都是在硬凑数呢，让冬小雨见笑了

红影

小九 发表于 2023-12-29 11:18
看你们写的字，真的很享受。

九儿一起来玩啊

红影

梦油 发表于 2023-12-29 11:23
其实，有一个能够思念的人那也是一种幸福。

是啊，只是思念很苦。

小九

红影 发表于 2023-12-29 11:48
九儿一起来玩啊

我已经整不来那个音画代码了

红影

小九 发表于 2023-12-29 19:18
我已经整不来那个音画代码了

可以写文字啊，不一定要做成音画呢。你要代码的话，我可以这里复制给你

小九

红影 发表于 2023-12-29 19:48
可以写文字啊，不一定要做成音画呢。你要代码的话，我可以这里复制给你

我明天来试试，你把代码给我，我自己都没有底气了

红影

小九 发表于 2023-12-29 21:33
我明天来试试，你把代码给我，我自己都没有底气了

1. <style>
   
2. #papa {
   
3.         width: 640px;       
   
4.         min-height: 1150px;
   
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/658a7b7dc458853aefe209b7.jpg" alt="" />
    
63.        <img src="https://pic.imgdb.cn/item/6482db5b1ddac507ccaa9ddd.gif" alt="" class="mpic" />
    
64.         <div id="tit">一九用联：客种秋思语怨幽庭枊<br>
    
65. 　　2023-12-25  文字：红影<br><br><br>
    
66. 碧空如洗 思念的云<br>
    
67. 被拉得极细极薄 恍若透明<br>
    
68. 虫鸣蝉唱一霎时退潮<br>
    
69. 阶前的青苔沉默<br>
    
70. 寂寞秋庭 辽远空旷 无声无息<br><br>
    
71. 
    
72. 最初的韵脚 兀自挥洒笔墨<br>
    
73. 毫无成章的希望<br>
    
74. 破门而入的寒凉 收割着希冀<br>
    
75. 飞雪未至 心便空白了一块<br><br>
    
76. 
    
77. 露从今夜白 誓言 系不住<br>
    
78. 天边 远去的雁脚<br>
    
79. 寒风里的枫叶渐渐红了眼眶<br>
    
80. 无法料知时光另一头的境况<br>
    
81. 任一壶思念 在深夜沸腾<br>
    
82. 
    
83. </div><br>
    
84. 
    
85. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=392129.mp3" loop autoplay></audio>
    
86. <script >
    
87. (function() {
    
88.         (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 2.4em sans-serif;color: hsl(0, 10%, 90%);white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));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);
    
89.         let lrcAr = [
    
90.                 [2, "　", 3],
    
91.         ];
    
92.         HCPlayer({
    
93.                 lrcAr: lrcAr,
    
94.                 lrc_css: 'left: calc(50% - 90px); bottom: 15px; --bg: linear-gradient(hsla(100, 100%, 70%, .35),hsla(120, 100%, 50%, .55));',
    
95.                 player_css: 'left: 190px; bottom: 90px;--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));',
    
96.         });
    
97. })();
    
98. </script>

复制代码

红影

小九 发表于 2023-12-29 21:33
我明天来试试，你把代码给我，我自己都没有底气了

只要修改文字和音乐就行了，别的都不用动。

小九

红影 发表于 2023-12-29 21:52

辛苦影子了，谢谢

红影

小九 发表于 2023-12-30 07:06
辛苦影子了，谢谢

这个是以前的封装代码，现在黑黑有更简单的呢，我也懒得改了，就用这个了