马黑黑 发表于 2026-5-7 12:08

伤逝

<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/sg.webp') no-repeat center/cover; color: white; }
.pa::after { position: absolute; content: ''; width: 100%; height: 100%; background: url('https://638183.freep.cn/638183/t24/w8/c5.webp') no-repeat center/cover; -webkit-mask: linear-gradient(60deg, red 40%, transparent 60%, transparent 80%, red); mask: linear-gradient(60deg, red 40%, transparent 60%, transparent 80%, red); z-index: -1; }
.player { width: 480px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
#msvg { position: absolute; bottom: 60px; width: 12vw; heighht: 12vw; opacity: var(--opacity); }
</style>

<div id="pa" class="pa">
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2629112/00/08/50/5d24ac1d41cf5.mp4" autoplay loop muted></video>
<svg id="msvg" class="rot sepia" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
    <title>播放/暂停(Alt+X)</title>
</svg>
</div>

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

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

function tzRun() {
    var aud = new AudPlayer(options);
    var dr = _dr(msvg);
    dr.gradient('radialGradient', {id: 'grd', cx: 0.45, cy: 0.25, r: 0.4}, [['cyan', 0.25], ['teal', 0.55], ['silver', 0.85]]);
    dr.path('M0 -190 Q80 0,0 190 Q-80 0,0 -190', 'transparent', 'url(#grd)', 5, 'round').rotates(5, 180);
}

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-7 12:09

帖子代码

<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/sg.webp') no-repeat center/cover; color: white; }
.pa::after { position: absolute; content: ''; width: 100%; height: 100%; background: url('https://638183.freep.cn/638183/t24/w8/c5.webp') no-repeat center/cover; -webkit-mask: linear-gradient(60deg, red 40%, transparent 60%, transparent 80%, red); mask: linear-gradient(60deg, red 40%, transparent 60%, transparent 80%, red); z-index: -1; }
.player { width: 480px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
#msvg { position: absolute; bottom: 60px; width: 12vw; heighht: 12vw; opacity: var(--opacity); }
</style>

<div id="pa" class="pa">
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2629112/00/08/50/5d24ac1d41cf5.mp4" autoplay loop muted></video>
<svg id="msvg" class="rot sepia" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
    <title>播放/暂停(Alt+X)</title>
</svg>
</div>

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

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

function tzRun() {
    var aud = new AudPlayer(options);
    var dr = _dr(msvg);
    dr.gradient('radialGradient', {id: 'grd', cx: 0.45, cy: 0.25, r: 0.4}, [['cyan', 0.25], ['teal', 0.55], ['silver', 0.85]]);
    dr.path('M0 -190 Q80 0,0 190 Q-80 0,0 -190', 'transparent', 'url(#grd)', 5, 'round').rotates(5, 180);
}

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-7 12:16

本帖：

（一）使用 audioplayer 制作单曲帖子（参见代码第 20 行）；

（二）使用 svg 做自定义添加音频控制器（兼顾美化帖子之用，参见代码 12~14 行、25行、30~32行）；

（三）使用 CSS mask 属性融合两张帖子背景图片（参见代码 03~04行）。

关于 mask：

mask 属性自 chrome 120 起均以完美支持，但为考虑兼容 120- 版本，仍需提供 -webkit- 前缀。通常的做法是带前缀的放前面，不带前缀的放后面。

小辣椒 发表于 2026-5-7 12:39

伤感音乐，容易打动人心{:4_170:}

小辣椒 发表于 2026-5-7 12:39

欣赏黑黑好制作，小辣椒欣赏加学习{:4_187:}

梦江南 发表于 2026-5-7 15:21

图图的设计大有一种伤逝感，黑黑老师真是匠心独运，细节精致入微！{:4_187:}

杨帆 发表于 2026-5-7 16:52

精致漂亮，谢谢马老师精彩示范{:4_191:}

马黑黑 发表于 2026-5-7 19:25

杨帆 发表于 2026-5-7 16:52
精致漂亮，谢谢马老师精彩示范

{:4_180:}

马黑黑 发表于 2026-5-7 19:25

梦江南 发表于 2026-5-7 15:21
图图的设计大有一种伤逝感，黑黑老师真是匠心独运，细节精致入微！

{:4_180:}

马黑黑 发表于 2026-5-7 19:25

小辣椒 发表于 2026-5-7 12:39
伤感音乐，容易打动人心

真理

马黑黑 发表于 2026-5-7 19:26

小辣椒 发表于 2026-5-7 12:39
欣赏黑黑好制作，小辣椒欣赏加学习

{:4_180:}

红影 发表于 2026-5-7 21:13

图片融合后很漂亮，小播也极美。
欣赏黑黑好帖{:4_199:}

马黑黑 发表于 2026-5-7 21:15

红影 发表于 2026-5-7 21:13
图片融合后很漂亮，小播也极美。
欣赏黑黑好帖

{:4_180:}

小辣椒 发表于 2026-5-7 21:51

马黑黑 发表于 2026-5-7 19:25
真理

伤感歌曲也是欺骗感情的良药{:4_170:}

朵拉 发表于 2026-5-7 22:25

老师这效果绝美，学生已交作业，请您指正{:4_190:}

马黑黑 发表于 2026-5-8 12:41

朵拉 发表于 2026-5-7 22:25
老师这效果绝美，学生已交作业，请您指正

{:4_180:}

马黑黑 发表于 2026-5-8 12:41

小辣椒 发表于 2026-5-7 21:51
伤感歌曲也是欺骗感情的良药

是往伤口上撒盐

小辣椒 发表于 2026-5-8 21:52

马黑黑 发表于 2026-5-8 12:41
是往伤口上撒盐

这个感觉黑黑理解错误了{:4_170:}
页: [1]
查看完整版本: 伤逝