《我独行天地间》 学习马老师的《孤星》作品
本帖最后由 霜染枫丹 于 2026-6-6 22:39 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('http://cccimg.com/view.php/c414f32f06957be25c05f3bbc6d3d508.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; height: 12vw; top: 15%; transition: .75s; opacity: 1; cursor: pointer; }
/* 图片旋转动画 - 中心点旋转 */
@keyframes rot {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
#cc {
cursor: pointer;
animation: rot 20s linear infinite var(--state);
transform-origin: 150px 150px;/* 图片中心点：左上角(0,0)偏移120px */
}
</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 = `《我独行在天地间》
词曲：五凉十坊武威特产馆
演唱：五凉十坊武威特产馆
制作：霜染枫丹
不问来时路不知归时途
有时天很低似在听我心声
我问天风归去往何方
天不语云自悠然
原来问也无问答也无声
风又起心渐空一切皆梦中
路有尽梦有终
不过浮世相逢
天不语地无言
我独行在天地间
花开一场梦 落去声无痕
有时地很静
似在听我叹息
我问地风吹向谁身旁
地无言风自去来
原来问也无问答也无声
风又起心渐空一切皆梦中
路有尽梦有终
不过浮世相逢
天不语地无言
我独行在天地间
风起时我在山巅
天很远心更远
天不语地无言
我独行在天地间
风不息心无边
天不语地无言
我独行在天地间`;
var options = {
pa: '.pa',
urls: [['http://cccimg.com/view.php/07bfc2c71dd9e398af681d8ec9aa69e5.mp3', '']],
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.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);
// 用图片替换蓝色圆球
var svgNS = "http://www.w3.org/2000/svg";
var img = document.createElementNS(svgNS, "image");
img.setAttributeNS(null, "id", "cc");
img.setAttributeNS(null, "href", "http://cccimg.com/view.php/37435e91a2b51908949c0177decd3e2b.png");
// 设置图片位置和大小 - 在中心点 (0,0) 周围
var imgSize = 300;// 图片直径，根据需求调整（最大400）
img.setAttributeNS(null, "x", -imgSize/2);
img.setAttributeNS(null, "y", -imgSize/2);
img.setAttributeNS(null, "width", imgSize);
img.setAttributeNS(null, "height", imgSize);
// 添加 CSS 类来控制动画
img.setAttributeNS(null, "class", "rotating-img");
msvg.appendChild(img);
// 添加 CSS 样式确保旋转中心正确
var style = document.createElement('style');
style.textContent = `
.rotating-img {
cursor: pointer;
animation: rot 20s linear infinite var(--state);
transform-origin: center;
transform-box: fill-box;
}
`;
document.head.appendChild(style);
}
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-6 20:37
看不到画面，
梦江南晚上好~~
我这里画面很正常，我发了2个地方，您再看看下面的网址是否能看到。感谢你的支持，祝您夏安~~
https://www.yueyijyw.com/forum.php?mod=viewthread&tid=1588
好漂亮的制作，很开阔的场景，和歌曲意境很相符。
小播也做成了星形，欣赏枫丹好帖{:4_199:} https://p2.itc.cn/q_70/images03/20210416/09a738a4032d4777919a34bdd88fa039.gif 梦江南 发表于 2026-6-6 20:37
看不到画面，
背景图片是彩虹盘的 红影 发表于 2026-6-6 21:15
好漂亮的制作，很开阔的场景，和歌曲意境很相符。
小播也做成了星形，欣赏枫丹好帖
红影晚上好~~
我是在这里才有机会学习了播放器的制作，很喜欢这种形式，感谢您的支持，恭祝夏安~~{:4_204:}{:4_190:}
也曾年轻 发表于 2026-6-6 21:23
感谢也曾年轻的支持鼓励。有朋友问我说彩虹盘提示我所在的地区禁止上传图片，我试了试这个还正常，还想上传一个就提示禁止了，原因不明。{:4_204:}{:4_190:}
霜染枫丹 发表于 2026-6-6 21:34
红影晚上好~~
我是在这里才有机会学习了播放器的制作，很喜欢这种形式，感谢您的支持，恭祝夏安~~{:4_ ...
枫丹还可以搜一下黑黑专版里之前的黑黑的播放器教程，都是特别好呢，你喜欢这个，真是来对地方了{:4_187:} 红影 发表于 2026-6-6 21:49
枫丹还可以搜一下黑黑专版里之前的黑黑的播放器教程，都是特别好呢，你喜欢这个，真是来对地方了{:4_187: ...
好的，我多过去看看，好好学习一下。谢谢红影{:4_204:}{:4_190:}
霜染枫丹 发表于 2026-6-6 21:58
好的，我多过去看看，好好学习一下。谢谢红影
以前的没封装时，每个功能都能独立的，还是彼此组合，特别好{:4_204:} 红影 发表于 2026-6-6 22:36
以前的没封装时，每个功能都能独立的，还是彼此组合，特别好
马老师这是宅心仁厚，每个作品都是用心写出来的，无私的分享给大家，关键处给以解析，不求回报，也不是炫技，而是实在的为喜欢这种形式的网友给以帮助。
我虽然注册的论坛不多，但没事我就到处溜达，唯有花潮有这样高质量的好帖。我也不喜欢用时间做那些无厘头的事情，就觉得在花潮很实在。这种感觉不太容易获得，我有自己的毛病，也有很多做得不精致不完美的事情，会去比较，绝不是盲从的性格。故而很喜欢花潮{:4_204:}{:4_190:}
霜染枫丹 发表于 2026-6-6 21:37
感谢也曾年轻的支持鼓励。有朋友问我说彩虹盘提示我所在的地区禁止上传图片，我试了试这个还正常，还想上 ...
刚试了下，还真是不给上传了{:5_102:}
谢谢告知。 好听好看，效果漂亮，谢谢枫丹老师精彩分享{:4_204:} 欣赏好听的歌曲好看的画面，点赞好制作。
我也常用彩虹外链，现在不行了吗？ 杨帆 发表于 2026-6-7 12:08
好听好看，效果漂亮，谢谢枫丹老师精彩分享
感谢扬帆的支持，下午好~~{:4_187:}{:4_204:}
魏淑芬 发表于 2026-6-7 12:24
欣赏好听的歌曲好看的画面，点赞好制作。
我也常用彩虹外链，现在不行了吗？
现在还是不能上传，不清楚原因。
感谢您的支持，下午好{:4_204:}{:4_190:}
霜染枫丹 发表于 2026-6-6 23:13
马老师这是宅心仁厚，每个作品都是用心写出来的，无私的分享给大家，关键处给以解析，不求回报，也不是炫 ...
多谢枫丹对花潮的认可。
马老师人品高尚，费心做了很多教学帖子，我们大家都是受益者。感觉很幸运呢{:4_187:}
页:
[1]