知为谁

马黑黑 · 发表于 2026-6-21 18:27

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

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

x

马黑黑 · 发表于 2026-6-21 18:27

帖子代码

<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/6/vwu.jpg') no-repeat center/cover; color: white; }
.player { width: 480px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
.pd-vid { mix-blend-mode: screen; opacity: 1; }
#msvg { position: absolute; width: 12vw; height: 12vw; top: 10%; transition: .75s; opacity: 1; border-radius: 50%; cursor: pointer; fill: none; stroke: url(#grd); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 var(--shadow-offset) 0 rgba(0,0,0,.75)); --shadow-offset: clamp(340px, 50vh, 800px); }
.path{ stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw linear 6s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
</style>
<div id="pa" class="pa">
<video class="pd-vid" src="https://img2.tukuppt.com/video_show/15653652/01/12/35/6193af432daf8.mp4" autoplay loop muted></video>
<svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<title>播放/暂停(Alt+X)</title>
<defs>
<linearGradient id="grd">
<stop offset="0%" stop-color="cyan" />
<stop offset="70%" stop-color="tan" />
</linearGradient>
</defs>
<g id="g1"></g>
</svg>
</div>
<script>
var options = {
pa: '.pa',
urls: [['https://music.163.com/song/media/outer/url?id=1336994546', '知为谁']],
btns: [msvg],
};
loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
});
function tzRun() {
var aud = new AudPlayer(options);
var dr = _dr(msvg);
var vertex1 = dr.circlePoints(26, 200, 180);
var vertex2 = dr.circlePoints(26, 200, 160);
var path = 'M', p0;
for (var i = 0; i < vertex1.length; i++) {
var v1 = vertex1[i].join(',');
if (i === 0) p0 = v1;
const v2 = vertex2[i].join(',');
path += i % 2 === 0 ? v1 + ' ' + v2 + ' ' : v2 + ' ' + v1 + ' ';
};
path += p0 + 'L120 0 A120 120,0 0 0,-120 0 A120 120, 1 0 0, 120 0';
dr.path(path).set('class', 'path').addTo(g1);
dr.elm.style.setProperty('--len', dr.elm.getTotalLength());
dr.elm.onanimationend = () => {
dr.elm.setAttribute('fill', 'url(#grd)');
setTimeout(() => g1.classList.add('rot'), 300);
};
}
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-21 18:31

辅助小播阴影：

辅助小播使用 svgdr 绘制，结合CSS实现关键帧动画，包括绘制过程和绘制完成后的旋转。而其中的阴影投递，是在 SVG 主元素 #msvg 选择其中利用 filter 滤镜属性的 drop-shadow 函数实现，阴影的垂直距离使用 clamp 函数做了个大概的规范，但没有测试过不同显示设备尺寸的适配情况（也许不理想）。