【黑师代码】时光

花简静 · 发表于 2024-1-26 20:45

本帖最后由花简静于 2024-2-19 20:22 编辑

<style>
#papa { 
    margin: 0 0 0 calc(50% - 830px);  
    width: 1500px; 
    height: 800px;
    top:130px; 
    background: url('https://pic.imgdb.cn/item/651be0ddc458853aef4fbe6d.webp') no-repeat center/cover; 
    box-shadow: 4px 4px 8px black; 
    overflow: hidden; 
    display: grid; 
    place-items: center; 
    z-index: 1; 
    position: relative; 
    --state: running; }
#papa::before {
    position: absolute; 
    content: url('https://638183.freep.cn/638183/t22/gif/star.gif'); 
    bottom: 100px;
    right:100px; 
   mix-blend-mode: screen; }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1950614369" autoplay="" loop=""></audio>
</div>
<script>(function() {
    let lrcAr = [
    [0.85,"单曲：等风的人",3.2],
    [4.05,"歌手：于果",1.3],
    [5.33,"所属专辑：等风的人",1.4],
    [6.74,"作词：唐思淼",0.9],
    [7.62,"作曲：季奎奎@关键节拍",0.7],
    [8.33,"学习黑师《十送红军》路径播放效果",2.8],
    [18.02,"总在深夜里赶路的人",2.5],
    [21.52,"月亮会为她点一盏灯",2.6],
    [25.17,"为什么我们风雨兼程",2.6],
    [28.5,"要让遇见先于爱发生",2.9],
    [32.19,"白昼和黑夜彼此陌生",2.8],
    [35.71,"它们无数次摆布晨昏",2.8],
    [39.53,"可是我要握紧擦肩那一瞬",4.9],
    [46.85,"我在等一阵风推动的重逢",3.3],
    [50.54,"摊开手扑了空谁会心疼",3.2],
    [54.01,"光阴冰冷思念沸腾的过程",3.3],
    [57.46,"是为了让我和你变成我们",3.1],
    [61.12,"在此刻当我们仰望着星辰",3.3],
    [64.77,"你会不会接住爱的可能",3.3],
    [68.33,"听见时空回应感叹声",3.4],
    [72.27,"那是我心事解封在狂奔",4.0],
    [93.05,"白昼和黑夜彼此陌生",2.7],
    [96.5,"它们无数次摆布晨昏",3.0],
    [100.07,"可是我要握紧擦肩那一瞬",5.3],
    [107.05,"我在等一阵风推动的重逢",4.0],
    [111.38,"摊开手扑了空谁会心疼",3.3],
    [114.82,"光阴冰冷思念沸腾的过程",3.3],
    [118.35,"是为了让我和你变成我们",3.0],
    [121.44,"在此刻当我们仰望着星辰",3.9],
    [125.64,"你会不会接住爱的可能",3.3],
    [129.17,"听见时空回应感叹声",3.4],
    [133.2,"那是我心事解封在狂奔",4.0],
    [137.19,"我在等一阵风推动的重逢",2.5],
    [139.99,"摊开手扑了空谁会心疼",3.3],
    [143.63,"亲爱的你听到的每一首歌",3.3],
    [147.13,"都是人类原始浪漫的回声",2.8],
    [150.61,"在此刻当我们仰望着星辰",3.3],
    [154.29,"你会不会接住爱的可能",3.3],
    [157.78,"听见时空回应感叹声",3.4],
    [161.81,"那是我心事解封在狂奔",4.5]
];
    let js1 = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js',
        js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
    let loadJs = (url,callback) => {
        let body = document.querySelector('body'), jsNode = document.createElement('script');
        jsNode.charset = 'utf-8';
        jsNode.setAttribute('src', url);
        body.appendChild(jsNode);
        jsNode.onload = () => callback();
    };
    loadJs(js1, () => {
        HCPlayer({
            papa: '#papa',
            lrcAr: lrcAr,
            lrc_css: 'bottom: 20px; --bg: linear-gradient(hsla(10,55%,40%,.15),hsla(120,26%,45%,.7)); color: #aaa;',
            fs_css: 'transform: translate(0,-35px); background: transparent;',
            player_css: 'transform: translate(-100px,0;); width: 1530px; height: 220px;',
            path: 'm295.59666,187.31717l59.22719,0c8.53721,-0.01641 14.36136,-7.47395 14.33293,-15.14608l0,-5.15872c16.90256,-0.01378 29.16563,-13.19376 29.15931,-28.5623c0.00632,-15.6422 -12.01603,-28.4934 -26.00967,-28.48224l-91.29163,0l0,62.20458c0.01327,8.44716 7.0183,15.12967 14.58187,15.14477zm73.55822,-65.64854l0,0l3.14964,0c11.58007,-0.01903 15.29457,11.35562 15.23897,16.86675c0.01137,8.89865 -6.33404,17.43309 -18.38861,16.60491l0,-33.47166zm-120.77633,69.43638c0.01074,11.49803 8.45002,16.83 15.24276,16.86281l122.51701,0c8.10251,-0.03281 15.20421,-6.64971 15.24023,-16.86281l-152.99999,0z',
            btn: {left: 265, top: 80},
            track: {track: 'olive', prog: 'snow'},
            img: {play: '', pause: ''}
        });
    });

    loadJs(js2, () => {
        H5lz({
            papa: '#papa',
            total: 10,
            size: {width: 60, height: 60},
            shape: {background: 'url("https://pic.imgdb.cn/item/651bcd7dc458853aef4b2075.png") no-repeat center/cover', borderRadius: '0'},
            ani: 'toTop',
            maxTime: 30,
            offset: {x: 0, y: 0},
        });
    });
})();
</script>
<br><br><br><br><br><br><br><br><br><br>