论坛 › 动画音画 › 【黑师代码】我在这里等你（学习黑师20250811《I Can》原生歌词简洁版）

花飞飞 发表于 2025-8-18 22:33

【黑师代码】我在这里等你（学习黑师20250811《I Can》原生歌词简洁版）

<style>
    @import 'https://638183.freep.cn/638183/web/css/tz01.css';
    #pa { --offsetX: 0px;margin: 150px 0; left: calc(50% - 81px);width: clamp(600px, 90vw, 1800px); height: auto; aspect-ratio: 18/10; --bg: none; --bg1: url('https://642303.freep.cn/642303/tu/20250818qwry00.webp') no-repeat center/cover; --ma-size:5%; --per: -2%; --a: 45deg; }
    #pa::before { position: absolute; content: ''; inset: 0; background: var(--bg1); mask: conic-gradient(from var(--start), transparent var(--deg), red var(--deg) 0); }
    #ma { left: 530px; top: 630px; background: repeating-conic-gradient(#bf7f4d,#b9984f, #bf7f4d 0.5deg); mask: url('https://642303.freep.cn/642303/za/01.png') no-repeat center/cover; -webkit-mask: url('https://642303.freep.cn/642303/za/01.png') no-repeat center/cover; opacity: .35; }
      #lrc { position: absolute; bottom: 20px; color: #957044; font-size: 30px; font-weight: bold; text-shadow: 1px 1px 2px #333; opacity: .9; }
   
    #btnFs { left: 20px; bottom: 20px; }
</style>

<div id="pa">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2138985267" autoplay loop></audio>
    <video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/17/17/59/video63662a47cce4f.mp4" autoplay loop muted></video>
    <div id="ma"></div>
    <div id="lrc">HUACHAO LRC</div>
</div>

<script type="module">
    import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
    import lrc from 'https://638183.freep.cn/638183/web/lrc/lrc_only.js';
    var geci = `
    单曲：不在乎有没有以后
    歌手：安洛贤 / Steven / 樊音悦动
    所属专辑：不在乎有没有以后
    作词 : 安洛贤
    作曲 : 安洛贤
    制作人：朴桑松 Sunny@壹橙 Music/安洛贤
    OP/ SP：樊音悦动
   
    流星划过了天际
    只留下了无声的思绪
    你就是我心底的秘密
    我想要逃离回忆却泛起涟漪
    在那寒冷的夜里
    忘了如何呼吸
    脑海中的思绪
    全部都是你
    只要你握紧我的手
    不在乎有没有以后
    即便再一无所有
    还坚信着你是一整个宇宙
    流星坠落的时刻
    让我为你唱首歌
    那一定是最浪漫的时刻
    我希望你不要再回头
    忘掉这故事忘掉爱
    不在乎有没有以后
    回忆都清空不期待
    心像是漏了个大洞
    我怎么填都填不满
    你说你早已经受够
    我搞不懂不是不想懂
    你的离开在夜里
    我还是特别的想你
    看着你离开的飞机
    对你的感情突然就落地
    从此以后
    没了我的手臂当枕头你
    再没理由
    成为我无法再说的痛 Girl
    你的话不想懂
    你的爱不再留
    不在乎了你要求
    就算是没以后
    我不再握紧你手
    只要你握紧我的手
    不在乎有没有以后
    即便再一无所有
    还坚信着你是一整个宇宙
    流星坠落的时刻
    让我为你唱首歌
    那一定是最浪漫的时刻
    我也曾看过那遥远的星辰
    我破碎怎抵达梦里的纷飞
    如果我再呐喊
    你是否听见
    风吹过的那一页
    窗外又是电闪雷鸣像是爱在滑落
    也许我们早就说过爱都不分对错
    爱的伤不愈合
    也没有如果了
    我知道你不在乎以后就算我们爱过
    如果说说你能忘掉我
    忘掉我对你的好只剩爱的折磨
    那我也无话可说
    你就当我没来过
    流星坠落的时刻
    让我为你唱首歌
    那一定是最浪漫的时刻
`;
    FS(pa, ma);
    lrc(pa, geci);

    var deg = 360, step = 5, picIdx = 0, raf;
    var pics = [
      'https://642303.freep.cn/642303/tu/20250818qwry00.webp',
      'https://642303.freep.cn/642303/tu/20250818qwry01.webp',
      'https://642303.freep.cn/642303/tu/20250818qwry02.webp'
    ];

    ma.onanimationiteration = () => update();

    function update() {
      if (document.visibilityState === 'hidden') return;
      picIdx ++;
      const idx = (picIdx - 1) % pics.length;
      const idx1 = picIdx % pics.length;
      pa.style.setProperty('--start', Math.random() * 360 + 'deg');
      pa.style.setProperty('--bg', `url(${pics}) no-repeat center/cover`);
      pa.style.setProperty('--bg1', `url(${pics}) no-repeat center/cover`);
      animate();
    }

    function animate() {
      if (deg < 0) {
            cancelAnimationFrame(raf);
            deg = 360;
      } else {
            deg -= step;
            pa.style.setProperty('--deg', deg + 'deg');
            raf = requestAnimationFrame(animate);
      }
    };
