【黑师代码】你笑起来真好看

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

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


<style>
#papa { 
    margin: 0 0 0 calc(50% - 930px); 
    width: 1700px; 
    height: 920px; 
    top:130px;
    background: url('https://pic.imgdb.cn/item/6517f8b1c458853aef5411ca.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; }
#sky { 
    position: absolute; 
    width: 1700px; 
    height: 800px; 
    bottom: 0; 
    right: 0; 
    transform: rotate(30deg); 
}
</style>
<div id="papa">
<div id="sky"></div> 
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1457248961" autoplay="" loop=""></audio>
</div>
<script>(function() {
    let lrcAr = [
    [1.45,"单曲：你笑起来真好看",1.1],
    [2.5,"歌手：安安",1.0],
    [3.55,"所属专辑：你笑起来真好看",1.1],
    [4.62,"作词 : 周兵",1.0],
    [5.57,"作曲 : 李凯稠",0.4],
    [6.02,"想去远方的山川，想去海边看海鸥",5.7],
    [12.13,"不管风雨有多少，有你就足够",4.5],
    [17.75,"喜欢看你的嘴角，喜欢看你的眉梢",5.4],
    [23.52,"白云挂在那蓝天，像你的微笑",4.6],
    [28.94,"你笑起来真好看，像春天的花一样",4.7],
    [34.55,"把所有的烦恼所有的忧愁，统统都吹散",4.9],
    [40.26,"你笑起来真好看，像夏天的阳光",5.0],
    [46.33,"整个世界全部的时光，美得像画卷",4.6],
    [63.05,"想去远方的山川，想去海边看海鸥",5.7],
    [69.23,"不管风雨有多少，有你就足够",4.5],
    [74.92,"喜欢看你的嘴角，喜欢看你的眉梢",5.4],
    [80.65,"白云挂在那蓝天，像你的微笑",4.6],
    [86.03,"你笑起来真好看，像春天的花一样",4.9],
    [91.69,"把所有的烦恼所有的忧愁，统统都吹散",5.0],
    [97.44,"你笑起来真好看，像夏天的阳光",5.1],
    [103.48,"整个世界全部的时光，美得像画卷",4.6],
    [108.97,"你笑起来真好看，像春天的花一样",4.8],
    [114.56,"把所有的烦恼所有的忧愁，统统都吹散",5.0],
    [120.27,"你笑起来真好看，像夏天的阳光",5.1],
    [126.08,"整个世界全部的时光，美得像画卷",5.0],
    [131.78,"你笑起来真好看，像春天的花一样",4.8],
    [137.44,"把所有的烦恼所有的忧愁，统统都吹散",4.9],
    [143.1,"你笑起来真好看，像夏天的阳光",5.0],
    [149.23,"整个世界全部的时光，美得像画卷",4.6],
    [154.93,"整个世界全部的时光，美得像画卷",4.7]
];
    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(-100px,40px); color: #FF0000 background: transparent;',
            player_css: 'transform: translate(-400px,0;); width: 1930px; height: 420px;',
            path: 'm310.29249,52.84883l0,28.29044c-59.18432,3.98935 -105.79996,46.09556 -105.79999,97.44484c0,-9.25414 12.88002,-16.76469 28.75,-16.76469c15.86998,0 28.75,7.51055 28.75,16.76469c0,-9.25414 12.88002,-16.76469 28.75,-16.76469c7.5579,0 14.41662,1.75651 19.54999,4.54044l0,137.95953c0,6.16947 -4.12158,11.17649 -9.19999,11.17649c-5.07838,0 -9.2,-5.00702 -9.2,-11.17649l0,-5.58823l-18.4,0l0,5.58823c0,18.50822 12.36478,33.52942 27.6,33.52942c15.23518,0 27.60001,-15.02119 27.60001,-33.52942l0,-137.95953c5.13336,-2.78393 11.9921,-4.54044 19.54999,-4.54044c15.86998,0 28.75,7.51055 28.75,16.76469c0,-9.25414 12.88002,-16.76469 28.75,-16.76469c15.86998,0 28.75,7.51055 28.75,16.76469c0,-51.34931 -46.61564,-93.45549 -105.79999,-97.44484l0,-28.29044l-18.40002,0z',
            btn: {left: 254, top: 100},
            track: {track: 'lightgray', prog: 'olive'},
            img: {play: '', pause: ''}
        });
    });

    loadJs(js2, () => {
        H5lz({
            papa: '#sky',
            total: 10,
            size: {width:60, height: 32},
            shape: {background: 'url("https://638183.freep.cn/638183/web/svg/yjzi1.svg") no-repeat center/cover', borderRadius: '0'},
            ani: 'toLeft',
            maxTime: 30,
            offset: {x: 0, y: 0},
        });
    });
})();
</script>
<br><br><br><br><br><br><br><br><br>