朵拉 发表于 2026-5-5 22:05

梦境里的算法（学习马黑黑梨雨夜归人效果）

<style>
.pa { margin: 20px auto; width: 1200px; height: 800px; left: calc(50% - 81px); transform: translateX(-50%); background: url('https://pic1.imgdb.cn/item/69f9f7f9a5f82cd27f48bbf9.jpg') no-repeat center/cover; box-shadow: 3px 4px 8px gray; position: relative; display: grid; place-items: center; z-index: 1; --opacity: 0; }
.player { width: 420px; bottom: 10px; right: 20px; color: gold; }
.pd-vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(circle at 92% 10%, transparent, transparent 7.5%, red); -webkit-mask: radial-gradient(circle at 92% 10%, transparent, transparent 7.5%, red); pointer-events: none; }
.btnFs { top: 20px; right: 20px; color: gold; }
</style>

<div class="pa">
    <video class="pd-vid" src="https://img.tukuppt.com/video_show/1863507/00/13/38/5df20bcb2b0fd.mp4" autoplay loop muted></video>
</div>

<script>
const options = {
    pa: '.pa',
    urls: [
      ['https://music.163.com/song/media/outer/url?id=3349092073', '照花台（R&B版）'],
      ['https://music.163.com/song/media/outer/url?id=3353815944', '花寂寥'],
      ['https://music.163.com/song/media/outer/url?id=3361159970', '无恙'],
      ['https://music.163.com/song/media/outer/url?id=3340702378', '指纹'],
      ['https://music.163.com/song/media/outer/url?id=3336361217', '下一个天亮'],
      ['https://music.163.com/song/media/outer/url?id=3334624689', '孤单心事'],
      ['https://music.163.com/song/media/outer/url?id=3365962084', '人生路漫漫'],
      ['https://music.163.com/song/media/outer/url?id=3332405643', '刻在我心底的名字'],
    ],
};

loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
    const aud = new AudPlayer(options);
});

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-5 22:06

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

马黑黑 发表于 2026-5-5 22:12

漂亮

红影 发表于 2026-5-5 22:16

漂亮，欣赏朵宝好帖{:4_187:}
页: [1]
查看完整版本: 梦境里的算法（学习马黑黑梨雨夜归人效果）