论坛 › 音乐沙龙 › 《豆蔻盒子》（学习黑黑《青山如昨》代码效果）

红影 发表于 2024-11-23 20:07

《豆蔻盒子》（学习黑黑《青山如昨》代码效果）

<style>
        @import 'https://638183.freep.cn/638183/web/css/audlrc.css';
        #mama { margin: 60px 0 30px calc(50% - 721px); width: 1280px; height: 723px; background: black url('https://pic.imgdb.cn/item/67414d6dd29ded1a8c9b3516.jpg') no-repeat center/ cover; }
        #player { width: 400px; height: 400px; opacity: .75;top: 0.1%; right:17%; animation: flash 4s linear infinite var(--state), rot 8s linear infinite var(--state); }
        #player:hover { filter: hue-rotate(30deg); transition: .7s; }
        #prog { bottom: 30px; width: 300px; --bg1: peru; --bg2: Coral; --color: peru; }
        #prog::before { width: 100%; height: 40px; left: 0; top: -30px; }
        #lrc { bottom: 12%; color: Sienna; --bg: url("https://pic.imgdb.cn/item/67417193d29ded1a8cc27334.jpg") }
        #vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: darken; -webkit-mask: radial-gradient(transparent 1%, red 40%, transparent); pointer-events: none; }
        #fsbtn { position: absolute; top: 29%; left: 100px; color: peru; padding: 2px 6px; border: 2px solid peru; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
        @keyframes flash { to { filter: hue-rotate(60deg); } }
</style>

<div id="mama" class="pa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2623119425"></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2414777/00/02/11/5b513cfda97f8_10s_big.mp4" autoplay loop muted></video>
        <span id="fsbtn"></span>
        <div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
        <img id="player" class="player" src="https://pic.imgdb.cn/item/674165f7d29ded1a8cb62808.png" alt="" />
        <div id="prog" class="prog" data-tt="00:00 00:00"></div>
</div>

<script type="module">
        import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
        import { Aud } from 'https://638183.freep.cn/638183/web/mod/audlrc.js';
        var lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
        var mDatas = { pa: mama, btn: player, prog: prog, lrc: lrc, lrcAr: lrcAr };
        var audio = new Aud(mDatas);
        audio.play();
        fscreen.fs('mama', 'fsbtn');
</script>

红影 发表于 2024-11-23 20:09

没找到刀郎的原唱，只能找个翻唱的代替了。
套用的代码，试了个图片替代歌词同步效果。谢谢@马黑黑 的代码和教学{:4_187:}

红影 发表于 2024-11-23 20:11

“歌曲开篇的弹词配乐和评弹唱腔，使得整首歌曲充满了江南的韵味”感觉有趣，一起分享。
图片是从一个视频里抓了张图，感觉挺适合这首歌曲。{:4_173:}

夕阳黄昏 发表于 2024-11-23 20:15

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

一评分就骄傲的不唱了{:5_117:}

小辣椒 发表于 2024-11-23 20:19

哇塞~~~亲爱的，太漂亮了，还是戏剧吧{:4_199:}

小辣椒 发表于 2024-11-23 20:20

刀郎的歌曲，不是戏剧{:4_170:}

小辣椒 发表于 2024-11-23 20:20

欣赏亲爱的精美的制作，小辣椒欣赏加学习{:4_179:}

马黑黑 发表于 2024-11-23 20:23

{:4_199:}

梦油 发表于 2024-11-23 20:37

评弹的苏州伟还挺浓。

朵拉 发表于 2024-11-23 21:14

精品制作，欣赏学习哈{:4_178:}

绿叶清舟 发表于 2024-11-23 21:27

影这个字漂亮啊，是加了图片的吗

冬天的雨 发表于 2024-11-23 22:10

有故事的歌曲，特别好听{:4_208:}

冬天的雨 发表于 2024-11-23 22:14

美女，优秀学生，一等奖{:4_170:}

红影 发表于 2024-11-23 22:21

夕阳黄昏 发表于 2024-11-23 20:15
一评分就骄傲的不唱了

关于评分的事，我也不知道怎么解决呢{:4_173:}

红影 发表于 2024-11-23 22:22

小辣椒 发表于 2024-11-23 20:19
哇塞~~~亲爱的，太漂亮了，还是戏剧吧

难得的刀郎的带点评弹效果的歌曲{:4_173:}

红影 发表于 2024-11-23 22:32

小辣椒 发表于 2024-11-23 20:20
刀郎的歌曲，不是戏剧

是的，刀郎的歌啊，偶尔听到，做个玩玩{:4_173:}

红影 发表于 2024-11-23 22:32

小辣椒 发表于 2024-11-23 20:20
欣赏亲爱的精美的制作，小辣椒欣赏加学习

亲爱的那个更漂亮呢{:4_187:}

红影 发表于 2024-11-23 22:33

马黑黑 发表于 2024-11-23 20:23


谢谢黑黑的代码{:4_187:}

红影 发表于 2024-11-23 22:33

梦油 发表于 2024-11-23 20:37
评弹的苏州伟还挺浓。

是啊，觉得这首挺有趣。{:4_173:}

红影 发表于 2024-11-23 22:34

朵拉 发表于 2024-11-23 21:14
精品制作，欣赏学习哈

多谢朵宝鼓励，我作业欠了好多都没做呢{:4_173:}

查看完整版本: 《豆蔻盒子》（学习黑黑《青山如昨》代码效果）