三人行
<style>@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/small/2026/srx.webp') no-repeat center/cover; color: lightblue; }
.player { width: 480px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
#player2 { bottom: 8%; width: 12vw; height: 8vw; cursor: pointer; transform: rotateX(45deg);position: absolute; }
.ball { width: 30px; height: 30px; background: lightblue; border-radius: 55%; offset-path: ellipse(50% 33.3%); offset-distance: 0%; animation: circle 6s linear infinite var(--state); }
.ball:nth-of-type(2) { background: tan; animation-delay: -2s; }
.ball:nth-of-type(3) { background: teal; animation-delay: -4s; }
@keyframes circle { to { offset-distance: 100%; } }
</style>
<div id="pa" class="pa">
<video class="pd-vid" src="https://img2.tukuppt.com/video_show/2269348/00/14/14/5e1bbb3034ad7.mp4" autoplay loop muted></video>
<div id="player2">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
</div>
<script>
var options = {
pa: '.pa',
urls: [['https://music.163.com/song/media/outer/url?id=3389281646', '三人行']],
btns: ,
};
loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
loadJs('https://638183.freep.cn/638183/web/api/yslrc.min.js', tzRun());
});
function tzRun() {
var aud = new AudPlayer(options);
}
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> 帖子代码：
<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/small/2026/srx.webp') no-repeat center/cover; color: lightblue; }
.player { width: 480px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
#player2 { bottom: 8%; width: 12vw; height: 8vw; cursor: pointer; transform: rotateX(45deg);position: absolute; }
.ball { width: 30px; height: 30px; background: lightblue; border-radius: 55%; offset-path: ellipse(50% 33.3%); offset-distance: 0%; animation: circle 6s linear infinite var(--state); }
.ball:nth-of-type(2) { background: tan; animation-delay: -2s; }
.ball:nth-of-type(3) { background: teal; animation-delay: -4s; }
@keyframes circle { to { offset-distance: 100%; } }
</style>
<div id="pa" class="pa">
<video class="pd-vid" src="https://img2.tukuppt.com/video_show/2269348/00/14/14/5e1bbb3034ad7.mp4" autoplay loop muted></video>
<div id="player2">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
</div>
<script>
var options = {
pa: '.pa',
urls: [['https://music.163.com/song/media/outer/url?id=3389281646', '三人行']],
btns: ,
};
loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
loadJs('https://638183.freep.cn/638183/web/api/yslrc.min.js', tzRun());
});
function tzRun() {
var aud = new AudPlayer(options);
}
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>
辅助小播：
#player2 选择器（代码06行）对应的 div 元素（代码15~19行）带 3 个子元素，class="ball"。这 3 个子元素运行 circle 关键帧动画，有时间差，因此分布在椭圆圆周不同的位置。动画是相抵路径动画，offset-path 已经支持 SVG 形状（圆、矩形等），还有射线（ray）。容器元素在X轴做一些倾斜，以适配视频图案。 很有创意的特效，欣赏并学习 姚云裳 发表于 2026-7-24 20:01
很有创意的特效，欣赏并学习
晚上好！ 富有创意，意境深远，谢谢马老师精彩示范{:4_190:} 杨帆 发表于 2026-7-24 20:09
富有创意，意境深远，谢谢马老师精彩示范
{:4_180:} 用这些小球做播放器，和背景视频十分相符，漂亮{:4_187:} 黑黑又一个新的制作，小辣椒几天没有来了，黑黑最近高产的{:4_178:} 小辣椒欣赏加学习{:4_187:} 黑黑老师的这三人行音画，小播的效果特别吸引人。欣赏学习了。{:4_187:} 梦江南 发表于 2026-7-25 13:02
黑黑老师的这三人行音画，小播的效果特别吸引人。欣赏学习了。
{:4_191:} 小辣椒 发表于 2026-7-24 22:48
小辣椒欣赏加学习
{:4_190:} 小辣椒 发表于 2026-7-24 22:47
黑黑又一个新的制作，小辣椒几天没有来了，黑黑最近高产的
{:4_180:} 红影 发表于 2026-7-24 22:22
用这些小球做播放器，和背景视频十分相符，漂亮
感谢支持 马黑黑 发表于 2026-7-25 20:57
感谢支持
不客气啊，问好黑黑{:4_187:} 红影 发表于 2026-7-25 22:54
不客气啊，问好黑黑
同问 马黑黑 发表于 2026-7-26 00:01
同问
谢谢{:4_187:} 红影 发表于 2026-7-26 21:59
谢谢
不客气 马黑黑 发表于 2026-7-26 23:49
不客气
必须的{:4_173:}
页:
[1]
2