红影 发表于 2023-12-30 22:10

[一九消寒小结]——客种秋思语怨幽庭柳

<style>
#papa {
        width: 640px;       
        min-height: 5460px;
        padding: 40px;
        box-sizing: border-box;
        border-radius: 12px;
        box-shadow: 0 0 8px #000;
        position: relative;
        margin: 60px auto 80px auto;
      top: 0px;
        display: grid; user-select: none;
      place-items: center;
      user-select: none;
}
#tit {
        position: absolute;
        left: 175px;
        top: 400px;
        font: bold 20px/26px 'FangSong',serif;
        color: Sienna;
}
#tit1 {
        font: bold 24px/26px 'FangSong',serif;
        color: Maroon;
}
#papa::before, #papa::after {
        position: absolute;
        content: '';
}
#papa::before {
        left: 10px;
        top: 10px;
        right: 10px;
        bottom: 10px;
        border: 2px dashed Brown;
        border-radius: inherit;
}
#papa::after {
        content: '一九消寒第九天 柳 ';
        padding: 10px 40px 10px 10px;
        left: -10px;
        top: 20px;
        border-radius: 10px 0 0 10px;
        background: Sienna;
        opacity: .85;
        font: bold 16px/24px sans-serif;
        color: white;
        clip-path: polygon(0 0,100% 0,90% 50%, 100% 100%, 0 100%);
}
#pic {
        position: absolute;
        left: 70px;
        top: 90px;
        width: 500px;
        height: 260px;
}
.mpic { position: absolute; right: -10px; bottom: -10px; width: 300px; height: 183px; }
.mpic1 { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; opacity: .35;
      background: url('https://pic.imgdb.cn/item/647c033ef024cca17313a454.gif'); }
@keyframes swing { from { transform: rotate(3deg); } to { transform: rotate(-2deg); } }
</style>

<div id="papa">
       <div class="mpic1"></div>
       <img id="pic" src="https://pic.imgdb.cn/item/658a7b7dc458853aefe209b7.jpg" alt="" />
       <img src="https://pic.imgdb.cn/item/6482db5b1ddac507ccaa9ddd.gif" alt="" class="mpic" />
        <div id="tit">一九用联：客种秋思语怨幽庭枊<br>
　　2023.12.22-30文字：红影<br><br><br>
<div id="tit1">　第一天 · 客<br><br></div>
并非独在异乡为异客的孤零<br>
却被一场骤寒送进异世界<br>
速冻模式悄然开启，迅速冻结<br>
满地杂乱的落叶<br>
是昨夜树木抗争的见证<br><br>
灰蒙蒙的天穹<br>是心头沉甸甸的墨色锅盖<br>
寒风用呼啸席卷一切不服<br>
在厚厚的冬装里缩手缩脚<br>
凛冽仍然无孔不入<br>
擎着青绿手掌的滴水观音<br>
终于垂下一条条冻僵的柔夷<br><br>
透明的冰层下，一条不动的小红鱼<br>
忽然转身，悠然游远<br>
喜悦便在心中无声地漾开<br>
严寒不能降服世间的所有<br>
惊喜总在不经意中浮现<br><br>

<div id="tit1">　第二天 · 种<br><br></div>
一切都是冥冥中的安排<br>
擦肩的瞬间 某些情绪就莫名萌动<br>
像春天埋下的小小种子<br>
小心地期待着那份希冀<br><br>
有意无意的试探<br>是轻轻拂动的微风<br>
放送蒲公英般的丝丝痕迹<br>
神来之笔的合拍互动<br>
是滋润土壤的好雨<br>
让梦想膨胀 涌动<br><br>
变幻的尘世总是始料不及<br>
晶莹美丽的月亮 <br>
凑近了却满是沟壑疤痕<br>
尚未激活的约定<br>
随着真相轰然崩塌<br>
钟声外日薄西山<br>
那错位的风景 一路向远<br><br>

<div id="tit1">　第三天 · 秋<br><br></div>
隔阂 生成一堵透明的墙<br>
曾经的无话不谈 变成乏味的<br>
问候深秋 落叶飘零<br>
季节的转换是系不住的云帆<br>
兀自 流转<br><br>
放开手 任秋凉收走余温<br>
回忆的瞬间温暖 是浮在水面<br>
小气泡 偶尔驱开寒气<br>
却又消沉于波澜不惊的浮萍下<br><br>
拾捡遍地的念想 编织宿命<br>
无诗胜诗的脉络<br>
起风的夜里思绪无边游荡<br>
哀伤的波澜早已<br>
破碎于 秋的眼角<br>
擎一杯清茶 坐等 繁华落尽<br><br>

<div id="tit1">　第四天 · 思<br><br></div>
碧空如洗 思念的云<br>
被拉得极细极薄 恍若透明<br>
虫鸣蝉唱一霎时退潮<br>
阶前的青苔沉默<br>
寂寞秋庭 辽远空旷 无声无息<br><br>
最初的韵脚 兀自挥洒笔墨<br>
毫无成章的希望<br>
破门而入的寒凉 收割着希冀<br>
飞雪未至 心便空白了一块<br><br>
露从今夜白 誓言 系不住<br>
天边 远去的雁脚<br>
寒风里的枫叶渐渐红了眼眶<br>
无法料知时光另一头的境况<br>
任一壶思念 在深夜沸腾<br><br>