</script>

花飞飞 发表于 2025-8-18 22:33

@马黑黑 交一份三图转场，加原生歌词简洁版的作业{:4_173:}

花飞飞 发表于 2025-8-18 22:35

本来是回礼的，只做一张图，后来发现转场代码还有两种没跟过，就加了两张，凑成一组。。
所以会有点色差。。{:4_173:}

马黑黑 发表于 2025-8-18 22:59

好大的图图

红影 发表于 2025-8-18 23:17

这转场的图图很漂亮，图片背景也一致。这样的一组女子很有知性美。
欣赏飞飞好帖{:4_199:}

红影 发表于 2025-8-18 23:18

这样的转场方式，从任意个角度开始，很随性，倒是很适合图图的随性美呢{:4_187:}

梦江南 发表于 2025-8-19 11:39

好美的大图音画，欣赏问好！

花飞飞 发表于 2025-8-20 11:46

马黑黑 发表于 2025-8-18 22:59
好大的图图

怎么感觉到了，可能是现在的显示器比较大，图越整越大。。
手机因为有适屏效果，所以也能一眼看全{:4_173:}
做图尺寸还在调整适应中。。

花飞飞 发表于 2025-8-20 11:47

红影 发表于 2025-8-18 23:17
这转场的图图很漂亮，图片背景也一致。这样的一组女子很有知性美。
欣赏飞飞好帖

有影子支持十分开心。。{:4_187:}

花飞飞 发表于 2025-8-20 11:48

红影 发表于 2025-8-18 23:18
这样的转场方式，从任意个角度开始，很随性，倒是很适合图图的随性美呢

三个转场，都在尝试中，还差一种圆的还没跟过作业{:4_187:}

花飞飞 发表于 2025-8-20 11:48

梦江南 发表于 2025-8-19 11:39
好美的大图音画，欣赏问好！

感谢梦江南支持{:4_190:}

马黑黑 发表于 2025-8-20 12:09

花飞飞 发表于 2025-8-20 11:46
怎么感觉到了，可能是现在的显示器比较大，图越整越大。。
手机因为有适屏效果，所以也能一眼看全{:4_17 ...

有容乃大，大者有容

花飞飞 发表于 2025-8-20 17:06

马黑黑 发表于 2025-8-20 12:09
有容乃大，大者有容

学图过程中，各种都试试，找到合适尺寸就差不多会固定一两种{:4_173:}
之前1700*900用了很久
也试过1600*1100的，比较方，这种用得不多。

马黑黑 发表于 2025-8-20 17:57

花飞飞 发表于 2025-8-20 17:06
学图过程中，各种都试试，找到合适尺寸就差不多会固定一两种
之前1700*900用了很久
也试过160 ...

不过都建议图片保持一个比例，比如16:9或你认为更合适的，主要是间隔发帖尺寸

红影 发表于 2025-8-20 21:53

花飞飞 发表于 2025-8-20 11:47
有影子支持十分开心。。

飞飞的制作总是很漂亮，心思很到位{:4_187:}

红影 发表于 2025-8-20 21:54

花飞飞 发表于 2025-8-20 11:48
三个转场，都在尝试中，还差一种圆的还没跟过作业

这些转场各具特色，都很好呢。

小辣椒 发表于 2025-8-21 12:32

飞飞这个转换图片效果做的漂亮，还把播放器按钮换了，黑黑的那个代码播放器也是漂亮的，我也是特别喜欢。

飞飞会动脑子，做的效果特别的棒！赞的。今天图图可以看见了{:4_178:}

花飞飞 发表于 2025-8-21 21:15

马黑黑 发表于 2025-8-20 17:57
不过都建议图片保持一个比例，比如16:9或你认为更合适的，主要是间隔发帖尺寸

好哒，如果太大就还做回1700*900{:4_173:}这个比较熟
间隔发贴尺寸是什么意思

花飞飞 发表于 2025-8-21 21:21

小辣椒 发表于 2025-8-21 12:32
飞飞这个转换图片效果做的漂亮，还把播放器按钮换了，黑黑的那个代码播放器也是漂亮的，我也是特别喜欢。
...

小辣椒好久不见哈，问好。。
感觉这个按纽比较适合这个背景图片所以就换了一个。。{:4_173:}

花飞飞 发表于 2025-8-21 21:22

红影 发表于 2025-8-20 21:54
这些转场各具特色，都很好呢。

对的，可以组图展示。。

查看完整版本: 【黑师代码】我在这里等你（学习黑师20250811《I Can》原生歌词简洁版）