马黑黑 发表于 2023-9-29 15:15

月是故乡明

<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp2/yejk.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: 400px; height: 400px; top: 0; left: 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=1965108307" 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;',
                        fs_css: 'transform: translate(-100px,40px); color: #eee; background: transparent;',
                        player_css: 'transform: translate(-100px,0); width: 240px; height: 240px;',
                        path: 'm120.49999,62.44911c45.55863,-128.76177 224.05876,0 0,165.55087c-224.05876,-165.55087 -45.55863,-294.31264 0,-165.55087z',
                        btn: {left: 54, top: 100},
                        track: {track: 'tan', prog: 'olive'},
                        img: {play: '', pause: ''}
                });
        });

        loadJs(js2, () => {
                H5lz({
                        papa: '#sky',
                        total: 10,
                        size: {width: 36, 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>

马黑黑 发表于 2023-9-29 15:15

代码
<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp2/yejk.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: 400px; height: 400px; top: 0; left: 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=1965108307" 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;',
                        fs_css: 'transform: translate(-100px,40px); color: #eee; background: transparent;',
                        player_css: 'transform: translate(-100px,0); width: 240px; height: 240px;',
                        path: 'm120.49999,62.44911c45.55863,-128.76177 224.05876,0 0,165.55087c-224.05876,-165.55087 -45.55863,-294.31264 0,-165.55087z',
                        btn: {left: 54, top: 100},
                        track: {track: 'tan', prog: 'olive'},
                        img: {play: '', pause: ''}
                });
        });

        loadJs(js2, () => {
                H5lz({
                        papa: '#sky',
                        total: 10,
                        size: {width: 36, 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>

梦油 发表于 2023-9-29 15:26

祝黑黑先生中秋快乐、万事遂心。

马黑黑 发表于 2023-9-29 17:02

梦油 发表于 2023-9-29 15:26
祝黑黑先生中秋快乐、万事遂心。

{:4_191:}

醉美水芙蓉 发表于 2023-9-29 18:26

小辣椒 发表于 2023-9-29 19:13

这个有红心路径的播放器情人节用最合适了{:4_205:}

小辣椒 发表于 2023-9-29 19:14

小燕子太漂亮了{:4_199:}

小辣椒 发表于 2023-9-29 19:15

手机欣赏很完美{:4_199:}

马黑黑 发表于 2023-9-29 20:08

小辣椒 发表于 2023-9-29 19:13
这个有红心路径的播放器情人节用最合适了

{:4_172:}

马黑黑 发表于 2023-9-29 20:09

小辣椒 发表于 2023-9-29 19:15
手机欣赏很完美

应该还好

马黑黑 发表于 2023-9-29 20:09

小辣椒 发表于 2023-9-29 19:14
小燕子太漂亮了

{:4_181:}

马黑黑 发表于 2023-9-29 20:09

醉美水芙蓉 发表于 2023-9-29 18:26
欣赏老师佳作！

{:4_190:}

红影 发表于 2023-9-29 20:37

有了五角星的路径，现在又有了心形路径，这个制作太漂亮了{:4_199:}

马黑黑 发表于 2023-9-29 20:38

红影 发表于 2023-9-29 20:37
有了五角星的路径，现在又有了心形路径，这个制作太漂亮了

这个插件支持任何路径

红影 发表于 2023-9-29 20:38

小燕子的svg也好厉害，黑黑的帖子里都是金品啊{:4_199:}

马黑黑 发表于 2023-9-29 20:39

红影 发表于 2023-9-29 20:38
小燕子的svg也好厉害，黑黑的帖子里都是金品啊

银的银的，像月亮一样银白色{:4_170:}

红影 发表于 2023-9-29 20:40

月是故乡明，盛世明月今更圆。美丽的中秋节，美好的祝愿。欣赏黑黑好帖{:4_187:}

马黑黑 发表于 2023-9-29 20:51

红影 发表于 2023-9-29 20:40
月是故乡明，盛世明月今更圆。美丽的中秋节，美好的祝愿。欣赏黑黑好帖

祝中秋快乐

焱鑫磊 发表于 2023-9-29 21:45

黑黑老师中秋快乐！{:4_187:}

马黑黑 发表于 2023-9-29 22:08

焱鑫磊 发表于 2023-9-29 21:45
黑黑老师中秋快乐！

同乐同乐
页: [1] 2 3 4 5 6
查看完整版本: 月是故乡明