醉美水芙蓉 发表于 2024-4-29 19:26

人生不过是舍与得

本帖最后由 醉美水芙蓉 于 2024-4-29 21:15 编辑 <br /><br /> <style>
    #papa { margin: 100px 0 0 calc(50% - 780px); width: 1395px; height: 800px; background: url('https://pic.imgdb.cn/item/662f7ea70ea9cb1403051e44.png ') no-repeat center/cover; z-index: 1; position: relative; }
    #play { position: absolute; width: 100px; left: calc(50% - 50px); top: 80%; left: 8%; opacity: .7; cursor: pointer; animation: rot 5s linear infinite var(--state); }
    @keyframes rot { to { transform: rotate(360deg); } }

#dt3{ position: absolute; width: 32px; height: 32px; top: 83px; left: 700px; }

#dt4{ position: absolute; width: 32px; height: 32px; top: 75px; left: 925px; }

</style>

<div id="papa">

<img id="dt3" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg" alt="" />

<img id="dt4" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg" alt="" />


    <audio id="aud" src="https://cccimg.com/view.php/2a97ee9ac074ed70303b4951bf390228.mp3" loop autoplay></audio>
    <img id="play" src="https://638183.freep.cn/638183/web/svg/sunfl-2.svg" 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: 'left: 520px;bottom: 80px;',
    });
});

//粒子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-29 20:05

https://s3.bmp.ovh/imgs/2023/05/24/d90e46c0779fdc6b.gif

醉美水芙蓉 发表于 2024-4-29 21:13

起个网名好难 发表于 2024-4-29 20:05


谢谢老师光临！

红影 发表于 2024-4-29 21:17

漂亮的制作，欣赏水芙蓉美女好帖{:4_187:}

醉美水芙蓉 发表于 2024-4-29 21:20

红影 发表于 2024-4-29 21:17
漂亮的制作，欣赏水芙蓉美女好帖

问候红影晚上好！

小文 发表于 2024-4-29 22:06

漂亮的制作

醉美水芙蓉 发表于 2024-4-29 22:12

小文 发表于 2024-4-29 22:06
漂亮的制作

谢谢朋友光临！

红影 发表于 2024-4-29 23:17

醉美水芙蓉 发表于 2024-4-29 21:20
问候红影晚上好！

问好水芙蓉美女，晚上好{:4_187:}

老谟深虑 发表于 2024-4-30 19:48

          欣赏老师的音画佳作，点赞！
页: [1]
查看完整版本: 人生不过是舍与得