小辣椒 发表于 2026-9-3 21:29

一生回味一面 ( 学习套用黑黑 异象 播放器效果 )

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';

    .pa {
      position: relative;
      top:50px; --offsetX: 81px;
      --bg: url('https://wj.zp68.com/lxx/yunhua/2026/08/31/2.jpg') no-repeat center/cover;
      color: lightblue;
    }
    .player { width: 480px; bottom: 30px; }
    .btnFs { top: -125px; right: 20px; }
    #lrc { top: 70%; }
    #msvg { position: absolute; left: 62%; top: 19%;width: 10vw;height: 10vw; transition: .75s;opacity: 1; pointer-events:auto; }

</style>
<div id="pa" class="pa">
    <video class="pd-vid" src="https://wj.zp68.com/lxx/yunhua/2026/08/31/02.mp4" autoplay loop muted></video>
    <svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400"><title>播放/暂停(Alt+X)</title></svg>
</div>
<script>
var gc = `一生回味一面
歌手:DJ小鱼儿
我坠入爱河那天
用一生回味一面
在爱的边缘来回盘旋
蒙蔽了双眼
祈求你把我眷恋
我不愿做分飞燕
在凌晨时间翻翻覆覆
祈祷你改变
看时钟滴滴哒哒
凋零飘落的花
握不住手中的沙
不心甘随风飘洒
可时光飞逝如马
未来还是否有她
再给我一次机会
任狂风暴雨吹打
看时钟滴滴哒哒
凋零飘落的花
握不住手中的沙
不心甘随风飘洒
可时光飞逝如马
未来还是否有她
再给我一次机会
任狂风暴雨来吹打
酷咔音乐 kkmp3.com
我坠入爱河那天
用一生回味一面
在爱的边缘来回盘旋
蒙蔽了双眼
祈求你把我眷恋
我不愿做分飞燕
在凌晨时间翻翻覆覆
祈祷你改变
看时钟滴滴哒哒
凋零飘落的花
握不住手中的沙
不心甘随风飘洒
可时光飞逝如马
未来还是否有她
再给我一次机会
任狂风暴雨吹打
看时钟滴滴哒哒
凋零飘落的花
握不住手中的沙
不心甘随风飘洒
可时光飞逝如马
未来还是否有她
再给我一次机会
任狂风暴雨来吹打
LRC编辑:小辣椒
谢谢欣赏
`;
var options = {
    pa: '.pa',
    urls: [['https://wj.zp68.com/lxx/yunhua/2026/08/31/01.mp3', '一生回味一面']],
    btns: ,
};
loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
    loadJs('https://638183.freep.cn/638183/web/api/yslrc.min.js', function() {
      loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
    });
});
function tzRun() {
    var aud = new AudPlayer(options);
    var dr = _dr(msvg);
    dr.g('g1').set('class', 'rotate');
    .forEach(y => {
      var c = Math.random().toString(16).substring(2, 8);
      dr.circle(0, y, 10, `#${c}`).addTo('g1').rotates(10);
    });
    setTimeout(function(){
      LRC(aud.pa, aud.aud, gc, 0.5);
    },400);
}
function loadJs(url, callback) {
    var script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.onload = function() {
      if (callback) callback();
    };
    document.head.appendChild(script);
}
</script>

小辣椒 发表于 2026-9-3 21:31

@马黑黑

黑黑昨天下载了你后面的模板,歌词加不上去,后来上面加了个CSS,现在歌词可以出来了。

小辣椒 发表于 2026-9-3 21:31

最简单的图图,岁月的AE视频背景@走过岁月

玫瑰 发表于 2026-9-3 21:38

精彩制作,动感十足。{:4_204:}

小辣椒 发表于 2026-9-3 21:41

玫瑰 发表于 2026-9-3 21:38
精彩制作,动感十足。
问好玫瑰,谢谢欣赏,最简单的图图了,直接岁月的视频制作的背景图,我没有时间做图{:4_198:}

