Synthetech

马黑黑 发表于 2026-5-26 20:44

马黑黑 发表于 2026-5-26 20:45

帖子代码：
<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/synn.webp') no-repeat center/cover; color: white; }
.player { width: 480px; left: 100px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
#msvg { position: absolute; width: 20vw; heighht: 20vw; transition: .75s; opacity: var(--opacity); left: 10%; }
</style>

<div id="pa" class="pa">
<video class="pd-vid" src="https://img2.tukuppt.com/video_show/2414777/00/02/13/5b514e39921d5.mp4" autoplay loop muted></video>
<svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
   <g id="g1" class="rot brightness">
         <title>播放/暂停(Alt+X)</title>
   </g>
</svg>
</div>

<script>
var options = {
   pa: '.pa',
   urls: [['https://music.163.com/song/media/outer/url?id=1371757762', '曲名']],
   btns: ,
};

loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js?v0', function() {
   loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js?v0', tzRun);
});

function tzRun() {
   var aud = new AudPlayer(options);
   var dr = _dr(msvg);
   dr.ellipse(0, 20, 120, 30, 'rgba(0,100,100, .25)').addTo(g1).rotates(9);
}

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-5-26 20:46

帖子没有什么新的东东，唯小播造型可能略为新鲜，核心代码在 32 行。

霜染枫丹 发表于 2026-5-26 21:08

有时候在一个特定的画面，小播作用很大，不合适的时候看着就是不舒服{:4_204:}{:4_190:}。感谢马老师的分享，我先收藏在制作。

马黑黑 发表于 2026-5-26 21:20

霜染枫丹发表于 2026-5-26 21:08
有时候在一个特定的画面，小播作用很大，不合适的时候看着就是不舒服。感谢马老师的分享 ...

{:4_191:}

红影发表于 2026-5-27 20:27

旋转出来的图案总是漂亮的。
欣赏黑黑好帖{:4_199:}

马黑黑 发表于 2026-5-27 20:41

红影发表于 2026-5-27 20:27
旋转出来的图案总是漂亮的。
欣赏黑黑好帖

谢谢

杨帆发表于 2026-5-27 21:49

马黑黑发表于 2026-5-26 20:46
帖子没有什么新的东东，唯小播造型可能略为新鲜，核心代码在 32 行。

画面音乐，新颖别致。为何我这看不到小播呢？

马黑黑 发表于 2026-5-27 22:29

杨帆发表于 2026-5-27 21:49
画面音乐，新颖别致。为何我这看不到小播呢？

小播在左侧，鼠标移入帖子出现，移到小播高亮

杨帆发表于 2026-5-27 22:44

本帖最后由杨帆于 2026-5-27 22:46 编辑 <br /><br />马黑黑发表于 2026-5-27 22:29
小播在左侧，鼠标移入帖子出现，移到小播高亮

是，鼠标移入帖子出现进度条

但未显示小播，不知其因

马黑黑 发表于 2026-5-27 22:56

杨帆发表于 2026-5-27 22:44
本帖最后由杨帆于 2026-5-27 22:46 编辑

是，鼠标移入帖子出现进度条

你去这里看看有木有：

http://mhh.52qingyin.cn/art/bshow.php?st=3&sd=3&art=mahei_1779801800

杨帆发表于 2026-5-27 23:01

马黑黑发表于 2026-5-27 22:56
你去这里看看有木有：

http://mhh.52qingyin.cn/art/bshow.php?st=3&sd=3&art=mahei_1779801800

这里可以看到呀，什么原因？

马黑黑 发表于 2026-5-27 23:36

杨帆发表于 2026-5-27 23:01
这里可以看到呀，什么原因？

代码基本一样，就一个 CSS 变量值 --offsetX 不同而已。估计存在兼容性问题，或者是你的浏览器缓存（论坛部分）长时间未清理过产生了冗余

杨帆发表于 2026-5-28 00:03

马黑黑发表于 2026-5-27 23:36
代码基本一样，就一个 CSS 变量值 --offsetX 不同而已。估计存在兼容性问题，或者是你的浏览器缓存（论坛 ...

知道了，谢谢老师{:4_190:}

马黑黑 发表于 2026-5-28 20:30

杨帆发表于 2026-5-28 00:03
知道了，谢谢老师

{:4_190:}

小辣椒 发表于 2026-5-30 22:28

这个和我前面做的那个好像差不多的，黑黑的播放器现在都是隐藏了，{:4_199:}

小辣椒 发表于 2026-5-30 22:28

这个可以套用玩一次的。

马黑黑 发表于 2026-5-30 23:23

小辣椒发表于 2026-5-30 22:28
这个可以套用玩一次的。

{:4_190:}

页: [1]

花潮论坛's Archiver

Synthetech