绿叶清舟 发表于 2025-1-20 15:24

旧居中的钢琴


<style>
        #mydiv { margin: 30px 0 30px calc(50% - 683px); width: 1200px; height: 680px; background: url('https://pic1.imgdb.cn/item/678c9fbbd0e0a243d4f59c1d.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; position: relative; --state: running; }
        #msvg { position: absolute; left: 75%; top: 60%; cursor: pointer; animation: rot 10s linear infinite var(--state); }
        #msvg:hover line { transition: 1s; stroke: orange; }
        #vid { position: absolute; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
        #fsbtn { position: absolute; left: 50%; bottom: 15px; color: white; padding: 4px 6px; border: 2px solid snow; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
        @keyframes rot { to { transform: rotate(-360deg); } }
</style>

<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=400162016" autoplay loop></audio>
        <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/16/14/34/video63661b6a021fc.mp4" autoplay loop muted></video>
        <svg id="msvg" width="200" height="200" viewBox="-100 -100 200 200"></svg>
        <span id="fsbtn"></span>
</div>

<scripttype="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr('msvg');
dr.defs('defs');
dr.g('lines').addTo('defs');
dr.line(-40, 0, -20, 0, '#fbfaf8', 10, '').addTo('lines');
dr.line(-40, 0, 30, 0, '#020101', '4').addTo('lines');
dr.line(20, 0, 40, 0, '#fbfaf8', 10, '').addTo('lines');
var all = 6;
Array(all).fill('').forEach( (_,key) => dr.use('#lines').transform(`rotate(${180 / all * key})`) );

msvg.onclick = () => {
        msvg.style.setProperty('--state', ['paused','running'][+aud.paused]);
        aud.paused ? (aud.play(), vid.play()) : (aud.pause(), vid.pause());
};

fscreen.fs('mydiv', 'fsbtn');

aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
</script>

红影 发表于 2025-1-20 15:38

这歌词听不懂，但画面很有趣。有人弹琴有人偷听{:4_173:}

红影 发表于 2025-1-20 15:39

小播有趣，本来不是满的鼠标触碰后就变色又是满满的形状了{:4_187:}

红影 发表于 2025-1-20 15:41

旧居中的钢琴
歌手:林子祥

回头望昨日太好 终于分开也好

年少哪里懂得 共度一生的朝与暮

尽管得到快乐 未必真的知道

谁令我最痛苦 最骄傲

旧居中的钢琴 旧歌中的爱人

只偏差一个音 没法可再觅寻

旧居中的钢琴 奏不出的爱恨

昨天的歌变了音 为了一个裂痕

回头望昨日太好

终于分开也好

年少哪里懂得共渡一生的朝与暮

尽管得到快乐

未必真的知道

谁令我最痛苦 最骄傲

旧居中的钢琴 旧歌中的爱人

只偏差一个音 没法可再觅寻

旧居中的钢琴 奏不出的爱恨

昨天的歌变了音 为了一个裂痕

梦油 发表于 2025-1-20 17:08

门口外的人是不是求爱的啊？

梦江南 发表于 2025-1-21 09:16

这个弹钢琴的女孩像是油画画的。很有故事。

小辣椒 发表于 2025-1-21 22:32

这个旧房子里面住了个富贵女，否则买不起钢琴的{:4_170:}

绿叶清舟 发表于 2025-1-23 19:14

小辣椒 发表于 2025-1-21 22:32
这个旧房子里面住了个富贵女，否则买不起钢琴的

可以买个二手的不贵{:4_189:}

绿叶清舟 发表于 2025-1-23 19:16

梦江南 发表于 2025-1-21 09:16
这个弹钢琴的女孩像是油画画的。很有故事。

江南晚上好，是这个歌有故事了

绿叶清舟 发表于 2025-1-23 19:18

梦油 发表于 2025-1-20 17:08
门口外的人是不是求爱的啊？

看图说故事，门外的是来到旧居想起曾经的那个她了{:4_173:}，里面人物应该更虚化一些就更好了

绿叶清舟 发表于 2025-1-23 19:19

红影 发表于 2025-1-20 15:38
这歌词听不懂，但画面很有趣。有人弹琴有人偷听

偷听要给钱的{:4_189:}

绿叶清舟 发表于 2025-1-23 19:19

红影 发表于 2025-1-20 15:41
旧居中的钢琴
歌手:林子祥



谢谢影，就是懒得做歌词了

梦油 发表于 2025-1-23 19:48

绿叶清舟 发表于 2025-1-23 19:18
看图说故事，门外的是来到旧居想起曾经的那个她了，里面人物应该更虚化一些就更好了

知道了。

红影 发表于 2025-1-23 19:58

绿叶清舟 发表于 2025-1-23 19:19
偷听要给钱的

不但给钱，还把自己的一生都给付了对方{:4_173:}

红影 发表于 2025-1-23 20:01

绿叶清舟 发表于 2025-1-23 19:19
谢谢影，就是懒得做歌词了

有歌一样，好听{:4_187:}

绿叶清舟 发表于 2025-1-23 20:27

红影 发表于 2025-1-23 19:58
不但给钱，还把自己的一生都给付了对方

这个代价有点大了啊{:4_189:}

小辣椒 发表于 2025-1-23 20:35

绿叶清舟 发表于 2025-1-23 19:14
可以买个二手的不贵

现在玩钢琴的人还是不少的，小学生，还有老年大学都有钢琴班招生

红影 发表于 2025-1-23 22:42

绿叶清舟 发表于 2025-1-23 20:27
这个代价有点大了啊

看图图里就有这个意思{:4_173:}

绿叶清舟 发表于 2025-1-25 20:46

小辣椒 发表于 2025-1-23 20:35
现在玩钢琴的人还是不少的，小学生，还有老年大学都有钢琴班招生

是啊，现在学钢琴容易多了已经不再是奢侈品了

绿叶清舟 发表于 2025-1-25 20:47

红影 发表于 2025-1-23 22:42
看图图里就有这个意思

以后看到钢琴要躲远点了{:4_189:}
页: [1] 2
查看完整版本: 旧居中的钢琴