孤星

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 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 = `[00:01.21]孤星\n[00:10.02]歌手一支榴莲\n[00:18.98]网易云音乐X中国数字音乐基地联合出品\n[00:20.58]如果我眼中的荒凉是你所谓的假象\n[00:28.44]承受人性的冷漠记得别声张\n[00:35.89]孤独分娩出另一个人借我肩膀\n[00:43.40]他用双手遮住这世界的喧嚷\n[00:50.61]他说我的心注定无法被谁捂热\n[00:54.41]怪双眼看不清这人间的颜色\n[00:58.16]他要我心如止水\n[00:59.77]别再承受世俗眼光的无情折磨\n[01:04.85]看绝望的倒影在海面结成冰\n[01:08.44]留住我别让我沉溺宿命\n[01:12.16]那黯淡的孤星是被埋没的姓名\n[01:16.32]我却叙意不清\n[01:19.74]看铺天的阴影已吞没了光明\n[01:23.36]没有谁在意爱是如何走向凋零\n[01:28.18]请抱紧自己留一刹的火星\n[01:58.37]孤独分娩出另一个人借我肩膀\n[02:05.91]他用双手遮住这世界的喧嚷\n[02:13.04]他说我的心注定无法被谁捂热\n[02:16.73]怪双眼看不清这人间的颜色\n[02:20.59]他要我心如止水\n[02:22.30]别再承受世俗眼光的无情折磨\n[02:27.17]看绝望的倒影在海面结成冰\n[02:30.95]留住我别让我沉溺宿命\n[02:34.69]那黯淡的孤星是被埋没的姓名\n[02:38.85]我却叙意不清\n[02:42.33]看铺天的阴影已吞没了光明\n[02:45.91]没有谁在意爱是如何走向凋零\n[02:50.54]请抱紧自己留一刹的火星\n[02:58.22]请抱紧自己留一刹的火星\n[03:10.10]感谢观赏`;
var options = {
pa: '.pa',
urls: [['https://music.163.com/song/media/outer/url?id=2066729125', '孤星']],
btns: [msvg],
};
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 动画围绕自己的圆心运行。