红影 发表于 2024-2-4 12:19

【五九消寒小节】——枯树染残咽哀叙荒茫


<style>
#papa {
        width: 640px;       
        min-height: 4620px;
        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/6599fc28871b83018ac45c46.jpg" alt="" />
       <img src="https://pic.imgdb.cn/item/6482db5b1ddac507ccaa9ddd.gif" alt="" class="mpic" />
        <div id="tit">五九用联：枯树染残咽哀叙荒茫<br>
　2024.1.27-2024-2-4文字：红影<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>
<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>
<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>
<div id="tit1">　第六天 · 哀<br><br></div>
当帐外的楚歌一浪高过一浪<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>
<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>

</div><br>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2117817490.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 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) {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% - 80px); bottom: 64px; --bg: rgba(160,82,45, .95);',
                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));',
        });
})();
</script>

红影 发表于 2024-2-4 12:22

消寒总算是过半了，冬天也即将走远了。

小辣椒 发表于 2024-2-4 19:12

欣赏亲爱的精品合集制作，太厉害了，{:4_178:}

小辣椒 发表于 2024-2-4 19:14

@樵歌
樵哥哥快来加精华{:4_187:}

樵歌 发表于 2024-2-4 19:19

不知不觉就完成了五九，可喜可贺！

樵歌 发表于 2024-2-4 19:22

小辣椒 发表于 2024-2-4 19:14
@樵歌
樵哥哥快来加精华

今天年前聚会呢，才回家呢{:4_173:}

樵歌 发表于 2024-2-4 19:24

非常棒的一大组！我一会再去整理一下。

红影 发表于 2024-2-4 21:05

小辣椒 发表于 2024-2-4 19:12
欣赏亲爱的精品合集制作，太厉害了，

算不得精品呢，就是每天逼着自己写点字{:4_173:}

红影 发表于 2024-2-4 21:06

樵歌 发表于 2024-2-4 19:19
不知不觉就完成了五九，可喜可贺！

谢谢师兄，消寒总算过半了{:4_173:}

红影 发表于 2024-2-4 21:07

樵歌 发表于 2024-2-4 19:24
非常棒的一大组！我一会再去整理一下。

嗯嗯，师兄的也赶快整理出来，这是五九天气里最好的收获呢{:4_187:}

樵歌 发表于 2024-2-4 21:42

红影 发表于 2024-2-4 21:06
谢谢师兄，消寒总算过半了

是呀，写一天少一天的。后面还36首呢{:4_173:}

樵歌 发表于 2024-2-4 21:44

红影 发表于 2024-2-4 21:07
嗯嗯，师兄的也赶快整理出来，这是五九天气里最好的收获呢

另外，我看马师帖子中的小播放器（小花旋转那种）用在这如何{:4_203:}

流水光阴 发表于 2024-2-5 10:42

美女才情了得{:4_178:}

流水光阴 发表于 2024-2-5 10:42

花潮的才女管理，厉害呢

流水光阴 发表于 2024-2-5 10:42

欣赏了，感谢分享{:4_187:}

红影 发表于 2024-2-5 10:47

樵歌 发表于 2024-2-4 21:42
是呀，写一天少一天的。后面还36首呢

我都不知道怎么混过来的，开始还以为自己坚持不下来{:4_173:}

红影 发表于 2024-2-5 10:48

樵歌 发表于 2024-2-4 21:44
另外，我看马师帖子中的小播放器（小花旋转那种）用在这如何

师兄是说把按钮变成花朵的还是用那个帖子的格式？

红影 发表于 2024-2-5 10:49

流水光阴 发表于 2024-2-5 10:42
美女才情了得

流水光阴谬赞了，感谢你的鼓励{:4_187:}

樵歌 发表于 2024-2-5 19:44

红影 发表于 2024-2-5 10:47
我都不知道怎么混过来的，开始还以为自己坚持不下来

竟然是越写越溜了！收获大大滴{:4_200:}

樵歌 发表于 2024-2-5 19:45

红影 发表于 2024-2-5 10:48
师兄是说把按钮变成花朵的还是用那个帖子的格式？

就是{:4_187:}
页: [1] 2
查看完整版本: 【五九消寒小节】——枯树染残咽哀叙荒茫