红影 发表于 2024-1-23 22:51

【四九消寒】第六天 · 前


<style>
#papa {
      width: 640px;      
      min-height: 1100px;
      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;
}
#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/6599fbf5871b83018ac3ca1d.jpg" alt="" />
       <img src="https://pic.imgdb.cn/item/6482db5b1ddac507ccaa9ddd.gif" alt="" class="mpic" />
      <div id="tit">四九用联：娜姿轻盈宫前是娇娃<br>
　　2024-1-23文字：红影<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=466908345.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% - 100px); 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-1-23 22:52

《父亲写的散文诗》

一九八四年 庄稼还没收割完
儿子躺在我怀里 睡得那么甜
今晚的露天电影 没时间去看
妻子提醒我 修修缝纫机的踏板
明天我要去邻居家 再借点钱
孩子哭了一整天了 闹着要吃饼干
蓝色的涤卡上衣 痛往心里钻
蹲在池塘边上 狠狠给了自己两拳
这是我父亲日记里的文字
这是他的青春留下 留下来的散文诗
多年以后我看着泪流不止
我的父亲已经老得像一个影子
一九九四年 庄稼早已收割完
我的老母亲去年 离开了人间
儿子穿着白衬衫 跑进了校园
可他最近有些心事 瘦了一大圈
想一想未来 我老成了一堆旧纸钱
那时的儿子 已是真正的男子汉
有个可爱的姑娘 和他成了家
但愿他们不要活得 如此艰难
这是我父亲日记里的文字
这是他的生命留下 留下来的散文诗
多年以后我看着泪流不止
可我的父亲已经老得像一个影子
这是我父亲日记里的文字
这是他的生命留下 留下来的散文诗
多年以后我看着泪流不止
可我的父亲在风中 像一张旧报纸
这是那一辈人 留下的足迹
几场风雨后 就要抹去了痕迹
这片土地曾让我泪流不止
它埋葬了多少人心酸的往事
wooo~hooo~wooo~

红影 发表于 2024-1-23 22:56

想找李健的，不让分享，那就这人的吧。非常感人的一首歌。

小九 发表于 2024-1-24 18:32

父爱如山{:4_190:}

红影 发表于 2024-1-24 21:07

小九 发表于 2024-1-24 18:32
父爱如山

是啊，这首歌曾经特别感动我。
页: [1]
查看完整版本: 【四九消寒】第六天 · 前