论坛 › 音乐沙龙 › 像你这样的朋友

绿叶清舟 发表于 2024-3-18 20:59

像你这样的朋友

<style>
#papa { margin: 30px 0 30px calc(50% - 633px); width: 1100px; height: 700px; background: url('https://pic.imgdb.cn/item/65f834dc9f345e8d033567bf.jpg') no-repeat center/cover, url('https://638183.freep.cn/638183/Pic/81/leaf2.png') no-repeat 760px 100%; background-blend-mode: darken; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#lrc { position: absolute; left: 20px; top: 10px; font: bold 2.4em sans-serif; color: gray; text-shadow: 1px 1px 1px rgba(0,0,0,.45); --ani: lrcGo1; --duration: 1s; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; background: repeating-radial-gradient(orange, gray 6px); background-clip: text; -webkit-background-clip: text; clip-path: inset(0 100% 0 0); animation: var(--ani) var(--duration) linear forwards var(--state); border-bottom: 2px dashed gray; }
#btnplay { position: absolute; top: 120px; left: 900px; width: 200px; height: 200px; opacity: .7; animation: rotating 6s linear infinite var(--state); cursor: pointer; }
ye-zi { position: absolute; left: calc(50% - 0.5 * var(--ww)); top: 0; width: var(--ww); height: 100px; border-radius: 60%; background: repeating-radial-gradient(gray, #6be6e2 20%); transform-origin: 50% 100%; transform: rotate(var(--deg)); }
@keyframes rotating { to { transform: rotate(360deg); } }
@keyframes lrcGo0 { to { clip-path: inset(0 0 0 0); } }
@keyframes lrcGo1 { to { clip-path: inset(0 0 0 0); } }
</style>

<div id="papa">
    <audio src="https://music.163.com/song/media/outer/url?id=79651" autoplay loop></audio>
    <div id="lrc" data-lrc="HUACHAO LRC">HUACHAO LRC</div>
    <div id="btnplay"></div>
</div>

<script>
var geci = [ ];
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/btnlrc-01.js';
document.querySelector('body').appendChild(sF);

Array.from({length: all = 5}).forEach((item,key) => {
    item = document.createElement('ye-zi');
    item.style.cssText += `--ww: 60px; --deg: ${360 / all * key}deg;`;
    btnplay.prepend(item);
});
</script>

梦油 发表于 2024-3-18 21:27

欣赏美乐，问候清舟。

绿叶清舟 发表于 2024-3-18 21:34

梦油 发表于 2024-3-18 21:27
欣赏美乐，问候清舟。

梦油晚上好啊

红影 发表于 2024-3-18 21:46

清舟的制作漂亮，尤其标题字，像是掺杂着海水和白云的颜色，非常漂亮{:4_199:}

红影 发表于 2024-3-18 21:47

看着歌名随时间出来，还以为是歌词同步呢，结果只有歌名啊{:4_173:}

红影 发表于 2024-3-18 21:49

温暖的歌曲，温馨的画面。给清舟点赞{:4_187:}

樵歌 发表于 2024-3-19 07:12

作品透出一股股洋气，到底是海泒{:4_189:}

庶民 发表于 2024-3-19 13:35

清新美好。

梦油 发表于 2024-3-19 14:04

绿叶清舟 发表于 2024-3-18 21:34
梦油晚上好啊

你好，清舟朋友。

绿叶清舟 发表于 2024-3-19 19:50

红影 发表于 2024-3-18 21:47
看着歌名随时间出来，还以为是歌词同步呢，结果只有歌名啊

偷懒了，歌词太麻烦了

绿叶清舟 发表于 2024-3-19 19:53

樵歌 发表于 2024-3-19 07:12
作品透出一股股洋气，到底是海泒

海洋边 上的嘛{:4_189:}

绿叶清舟 发表于 2024-3-19 19:53

庶民 发表于 2024-3-19 13:35
清新美好。

谢谢庶民，晚上好

樵歌 发表于 2024-3-20 10:53

绿叶清舟 发表于 2024-3-19 19:53
海洋边 上的嘛

嗯出黄浦江就到了{:4_189:}

红影 发表于 2024-3-20 16:39

绿叶清舟 发表于 2024-3-19 19:50
偷懒了，歌词太麻烦了

不过这歌唱得挺清楚的，能听得出歌词的{:4_173:}

绿叶清舟 发表于 2024-3-20 20:34

樵歌 发表于 2024-3-20 10:53
嗯出黄浦江就到了

一过江就到海了{:4_189:}

绿叶清舟 发表于 2024-3-20 20:35

红影 发表于 2024-3-20 16:39
不过这歌唱得挺清楚的，能听得出歌词的

听歌俺很少认真听歌词的了

红影 发表于 2024-3-20 22:35

绿叶清舟 发表于 2024-3-20 20:35
听歌俺很少认真听歌词的了

有些歌曲一听就喜欢，很多原因是歌词入心呢。

樵歌 发表于 2024-3-21 19:45

绿叶清舟 发表于 2024-3-20 20:34
一过江就到海了

过江是浦东呵，{:4_189:}

大猫咪 发表于 2024-3-22 20:55

清舟制作的温馨浪漫   歌也喜欢   第一次欣赏真棒！

{:4_204:}{:4_190:}{:4_179:}

绿叶清舟 发表于 2024-3-23 19:39

红影 发表于 2024-3-20 22:35
有些歌曲一听就喜欢，很多原因是歌词入心呢。

要说就是文化银呢，就是不一样了

查看完整版本: 像你这样的朋友