论坛 › 现代文学 › 和弦TO朝云暮雨

樵歌 发表于 2023-6-23 15:57

和弦TO朝云暮雨

<style>
#papa {
        width: 660px;       
        min-height: 1260px;
        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: 200px;
        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: 80px;
        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/64954a561ddac507cc845a47.jpg "" alt="" />
       <img src="https://pic.imgdb.cn/item/6482db5b1ddac507ccaa9ddd.gif" alt="" class="mpic" />
        <div id="tit">和 花信万千俩俩相望<br>
　　　2023-06-23•樵歌<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=1489244354.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-6-23 15:57

附：花信万千，俩俩相望，饮却起笔第一行
丨朝云暮雨

解释相思，我擎起一杯浓度60度的烈酒
饮尽
这永夜的月色与我一同醉倒

白驹过隙，无痕却有迹
所有开始了的故事，都正在
顺势中蓬勃发展

你说彼岸人在寻找花开的迹象
收阅风信子的讯息
说春天的蔷薇有了却不完的心事
说逝水东流，沧海悠悠
说到烟雨春秋十二楼
说到一滴泪撞断琴弦，错乱了的
音阶
说到千年得一遇的一次悸动
说相思如镜
说跋涉渡口的刻舟求见

我按住一颗砰然心跳，隔着瑟瑟锦水，与你
俩俩相望 ，一笑嫣然
无须言语，莫停杯
饮尽这场落入人间的烟火
不被错过的春天
饮尽这互为光影，互为枝叶
花朵水泊
百般多情的风月
醉却半生，韶华白雪
一纸忘年

樵歌 发表于 2023-6-23 15:58

@朝云暮雨

梦油 发表于 2023-6-23 16:46

诗好、曲美、制作精致，真乃无与伦比。

梦缘 发表于 2023-6-23 17:39

问好老师，欣赏精彩佳作，谢谢分享，点赞！{:4_178:}

小辣椒 发表于 2023-6-23 18:13

樵哥哥越来越厉害了，现在制作非常的流畅， 文字 模版 音乐 完美{:4_199:}

醉美水芙蓉 发表于 2023-6-23 18:29

一斛珠 发表于 2023-6-23 18:44

樵歌老师最近文思泉涌啊，必须鼓掌加油！

一斛珠 发表于 2023-6-23 18:44

相思的味道是不是美极了{:4_203:}

一斛珠 发表于 2023-6-23 18:45

暮姑娘收礼开心。{:4_178:}

马黑黑 发表于 2023-6-23 19:17

写自由诗，樵歌也是好手，太厉害了

樵歌 发表于 2023-6-23 19:30

梦油 发表于 2023-6-23 16:46
诗好、曲美、制作精致，真乃无与伦比。

第一个词肯定谬赞了。后面的是文抄公干的事儿{:4_189:}

樵歌 发表于 2023-6-23 19:33

梦缘 发表于 2023-6-23 17:39
问好老师，欣赏精彩佳作，谢谢分享，点赞！

谢谢梦缘临贴{:4_190:}

樵歌 发表于 2023-6-23 19:34

小辣椒 发表于 2023-6-23 18:13
樵哥哥越来越厉害了，现在制作非常的流畅， 文字 模版 音乐 完美

除了文字是自己凑的，其它都抄的作业，你是知道的。
{:4_197:}

樵歌 发表于 2023-6-23 19:35

醉美水芙蓉 发表于 2023-6-23 18:29
樵歌越做越好了！完美！

谢谢芙蓉来看。{:4_190:}

樵歌 发表于 2023-6-23 19:36

一斛珠 发表于 2023-6-23 18:44
樵歌老师最近文思泉涌啊，必须鼓掌加油！

凑得不好，见笑见笑，问好珠儿{:4_187:}

樵歌 发表于 2023-6-23 19:37

一斛珠 发表于 2023-6-23 18:44
相思的味道是不是美极了

就是你体会的那个样纸{:4_170:}

樵歌 发表于 2023-6-23 19:38

一斛珠 发表于 2023-6-23 18:45
暮姑娘收礼开心。

她二十日就写了，我竟然木瞧见，怕是生气了吧{:4_170:}

樵歌 发表于 2023-6-23 19:39

马黑黑 发表于 2023-6-23 19:17
写自由诗，樵歌也是好手，太厉害了

黑师谬赞了，不过一句句凑起来，然后再堆成一堆，见笑了{:4_173:}

红影 发表于 2023-6-23 19:58

这万千花信，妆点了世上最美的风景，灿烂绚丽，曲韵悠扬。师兄的唱和好美。点赞{:4_199:}

查看完整版本: 和弦TO朝云暮雨