孤星 - 音乐沙龙 - 花潮论坛 - Powered by Discuz! Archiver

马黑黑 发表于 2026-6-5 12:16

孤星

马黑黑 发表于 2026-6-5 12:17

帖子代码

<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://pic3.zhimg.com/v2-f0e81215252f2b72103ff5b8c428a612_r.jpg') no-repeat center/cover; color: lightblue; }
.player { width: 480px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
#lrc { top: 4%; }
#msvg { position: absolute; width: 12vw; heighht: 12vw; top: 15%; transition: .75s; opacity: 1; }
#cc { transform-box: fill-box; transform-origin: center; cursor: pointer; animation: rot 20s linear infinite var(--state); }
</style>

<div id="pa" class="pa">
<video class="pd-vid" src="https://img2.tukuppt.com/video_show/2418175/00/02/20/5b51fecde9934.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 = `孤星\n歌手一支榴莲\n网易云音乐X中国数字音乐基地联合出品\n如果我眼中的荒凉是你所谓的假象\n承受人性的冷漠记得别声张\n孤独分娩出另一个人借我肩膀\n他用双手遮住这世界的喧嚷\n他说我的心注定无法被谁捂热\n怪双眼看不清这人间的颜色\n他要我心如止水\n别再承受世俗眼光的无情折磨\n看绝望的倒影在海面结成冰\n留住我别让我沉溺宿命\n那黯淡的孤星是被埋没的姓名\n我却叙意不清\n看铺天的阴影已吞没了光明\n没有谁在意爱是如何走向凋零\n请抱紧自己留一刹的火星\n孤独分娩出另一个人借我肩膀\n他用双手遮住这世界的喧嚷\n他说我的心注定无法被谁捂热\n怪双眼看不清这人间的颜色\n他要我心如止水\n别再承受世俗眼光的无情折磨\n看绝望的倒影在海面结成冰\n留住我别让我沉溺宿命\n那黯淡的孤星是被埋没的姓名\n我却叙意不清\n看铺天的阴影已吞没了光明\n没有谁在意爱是如何走向凋零\n请抱紧自己留一刹的火星\n请抱紧自己留一刹的火星\n感谢观赏`;

var options = {
   pa: '.pa',
   urls: [['https://music.163.com/song/media/outer/url?id=2066729125', '孤星']],
   btns: ,
};

loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js?v0', 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);
   LRC(aud.pa, aud.aud, gc, 0.5);
   var dr = _dr(msvg);
   dr.gradient('radialGradient', {id: 'grd', cx: '30%', cy: '25%', r: '70%'}, '<stop offset="0%" stop-color="#eff" /><stop offset="50%" stop-color="#4da6ff" /><stop offset="100%" stop-color="#003d82" />');
   dr.path('M-180 50 A90 80, 0, 0, 0, 180 -50', 'none', 'lightgreen', 4);
   dr.path('M-170 -50 A80 70, 0, 0, 0, 170 50', 'none', 'lightgreen', 5);
   dr.path('M-160 0 A60 55, 0, 0, 0, 160 0', 'none', 'lightgreen', 4);
   dr.circle(0, -20, 140, 'url(#grd)').id('cc');
}

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-6-5 12:31

辅助小播：

蓝色星球的绘制请参阅：svg蓝色星球 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!

这里：

（一）星球下面的装饰是三个 path 路径，都是半弧（A指令）图形，起止点略有差错、xy半径各有不同；

（二）圆球设置了id（cc），对应的CSS选择器 #cc 设置了svg图形的几个重要属性，一是 transform-box，二是 transform-origin，确保圆形作为svg子元素的 animation 动画围绕自己的圆心运行。

马黑黑 发表于 2026-6-5 12:34

歌词：

（一）声明歌词变量在 17 行；

（二）引用歌词插件代码在 33 行，第三个参数 0.5 可以缺省；

（三）歌词位置通过 CSS 设置，代码在 06 行。

马黑黑 发表于 2026-6-5 12:37

全屏按钮、播放控制器颜色问题：

