朵拉 发表于 2024-4-19 20:41

你 的（马黑黑原创）

本帖最后由 朵拉 于 2024-4-19 23:06 编辑 <br /><br /><style>
    #papa { margin: 0 0 0 calc(50% - 721px); width: 1280px; height: 720px; background: url('https://pic.imgdb.cn/item/6622677e0ea9cb1403a6a43a.jpg') no-repeat center/cover; display: grid; place-items: center; overflow: hidden; user-select: none; position: relative; }
    #play { position: absolute; left: 850px; top: 500px; animation: rot 6s linear infinite var(--state); z-index: 9; cursor: pointer; }
    #papa video { position: absolute; top: -200px; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
    @Keyframes rot { to { transform: rotate(360deg); }    }
</style>
   
<div id="papa">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2063131354" loop autoplay></audio>
    <video src="https://img.tukuppt.com/video_show/2475824/00/01/58/5b56a385e42de.mp4" loop muted></video>
    <imgid="play" src="https://638183.freep.cn/638183/small/ujye.webp" width="150" height="150" alt="" />
</div>

<script>

//函数 ：加载JS资源
var loadJs = (file, callback) => {
    var sc = document.createElement('script');
    sc.src = file;
    sc.charset = 'utf-8';
    document.body.appendChild(sc);
    sc.onload = () => callback();
};

var js1 = 'https://638183.freep.cn/638183/web/api/lrc.js';
var js2 = 'https://638183.freep.cn/638183/web/js/ball-lz.js';

//歌词js先加载并用回调方式配置参数
loadJs(js1, () => {
    LRC({
      papa: '#papa',
      lrcAr: lrcAr,
      btn: '#play',
      lrc_css: 'top: 20px;',
    });
});

//粒子js后加载,
loadJs(js2, () => {});
//配置粒子
var lz = {papa: '#papa', total: 40, maxsize: 20, speed: 1, move: true};

var lrcAr = [
      ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

papa.onclick = () => lz.move = !aud.paused; //控制粒子

</script>

朵拉 发表于 2024-4-19 21:06

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

小辣椒 发表于 2024-4-19 21:24

问好朵拉，欣赏精彩的制作，粒子效果美美的

走过岁月 发表于 2024-4-19 21:24

来欣赏朵拉的作品

走过岁月 发表于 2024-4-19 21:25

好温馨浪漫

红影 发表于 2024-4-19 22:17

漂亮。欣赏朵宝好帖{:4_187:}

朵拉 发表于 2024-4-19 23:10

小辣椒 发表于 2024-4-19 21:24
问好朵拉，欣赏精彩的制作，粒子效果美美的

感谢小辣椒临帖，么么哒{:4_204:}

朵拉 发表于 2024-4-19 23:11

走过岁月 发表于 2024-4-19 21:25
好温馨浪漫

欢迎岁月老师常来，上好茶{:4_190:}

朵拉 发表于 2024-4-19 23:12

红影 发表于 2024-4-19 22:17
漂亮。欣赏朵宝好帖

感谢影宝临帖，么么哒{:4_204:}

樵歌 发表于 2024-4-20 07:38

这俩一缠绵，天上花雨就飘落了，真浪漫又美妙{:4_189:}

红影 发表于 2024-4-20 09:33

朵拉 发表于 2024-4-19 23:12
感谢影宝临帖，么么哒

问好朵宝，周六快乐{:4_187:}

小辣椒 发表于 2024-4-21 17:16

朵拉 发表于 2024-4-19 23:10
感谢小辣椒临帖，么么哒

朵拉么么哒{:4_185:}

愤怒的葡萄 发表于 2024-4-22 12:56

歌挺好听的，感谢楼主分享。
页: [1]
查看完整版本: 你 的（马黑黑原创）