论坛 › 现代文学 › 【琴、棋、书、画】之书 TO朝云暮雨

樵歌 发表于 2023-5-13 19:30

【琴、棋、书、画】之书 TO朝云暮雨

<style>
#papa { left: -214px; width: 1024px; height: 640px; background: tan url('https://pic2.imgdb.cn/item/645f71790d2dde5777edaa30.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#conicPlayer { left: 20px; bottom: 20px; display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(from 180deg,red 0%, tan 0); cursor: pointer; position: absolute; }
#conicPlayer::before { position: absolute; content: attr(data-per); display: grid; place-items: center; width: 90px; height: 90px; border-radius: 50%; background: #DBE3E2; color: seagreen; font: normal 15px sans-serif; white-space: pre; transition: 1.2s; }
#lrctext { position: absolute; left: 130px; bottom: 55px; font: bold 1.4em sans-serif; color: orange; text-shadow: 1px 1px 2px rgba(0,0,0,.95); user-select: none; transition: 1.2s; }
#lrctext:hover, #conicPlayer:hover::before { color: tomato; }
</style>

<div id="papa">
        <span id="conicPlayer" data-per="00:00&#10;00:00"></span>
        <span id="lrctext">lrc歌词</span>
</div>

<script>
let lrcAr = [
        ['00.00', '纯音乐'],
        ['170.00','感谢欣赏']
];
let aud = new Audio();

aud.src = 'https://music.163.com/song/media/outer/url?id=1855096170.mp3';
aud.autoplay = true;
aud.loop = true;

conicPlayer.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('timeupdate', () => {
        let current = aud.currentTime / aud.duration * 100;
        conicPlayer.style.background = `conic-gradient(from 0deg, red, orange, green, red ${current}%, tan 0)`;
        conicPlayer.setAttribute('data-per', toMin(aud.currentTime) + '\n' + toMin(aud.duration));
        for(j=0; j<lrcAr.length; j++) {
                if(aud.currentTime >= lrcAr) lrctext.innerText = lrcAr;
        }
});

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;
}
</script>

樵歌 发表于 2023-5-13 19:30

【琴、棋、书、画】之书 TO朝云暮雨
楷◎画框里，画一个端庄如你或坐，或站从小到大的身姿匀称、美丽
我的追求一丝不苟在方方正正的宫殿前或站或卧或左或右我舞动狼毫击穿了多少纸背隐藏的情敌
我只用一篇蝇头小楷来俘获你衿持的芳心
行◎我们紧凑得无须留白每一寸相思都行云写意，夜梦的虚牵手的实，离分与相逢顾盼呼应，千里万里
我们跌扑纵跃我们轻松活泼我们露锋入纸我们，我们呵被两千年倾倒入迷
隶◎剑一出，江山如画取势左右腾挪，收锋如燕藏拙蓄力，不画不连波动于无形，华丽到天人合一

樵歌 发表于 2023-5-13 19:30

减了个大懒，少了草，{:4_173:}

一斛珠 发表于 2023-5-13 20:00

首席醉赏

小辣椒 发表于 2023-5-13 20:04

樵哥哥现在也是会播放器了{:4_199:}

一斛珠 发表于 2023-5-13 20:06

表白，相思，皆大欢喜哈。{:4_199:}

一斛珠 发表于 2023-5-13 20:10

好看好看。
暮姑娘收礼快乐。{:4_204:}

红影 发表于 2023-5-13 20:25

师兄直接用了个书法做帖子背景，倒也挺好看的{:4_199:}

红影 发表于 2023-5-13 20:27

樵歌 发表于 2023-5-13 19:30
【琴、棋、书、画】之书 TO朝云暮雨
楷◎画框里，画一个端庄如你或坐，或站从小到大的身姿匀称、美丽
我 ...

这诗句用了书法里的常用字体来做的标题吧，文字跟字体很相合，写的好{:4_199:}

红影 发表于 2023-5-13 20:28

樵歌 发表于 2023-5-13 19:30
减了个大懒，少了草，

不止少了草呢，书法有五种字体分别是：篆书、楷书、隶书、行书、草书。
应该还少了篆吧{:4_173:}

醉美水芙蓉 发表于 2023-5-13 20:40

梦油 发表于 2023-5-13 20:47

传承中华文明,弘扬书法艺术。

千羽 发表于 2023-5-13 21:23

是樵歌老师的书法吗，仰视哦{:4_187:}{:4_199:}

千羽 发表于 2023-5-13 21:28

樵歌老师会做播放器了，每天都有收获和进步呢 为歌老师点赞送花花……               

焱鑫磊 发表于 2023-5-13 22:12

欣赏佳作！{:4_187:}

朝云暮雨 发表于 2023-5-13 22:14

樵歌 发表于 2023-5-13 19:30
减了个大懒，少了草，

明明少了个情书，哈哈哈

朝云暮雨 发表于 2023-5-13 22:16

这个楷写的真娟秀，，{:4_204:}。。句子真好看。。{:4_204:}

朝云暮雨 发表于 2023-5-13 22:18

行◎
我们紧凑得无须留白
每一寸相思都
行云写意，夜梦的虚
牵手的实，离分与相逢
顾盼呼应，千里万里

我们跌扑纵跃
我们轻松活泼
我们露锋入纸
我们，我们呵
被两千年倾倒入迷


你把那体形写的真形象，赞！！！！！！！{:4_187:}

朝云暮雨 发表于 2023-5-13 22:20

隶◎
剑一出，江山如画
取势
左右腾挪，收锋如燕
藏拙蓄力，不画不连
波动于无形，华丽
到天人合一


笔势，锋芒{:4_187:}

朝云暮雨 发表于 2023-5-13 22:23

这个书法是谁的 写的这么好看 {:4_187:}

墙裂要求把这个音画代码贴来，，，代码，搬回去慢慢赏。哈哈{:4_173:}。。

查看完整版本: 【琴、棋、书、画】之书 TO朝云暮雨