audioplayer 插件使用 currentColor 做边框颜色、文本色等，所以，帖子容器选择器 #pa{} 里统一设置一个 color 属性即可；如果需要单独设置全屏按钮、播放器控制器的边框色、文本色，可在对应选择其中加入 color 属性设置。

马黑黑 发表于 2026-6-5 12:39

本帖制作之时，希望辅助小播不自动消失，因此，在对应CSS选择器（07行代码）中将 opacity 设置为 1（如果希望自动消失显示，opacity 属性值数额为 --opacity 即可）。

梦江南 发表于 2026-6-5 12:59

欣赏黑黑老师的精彩音画。谢谢分享！{:4_187:}

梦如影音 发表于 2026-6-5 14:56

好震撼的精彩音画制作！

红影发表于 2026-6-5 16:25

场景很开阔，因为比例设置得好，感觉场景又开阔又深邃，小球播放器很别致。
这帖子制作真漂亮，歌曲也很好听，很特别{:4_187:}

霜染枫丹 发表于 2026-6-5 17:42

这个我需要慢慢理解，很感谢马老师对作品的解析。

画面的苍凉感很有视觉冲击，赞佩！{:4_204:}{:4_190:}

马黑黑 发表于 2026-6-5 17:59

霜染枫丹发表于 2026-6-5 17:42
这个我需要慢慢理解，很感谢马老师对作品的解析。

画面的苍凉感很有视觉冲击，赞佩！ ...

帖子使用了三个JS插件，都是自家制作的：

1. audioplayer，帖子播放器插件；
2. svgdr，绘制矢量图插件；
3. yslrc，原生LRC歌词同步插件。

马黑黑 发表于 2026-6-5 18:00

红影发表于 2026-6-5 16:25
场景很开阔，因为比例设置得好，感觉场景又开阔又深邃，小球播放器很别致。
这帖子制作真漂亮，歌曲也很好 ...

谢赞！

马黑黑 发表于 2026-6-5 18:00

梦如影音发表于 2026-6-5 14:56
好震撼的精彩音画制作！

下午好！

马黑黑 发表于 2026-6-5 18:00

梦江南发表于 2026-6-5 12:59
欣赏黑黑老师的精彩音画。谢谢分享！

下午嚎！

霜染枫丹 发表于 2026-6-5 18:07

马黑黑发表于 2026-6-5 17:59
帖子使用了三个JS插件，都是自家制作的：

1. audioplayer，帖子播放器插件；

这个形式我挺喜欢的，很有内涵，有很大的发挥空间，反正我也写不出来，绝不做无用功，那就强盗逻辑开顺了{:4_173:}我试着套用做一个，前面那个多段落的也特别好。{:4_190:}

马黑黑 发表于 2026-6-5 18:08

霜染枫丹发表于 2026-6-5 18:07
这个形式我挺喜欢的，很有内涵，有很大的发挥空间，反正我也写不出来，绝不做无用功，那就强盗逻辑开顺了 ...

CSS还是应该了解一点的，至少可以随意布置某个东东放在帖子的那个地方

霜染枫丹 发表于 2026-6-5 18:16

马黑黑发表于 2026-6-5 18:08
CSS还是应该了解一点的，至少可以随意布置某个东东放在帖子的那个地方

不用到其他地方找教程，您这里在我溜达过的范围里是全网最好的，我就通过您的这些教程和示范帖子，好好领会就够了。{:4_190:}

玫瑰发表于 2026-6-5 18:21

精彩的分享，特别喜欢这里的特效。

马黑黑 发表于 2026-6-5 20:09

玫瑰发表于 2026-6-5 18:21
精彩的分享，特别喜欢这里的特效。

感谢支持！晚上好！

马黑黑 发表于 2026-6-5 20:10

霜染枫丹发表于 2026-6-5 18:16
不用到其他地方找教程，您这里在我溜达过的范围里是全网最好的，我就通过您的这些教程和示范帖子，好好领 ...

{:4_190:}

页: [1] 2 3

花潮论坛's Archiver

孤星