朵拉 发表于 2026-5-14 21:27

孤独Person（学习马黑黑错角效果）

<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/6a05ccda6ab1697a9de8aaef.jpg') no-repeat center/cover; color: white; }
.pa::after { position: absolute; content: ''; width: 100%; height: 100%; background: url('https://pic1.imgdb.cn/item/6a05c5146ab1697a9de8711c.jpg') 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: 200px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
#msvg { position: absolute; width: 8vw; heighht: 8vw; 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=3368415348', '孤独Person']],
    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,'red', 'white', 2).addTo(g1);
    dr.circle(0, 160, 30, 'red', '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>

朵拉 发表于 2026-5-14 21:30

@马黑黑
老师 晚上好，学生交作业，请指正{:4_190:}

马黑黑 发表于 2026-5-14 22:18

朵拉 发表于 2026-5-14 21:30
@马黑黑
老师 晚上好，学生交作业，请指正

{:4_199:}

小辣椒 发表于 2026-5-14 22:33

朵拉把外面一圈的小圆改了红颜色，漂亮{:4_199:}

小辣椒 发表于 2026-5-14 22:34

欣赏朵拉漂亮的制作{:4_199:}

红影 发表于 2026-5-15 18:20

漂亮，欣赏朵宝好帖{:4_199:}
页: [1]
查看完整版本: 孤独Person（学习马黑黑错角效果）