朵拉 发表于 2023-10-13 19:03

须尽欢（马黑黑原创）

本帖最后由 朵拉 于 2023-10-13 19:48 编辑 <br /><br /><style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/6529273fc458853aefb1159e.jpg') 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'); top: 50px; mix-blend-mode: screen; }
</style>

<div id="papa">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1912716876" autoplay loop></audio>
</div>

<script>

(function() {
      let lrcAr = [ ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ];
      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: 'top: 20px; --bg: linear-gradient(rgba(200,10,20,.35),rgba(200,10,20,.17)); color: #aaa;',
                        fs_css: 'transform: translate(0,-35px); background: transparent;',
                        player_css: 'width: 200px; height: 60px; top: 80px;',
                        path: 'M10 45 a5 5 0 0 1 5 -5 h170 a5 5 0 0 1 5 5 v5 a5 5 0 0 1 -5 5 h-170 a5 5 0 0 1 -5 -5 v-5',
                        btn: {left: 34, top: 0},
                        track: {track: 'olive', prog: 'snow'},
                        img: {play: '', pause: ''}
                });
      });

      loadJs(js2, () => {
                H5lz({
                        papa: '#papa',
                        total: 15,
                        size: {width: 32, height: 32},
                        shape: {background: 'url("https://638183.freep.cn/638183/t23/btn/hshx.png") no-repeat center/cover', borderRadius: '0'},
                        ani: 'toTop',
                        maxTime: 30,
                        offset: {x: 0, y: 0},
                });
      });
})();

</script>

朵拉 发表于 2023-10-13 19:50

@马黑黑
马师 晚上好，学生交作业，
请教 同步歌词颜色怎么调{:4_190:}

千羽 发表于 2023-10-13 20:28

进来欣赏学习朵拉的精美制作，好漂亮啊{:4_187:}

马黑黑 发表于 2023-10-13 20:46

朵拉 发表于 2023-10-13 19:50
@马黑黑
马师 晚上好，学生交作业，
请教 同步歌词颜色怎么调

lrc_css: '...',

这个是调整歌词UI的

红影 发表于 2023-10-13 20:54

字体漂亮，欣赏朵宝好帖{:4_187:}

小辣椒 发表于 2023-10-13 21:47

欣赏朵拉的精彩制作{:4_171:}
页: [1]
查看完整版本: 须尽欢（马黑黑原创）