马黑黑老师 《错角》
<style>@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/1_r.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/2_r.webp') no-repeat center/cover; mask: linear-gradient(to right top, rgba(0,0,0,.5) 35%, rgba(0,0,0,.8) 55%); -webkit-mask: linear-gradient(90deg, rgba(0,0,0,.5) 35%, rgba(0,0,0,.8) 55%); z-index: -1; }
.player { width: 480px; left: 100px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
#msvg { position: absolute; width: 12vw; heighht: 12vw; transition: .75s; opacity: var(--opacity); }
</style>
<div id="pa" class="pa">
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2418175/00/18/94/5ef7a50c397ff.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>
<circle cx="0" cy="0" r="190" fill="transparent"></circle>
</g>
</svg>
</div>
<script>
var options = {
pa: '.pa',
urls: [['https://music.163.com/song/media/outer/url?id=2121092738', '错角']],
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.circle(0,0,15,'lightblue', 'white', 2).addTo(g1);
dr.circle(0, 160, 30, 'lightblue', 'white', 2).addTo(g1).rotates(7);
dr.circle(0, 100, 25, 'lightblue', 'white', 2).addTo(g1).rotates(7);
dr.circle(0, 50, 20, 'lightblue', 'white', 2).addTo(g1).rotates(7);
}
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>
<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_2565818">
帖子中间的图案使用 svgdr 插件绘制，核心代码：<br />
<div class="blockcode"><div id="code_Dpz"><ol><li> dr.circle(0,0,15,'lightblue', 'white', 2).addTo(g1);<br />
<li> dr.circle(0, 160, 30, 'lightblue', 'white', 2).addTo(g1).rotates(7);<br />
<li> dr.circle(0, 100, 25, 'lightblue', 'white', 2).addTo(g1).rotates(7);<br />
<li> dr.circle(0, 50, 20, 'lightblue', 'white', 2).addTo(g1).rotates(7);</ol></div><em onclick="copycode($('code_Dpz'));">复制代码</em></div>共四次画圆：<br />
<br />
（一）画最中间的圆；<br />
（二）画最外层的圆（7个）；<br />
（三）画从外往里的第二层圆（7个）；<br />
（四）画从外往里的第三层圆（7个）。<br />
<br />
可以考虑画其它图案。各层图案数不一、颜色不同，图案尺寸也可以是另外的变化。<br />
</td></tr></table>
漂亮~谢谢醉美管理员精彩分享 klxf 发表于 2026-5-13 22:01
漂亮~谢谢醉美管理员精彩分享
谢谢友友光临！
页:
[1]