<div id="tit1">　第五天 · 怨<br><br></div>
得知老屋动迁时还在校园读书<br>
心情忽然恍惚<br>
那摇扇乘凉的小院<br>
林林总总的堆叠着记忆<br>
的杂货间 都将消失了么<br>
那只走失的鸟儿<br>
还等着它择时自己归来呢<br><br>
再回去已经是装扮一新的家<br>
狗狗小白 趴在落地窗的客厅<br>
和我一样的迷惘无措<br>
适应和调配新环境 占据<br>
太多心思 冲淡闲思<br><br>
若干年后 路过老屋旧址<br>
被熙熙攘攘的人群震惊<br>
旧样貌和旧邻都化为虚空<br>
凤凰浴火却无缘涅槃<br>
一株平凡小草 忽然没了根<br><br>

<div id="tit1">　第六天 · 语<br><br></div>
不语也是一种姿态<br>
版刻的铁马冰河 把厮杀声<br>
留给烟熏火燎的远古<br>
泥胎的菩萨 满面慈悲<br>
目光跨越千古<br>
有一种守候悄然无声<br>
却充满柔情<br>
像站在风里的稻草人<br>
让一些梦一直在轮回<br>
干枯的蔓蕂攀着电杆<br>
守望着远方游子的身影<br>
水深不语 爱浓不言<br>
只把期盼化做故乡<br>
深深的牵绊<br><br>

<div id="tit1">　第七天 · 幽<br><br></div>
一叶舟，一方静谧天地<br>
漾开的波纹，隔开了<br>
尘世的喧嚣<br>
暮色轻柔围拢侵染<br>
温养碧玉般心思<br><br>
刹那的生生灭灭<br>
在微波里演示着梦幻泡影<br>
山影无声地跌落<br>
用固守的姿态 飘摇不沉<br><br>
远岸的梦境一片虚无<br>
那些泪光，那些衣香鬓影<br>
随着缥缈的笛音<br>
打个旋，就 风烟俱静<br>
束起前尘往事<br>
在寂静的夜色中 悠然入定<br><br>

<div id="tit1">　第八天 · 庭<br><br></div>
庭 是家的港湾<br>
古老的传承在这里代代延续<br>
缘字一线牵 用亲情酿就的美酒<br>
是世间割舍不掉的牵念<br><br>
庭 是法的殿堂<br>
庄严肃穆 用利剑斩戮所有邪恶<br>
让宵小胆寒 让弱者欢欣<br>
天平的两头公正被精准度量<br><br>
庭 是传说中仙的宫阙<br>
高居九天之上 无所不能<br>
是人们用幻想供养的美丽世界<br>
用以逃避眼前的纷扰<br><br>
庭 圈起同类项<br>
是妆点大千世界的五彩气泡<br><br>

<div id="tit1">　第九天 · 柳<br><br></div>
祠堂边的老柳<br>
身处闹市高架边的公园里<br>
神奇地存活了几百年<br>
褶皱的树皮下铭记着无数<br>
日升月落 和烽火遍地的前尘<br><br>
池塘边 新生树木竞相娇娆<br>
用出镜率攀比 身价高低<br>
老柳怀着悲悯 无视身边虚浮<br>
只在漂浮的梦里溯游<br><br>
峥嵘岁月 多少仁人志士<br>
用炙热的鲜血和壮烈的情怀<br>
为拯救国家和民族 前仆后继<br>
年轻的脸 卓绝的才学<br>
化作脚下的泥土 静静永眠<br>
那样的铮铮铁骨 才是老柳<br>
记忆里最鲜亮的一笔<br>

</div><br>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=416892154.mp3" loop autoplay></audio>
<script >
(function() {
        (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) {cKey = j;if (mKey === j) showLrc(data.lrcAr);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;lrc.dataset.lrc = lrcAr.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) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.lrcAr);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);
        let lrcAr = [
                ,
        ];
        HCPlayer({
                lrcAr: lrcAr,
                lrc_css: 'left: calc(50% - 90px); bottom: 15px; --bg: linear-gradient(hsla(100, 100%, 70%, .35),hsla(120, 100%, 50%, .55));',
                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));',
        });
})();
</script>

红影 发表于 2023-12-30 22:13

用了黑黑《花间辞》的音乐，觉得这个蛮好听的。{:4_173:}

红影 发表于 2023-12-30 22:14

这样弄出来的帖子好长啊{:4_173:}

樵歌 发表于 2023-12-31 09:20

恭喜师妹，顺利完成一九消寒！{:4_176:}

樵歌 发表于 2023-12-31 09:21

这个冬天很温暖，因为有字暖心！何其乐哉。

红影 发表于 2023-12-31 15:54

樵歌 发表于 2023-12-31 09:20
恭喜师妹，顺利完成一九消寒！

二九的还没动呢，又是一下子不知道写什么了{:4_173:}

红影 发表于 2023-12-31 15:54

樵歌 发表于 2023-12-31 09:21
这个冬天很温暖，因为有字暖心！何其乐哉。

师兄雅致，又想起玩消寒{:4_187:}

樵歌 发表于 2024-1-1 11:01

红影 发表于 2023-12-31 15:54
二九的还没动呢，又是一下子不知道写什么了

不管，写着写着就有感觉了

樵歌 发表于 2024-1-1 11:02

红影 发表于 2023-12-31 15:54
师兄雅致，又想起玩消寒

倒不是雅致，是想借些逼近自己凑点字，有点事做{:4_173:}

红影 发表于 2024-1-1 13:51

樵歌 发表于 2024-1-1 11:01
不管，写着写着就有感觉了

我都是偶尔想起什么，就去凑什么了，管它呢。主要还是为了学习{:4_173:}

红影 发表于 2024-1-1 13:52

樵歌 发表于 2024-1-1 11:02
倒不是雅致，是想借些逼近自己凑点字，有点事做

这样挺好的，我也这样，不逼自己一下就不愿意动笔{:4_173:}
页: [1]
查看完整版本: [一九消寒小结]——客种秋思语怨幽庭柳