红影 发表于 2023-10-7 20:50

《让世界为你转身》（学习黑黑SVG路径播放器）

<style>
#papa { margin: 80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/651ec40fc458853aef504550.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; }
#vid { position: absolute; width: 100%; height: 100%;object-fit: cover; pointer-events: none;z-index: -1; opacity: 1; }
#sky { position: absolute; width: 400px; height: 400px; top: 0; left: 50%; }
</style>

<div id="papa"><div id="sky"></div>
<video id="vid" src="https://video-js.51miz.com/preview/video/00/00/17/41/V-174157-A4115A71.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=26404121" 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(63,168,181,.35),rgba(63,168,181,.7)); color: snow;',
                        fs_css: 'bottom:20px; left:100px;transform: translate(0,-35px); background: transparent;',
                        player_css: 'width: 200px; height: 200px; top: 40%; left: 20%; background: url("https://pic.imgdb.cn/item/651e01f5c458853aef03da8d.gif") no-repeat center/cover;',
                        path: 'M58 40 L142 40 L176 78 L100 170 L24 78 z',
                        btn: {left: 34, top: 0},
                        track: {track: 'rgba(119,163,184,.35)', prog: 'rgba(63,168,211,.95)'},
                        img: {play: 'https://pic.imgdb.cn/item/6520c3f0c458853aef0a4920.png', pause: 'https://pic.imgdb.cn/item/6520c3b2c458853aef0a400c.png'}
                });
      });

      loadJs(js2, () => {
                H5lz({
                        papa: '#sky',
                        total: 6,
                        size: {width: 30, height: 48},
                        shape: {background: 'url("https://pic.imgdb.cn/item/652028a8c458853aefe2f62b.png") no-repeat center/cover', borderRadius: '0'},
                        ani: 'toTop',
                        maxTime: 30,
                        offset: {x: 0, y: 0},
                });
      });
})();

setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>

红影 发表于 2023-10-7 20:52

最简单的直线路径，主要学习一下背景图放入 player_css 参数中，防止全屏时移动。谢谢黑黑代码{:4_187:}

冬天的雨 发表于 2023-10-7 20:53

打开帖看见的就是一颗大钻石{:4_170:}

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

弄一首励志歌曲吧，一扫秋的哀伤和颓废感。人总要拼搏才有乐趣{:4_173:}

冬天的雨 发表于 2023-10-7 20:55

这颗钻石值100万的

红影 发表于 2023-10-7 20:55

冬天的雨 发表于 2023-10-7 20:53
打开帖看见的就是一颗大钻石

弄钻石轮廓方便啊，都是直线。这个是励志歌曲，拼搏就有收获{:4_173:}

冬天的雨 发表于 2023-10-7 20:55

美女好制作，顶！{:4_178:}

梦油 发表于 2023-10-7 20:58

好大的钻石哦！这个播放器真漂亮。

红影 发表于 2023-10-7 20:58

冬天的雨 发表于 2023-10-7 20:55
这颗钻石值100万的

被冬小雨一提到价值，忽然想起来忘记弄回帖有奖了{:4_173:}

红影 发表于 2023-10-7 20:59

冬天的雨 发表于 2023-10-7 20:55
美女好制作，顶！

谢谢冬小雨鼓励{:4_187:}

红影 发表于 2023-10-7 20:59

梦油 发表于 2023-10-7 20:58
好大的钻石哦！这个播放器真漂亮。

不但漂亮，而且值钱{:4_189:}

冬天的雨 发表于 2023-10-7 21:00

红影 发表于 2023-10-7 20:59
谢谢冬小雨鼓励

不用客气啊

冬天的雨 发表于 2023-10-7 21:01

红影 发表于 2023-10-7 20:55
弄钻石轮廓方便啊，都是直线。这个是励志歌曲，拼搏就有收获

看见钻石就心动了，这颗巨大的钻石，太值钱的{:4_170:}

小辣椒 发表于 2023-10-7 21:03

冬天的雨 发表于 2023-10-7 21:01
看见钻石就心动了，这颗巨大的钻石，太值钱的

财迷{:4_397:}

小辣椒 发表于 2023-10-7 21:03

亲爱的，漂亮的路径制作，歌曲也是正能量的{:4_199:}

小辣椒 发表于 2023-10-7 21:04

这么多小拳头{:4_173:}

小辣椒 发表于 2023-10-7 21:05

背景加视频电脑欣赏确实漂亮许多

醉美水芙蓉 发表于 2023-10-7 21:38

红影 发表于 2023-10-7 21:40

冬天的雨 发表于 2023-10-7 21:00
不用客气啊

做着好玩的，正好看到这个钻石动图，觉得挺好玩的{:4_173:}

红影 发表于 2023-10-7 21:41

冬天的雨 发表于 2023-10-7 21:01
看见钻石就心动了，这颗巨大的钻石，太值钱的

只能看看，拿不下来{:4_173:}
页: [1] 2 3 4 5 6 7 8
查看完整版本: 《让世界为你转身》（学习黑黑SVG路径播放器）