樵歌 发表于 2023-7-12 07:19

六月 再见 和朝云暮雨

<style>
#papa {
        width: 640px;       
        min-height: 1400px;
        padding: 40px;
        box-sizing: border-box;
        border-radius: 12px;
        box-shadow: 0 0 8px #000;
        position: relative;
        margin: 20px auto;
      top: 50px;
       
        display: grid; user-select: none;
      place-items: center;
      user-select: none;
}
#tit {
        position: absolute;
        left: 175px;
        top: 400px;
        font: bold 22px/26px 'FangSong',serif;
        color: SlateBlue;
}
#papa::before, #papa::after {
        position: absolute;
        content: '';
}
#papa::before {
        left: 10px;
        top: 10px;
        right: 10px;
        bottom: 10px;
        border: 2px dashed DarkBlue;
        border-radius: inherit;
}
#papa::after {
        content: '六月 再见TO朝云暮雨 ';
        padding: 10px 40px 10px 10px;
        left: -10px;
        top: 20px;
        border-radius: 10px 0 0 10px;
        background: MediumBlue;
        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: 50px;
        top: 90px;
        width: 500px;
        height: 281px;
}
.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/64addfb91ddac507cc3e7bc8.jpg "" alt="" />
       <img src="https://pic.imgdb.cn/item/6482db5b1ddac507ccaa9ddd.gif" alt="" class="mpic" />
        <div id="tit">和朝云莫雨 再见六月<br>
   2023-07-12•樵歌<br><br>
入伏的热情<br>
先是被一口枯井渴望<br>
后来又被一股南风吹散<br>
忙忙碌碌的人,流着燥汗<br>
找不到出逃的梯子<br>

日夜都醒着的耳朵<br>
决不错过每一个细节<br>
生怕,一个不小心<br>
会踩痛梦的莲花<br><br>

圈定的日子明灭无序<br>
风雨雷电处处蛰伏<br>
红尘中足音平仄空旷,每一声<br>
都让失眠者夜夜盗汗<br><br>

雨霁后所在的积郁和梦魇<br>
由彩虹去翻译吧<br>
里外的人,各自从星光下出发<br>
向着同一方向夸张<br><br>

那个躲在清风和云后的姑娘<br>
虽然准确无误地匿名<br>
但只要她一操琴,从被省略的音符处<br>
我便知道她就是月亮本身<br><br>

月光下,我不断退却反省<br>
生怕月亮一来,被自己的<br>
口是心非绊倒<br><br>
</div><br><br><br>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5275052.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: 280px;--color: MidnightBlue;--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: 170px; 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-7-12 07:20

@朝云暮雨

樵歌 发表于 2023-7-12 07:20

附再见,六月
丨朝云暮雨

这个六月,路过了我的江南
我停舟,横一渡烟水,挑琴泊月
与它与年轮来一次攀谈

风雨雷电及日照,时而咆哮着
呼啸着
大起大落的跌宕,张牙舞爪的粗线条
大印象
野性难羁

一定不能错过细节
时光的褶皱处,暗影里有
更精彩部分
要在繁茂处长出明眸,风来处侧耳
月白处浣心

你看
浓绿在入夏的最深处铺盖
石径曲曲窄窄拐拐
山后的竹竿上,绳床边,不定时的
摇落下一只鸣蝉
听蛙的雨夜恰好相逢的一池莲语
沙碛曲沼的汩汩泉声,密草短亭的一站,一歇,一卧坐
无不趣意横生起来
还有
一颗谷物最饱满含藏的内容
更多的罗列,皆成布局

舟已满载,星光,星途,行色
我的江山我为主
天机万象,众生物理,皆在
一纸吟啸中
喂养和安放词性

一味禅,一克闲,一剂凉,来
收敛行藏

再见,六月

马黑黑 发表于 2023-7-12 07:49

{:4_199:}

为两位大诗人精彩的作品鼓掌

樵歌 发表于 2023-7-12 07:56

马黑黑 发表于 2023-7-12 07:49
为两位大诗人精彩的作品鼓掌

谢谢大科学家谬赞了{:4_190:}

红影 发表于 2023-7-12 10:09

师兄的唱和,写到后面感觉越来越清凉了呢{:4_173:}

红影 发表于 2023-7-12 10:10

欣赏两位漂亮的诗句,和走过的一个月份告别,这样的诗句很雅致{:4_199:}

梦油 发表于 2023-7-12 10:35

这是十分成功的配乐,聆听着美妙的音乐,就感到一丝凉爽和宁静。

醉美水芙蓉 发表于 2023-7-12 11:56

朝云暮雨 发表于 2023-7-12 12:35

日夜都醒着的耳朵
决不错过每一个细节
生怕,一个不小心
会踩痛梦的莲花

这文笔真不错。{:4_204:}

朝云暮雨 发表于 2023-7-12 12:36

那个躲在清风和云后的姑娘
虽然准确无误地匿名
但只要她一操琴,从被省略的音符处
我便知道她就是月亮本身

月光下,我不断退却反省
生怕月亮一来,被自己的
口是心非绊倒

思维新鲜,心思细腻,文字又很精致。{:4_204:}

朝云暮雨 发表于 2023-7-12 12:37

很温柔深情的了,咯咯,收收收{:4_173:} 连人一起收了

朝云暮雨 发表于 2023-7-12 12:39

红影 发表于 2023-7-12 10:09
师兄的唱和,写到后面感觉越来越清凉了呢

{:4_187:}午好。哈哈

朝云暮雨 发表于 2023-7-12 12:40

马黑黑 发表于 2023-7-12 07:49
为两位大诗人精彩的作品鼓掌
大科学家午好,(跟着樵歌叫的){:4_190:}{:4_182:}

朝云暮雨 发表于 2023-7-12 12:41

梦油 发表于 2023-7-12 10:35
这是十分成功的配乐,聆听着美妙的音乐,就感到一丝凉爽和宁静。

问好梦油{:4_187:}

朝云暮雨 发表于 2023-7-12 12:41

醉美水芙蓉 发表于 2023-7-12 11:56
欣赏樵歌大才子!

问好水芙蓉{:4_204:}

朝云暮雨 发表于 2023-7-12 12:42

月光下,我不断退却反省
生怕月亮一来,被自己的
口是心非绊倒

我先顺势倒一个哈哈{:4_182:}

梦油 发表于 2023-7-12 15:23

朝云暮雨 发表于 2023-7-12 12:41
问好梦油

朝云暮雨朋友下午好!看到你们的好作品十分高兴。

樵歌 发表于 2023-7-12 16:38

红影 发表于 2023-7-12 10:09
师兄的唱和,写到后面感觉越来越清凉了呢

是呀,一直炎热下去爱不了哇。{:4_189:}

樵歌 发表于 2023-7-12 16:39

红影 发表于 2023-7-12 10:10
欣赏两位漂亮的诗句,和走过的一个月份告别,这样的诗句很雅致

记得我五月是写几句的,剩下七月了。也准备凑几句。
页: [1] 2 3 4 5
查看完整版本: 六月 再见 和朝云暮雨