红影 发表于 2023-10-20 19:25

你的万水千山 (3D环绕版)（学习黑黑svg路径）


<style>
#papa { margin: 80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; 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: 30%; left: 30%; }
#vid { position: absolute; width: 1138px; height: 640px; left: -50px; object-fit: cover; pointer-events: none;z-index: -1; opacity: 1; }
</style>

<div id="papa"><div id="sky"></div>
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/b70911f8dc515af3f5bcc6fdc2b48940_preview.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video>
      <audio id="aud" src="https://file.uhsea.com/2310/29a3f662c23a89f7d119bf9d28a51e75O3.mp3" 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_02.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: 30px; --bg: linear-gradient(rgba(63,168,181,.35),rgba(30,144,255,.7)); color: snow;',
                        fs_css: 'bottom: -100px; left: 100px; transform: translate(0,-35px); background: transparent; --color: rgba(63,168,211,.95);',
                        player_css: 'width: 180px; height: 220px; top: 31%; left: 42%; background: url("https://z1.ax1x.com/2023/10/20/piFuvAU.png") no-repeat center/cover;',
                        path: 'm90,125c0,0 -19,-11 -4,-28c3,-4 9.70969,-10.80645 26,-5c11.6129,6.8387 9.3871,19 11,19c-8,24 -29,24 -29,24c-19,6 -31,-20 -31,-20c-7,-22 11.3871,-34.7742 13,-38c13,-5 28.7742,-28.35485 32,-34c7,-17 -6.35485,-27.19355 -13.6129,-29.6129c-19,16 -11.3871,27.6129 -11.3871,27.6129c-2.41935,-2.41935 10,40 10,40c0,0 14.19355,56.09679 15,69c-0.2258,20.48386 -10,25 -10,25c-10,6 -19,-5 -19,-5c-8,-12 3,-12 3,-12c8,-3 8.80645,10.8387 8,6',
                        btn: {left: 28, top: 190},
                        track: {track: 'rgba(119,163,184,.35)', prog: 'rgba(0,191,255,.85)'},
                        img: {play: 'https://z1.ax1x.com/2023/10/08/pPvYUL8.png', pause: 'https://z1.ax1x.com/2023/10/08/pPvYNsf.png'}
                });
      });

      loadJs(js2, () => {
                H5lz({
                        papa: '#sky',
                        total: 30,
                        size: {width: 5, height: 5},
                        shape: {background: 'rgba(255,105,180,.35)', borderRadius: '50%'},
                        maxTime: 24,
                        offset: {x: 0, y: 0},
                        ani: 'c2Out',
                          css: 'opacity: .8;',
                });
      });
})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>

红影 发表于 2023-10-20 19:26

弄了个视频背景，暂停可以停止视频。又去试了个播放器路径，感谢黑黑的代码@马黑黑 {:4_187:}

马黑黑 发表于 2023-10-20 19:28

这个制作，得分{:4_199:}

红影 发表于 2023-10-20 19:30

昨天和@亦是金 老师版聊，羡慕你做了那么多路径，随口说起也可以做个音符路径，然后去就试了个。
路径弄得不太好，所以颜色赶紧取得和背景差不多，这样可以掩饰一下{:4_173:}

红影 发表于 2023-10-20 19:30

也谢谢@雅俗共赏 ，从你的帖子里翻到个视频，就用上了{:4_173:}

红影 发表于 2023-10-20 19:40

马黑黑 发表于 2023-10-20 19:28
这个制作，得分

偶尔搜到一个3D环绕的歌曲，赶紧做了个帖子{:4_173:}

上海朝阳 发表于 2023-10-20 19:53

好美，像是穿越的那个环

红影 发表于 2023-10-20 20:18

上海朝阳 发表于 2023-10-20 19:53
好美，像是穿越的那个环

谢谢朝阳大哥鼓励{:4_187:}

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

亦是金 发表于 2023-10-20 21:39

画面梦幻，歌曲好听，路径精准，好帖！！！欣赏学习了！{:4_187:}

红影 发表于 2023-10-20 22:41

醉美水芙蓉 发表于 2023-10-20 21:10
红影美女构思不错！漂亮！

谢谢水芙蓉美女鼓励{:4_187:}

红影 发表于 2023-10-20 22:43

亦是金 发表于 2023-10-20 21:39
画面梦幻，歌曲好听，路径精准，好帖！！！欣赏学习了！

画面是视频，歌曲是偶尔看到的，亦是金老师的鼓励是很让人欢喜的{:4_173:}

焱鑫磊 发表于 2023-10-20 23:22

欣赏学习！{:4_187:}

红影 发表于 2023-10-20 23:25

焱鑫磊 发表于 2023-10-20 23:22
欣赏学习！

问好焱鑫磊，感谢鼓励{:4_187:}

马黑黑 发表于 2023-10-20 23:40

红影 发表于 2023-10-20 19:40
偶尔搜到一个3D环绕的歌曲，赶紧做了个帖子

很不错的

红影 发表于 2023-10-21 12:53

马黑黑 发表于 2023-10-20 23:40
很不错的

顺便再学习一下路径的制作{:4_173:}

马黑黑 发表于 2023-10-21 19:22

红影 发表于 2023-10-21 12:53
顺便再学习一下路径的制作

路径太简单了

红影 发表于 2023-10-21 23:26

马黑黑 发表于 2023-10-21 19:22
路径太简单了

对我来说不简单啊，多学学总是好的呢。
页: [1]
查看完整版本: 你的万水千山 (3D环绕版)（学习黑黑svg路径）