玫瑰 发表于 2026-9-3 21:42

小辣椒 发表于 2026-9-3 21:41
问好玫瑰,谢谢欣赏,最简单的图图了,直接岁月的视频制作的背景图,我没有时间做图

小辣椒精彩的制作,精彩,可以挺好的。{:4_204:}

小辣椒 发表于 2026-9-3 22:05

玫瑰 发表于 2026-9-3 21:42
小辣椒精彩的制作,精彩,可以挺好的。

直接岁月视频截图做的背景,然后岁月的AE视频加一个效果,玫瑰也是可以去找个自己喜欢的视频做背景,这样做起来速度快多了

玫瑰 发表于 2026-9-3 22:09

小辣椒 发表于 2026-9-3 22:05
直接岁月视频截图做的背景,然后岁月的AE视频加一个效果,玫瑰也是可以去找个自己喜欢的视频做背景,这样 ...

你制作很好,精彩分享。{:4_204:}

红影 发表于 2026-9-3 23:01

漂亮,两个人都忽隐忽现的,亲爱的把效果运用得很好。{:4_199:}

马黑黑 发表于 2026-9-3 23:07

小辣椒 发表于 2026-9-3 21:31
@马黑黑

黑黑昨天下载了你后面的模板,歌词加不上去,后来上面加了个CSS,现在歌词可以出来了。

一切可控,关键是熟悉一下模板的代码结构,明晰哪跟哪儿

梦江南 发表于 2026-9-4 09:26

小辣椒,你的这一帖最简单画面也给阿姨带来了惊喜。{:4_187:}

梦江南 发表于 2026-9-4 09:31

给了我启发,向你学习。{:4_204:}

杨帆 发表于 2026-9-4 11:12

好听好看,谢谢小辣椒精彩分享{:4_204:}

小辣椒 发表于 2026-9-5 17:05

玫瑰 发表于 2026-9-3 22:09
你制作很好,精彩分享。

谢谢玫瑰的鼓励,小辣椒现在想玩的效果总是做不出来

小辣椒 发表于 2026-9-5 17:06

红影 发表于 2026-9-3 23:01
漂亮,两个人都忽隐忽现的,亲爱的把效果运用得很好。

亲爱的,我只是偷懒,图图,视频同一个效果,这样做帖速度快,不用做图了

小辣椒 发表于 2026-9-5 17:07

马黑黑 发表于 2026-9-3 23:07
一切可控,关键是熟悉一下模板的代码结构,明晰哪跟哪儿

开始用你前面那个模板,歌词不能出来就去找css了{:4_173:}

小辣椒 发表于 2026-9-5 17:09

梦江南 发表于 2026-9-4 09:26
小辣椒,你的这一帖最简单画面也给阿姨带来了惊喜。

谢谢阿姨总是鼓励小辣椒,其实阿姨做的都非常的漂亮,只是我还没有看完全,许多好作品我都没有去认证看和回帖的,真不好意思的{:4_201:}

小辣椒 发表于 2026-9-5 17:10

梦江南 发表于 2026-9-4 09:31
给了我启发,向你学习。

千万别这样说,小辣椒要阿姨学习的{:4_185:}

小辣椒 发表于 2026-9-5 17:10

杨帆 发表于 2026-9-4 11:12
好听好看,谢谢小辣椒精彩分享

问好杨帆,谢谢欣赏{:4_187:}

梦江南 发表于 2026-9-5 19:33

小辣椒 发表于 2026-9-5 17:09
谢谢阿姨总是鼓励小辣椒,其实阿姨做的都非常的漂亮,只是我还没有看完全,许多好作品我都没有去认证看和 ...

没关系的,你这么忙,就别回了。{:4_204:}
页: [1] 2
查看完整版本: 一生回味一面 ( 学习套用黑黑 异象 播放器效果 )