论坛 › 音乐沙龙 › 大地 (国语版)（学习马老师自由路径播放器效果）

冬天的雨 发表于 2023-10-9 21:26

大地 (国语版)（学习马老师自由路径播放器效果）

<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://i.mp3.wf/view.php/bccc4b195860e4f653750f211dadff48.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://i.mp3.wf/view.php/94aa5be38b5c62cf23b0f61079e7ce0a.gif'); top: 10%; mix-blend-mode: screen; }
</style>

<div id="papa">
        <audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/778d-audiofreehighqps/6E/BC/GMCoOSEI2rnMACAAAAJbQ27i.flac" 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: 'bottom: 20px;',
                        fs_css: 'transform: translate(0,-5px); background: transparent;',
                        player_css: 'width: 200px; height: 100px; bottom: 70px; filter: hue-rotate(30deg);',
                        path: 'M5 50 L10 45 Q35 80 50 50 T100 70 T160 70 T 195 65',
                        btn: {left: 64, top: 0},
                        track: {track: 'olive', prog: 'darkred'},
                        img: {play: '', pause: ''}
                });
        });

        loadJs(js2, () => {
                H5lz({
                        papa: '#papa',
                        total: 8,
                        size: {width: 20, height: 110},
                        shape: {background: 'url("https://i.mp3.wf/view.php/27000fe039bf6c7df25061b1130caf90.gif") no-repeat center/cover', borderRadius: ''},
                        ani: 'toBottom',
                        maxTime: 30,
                        offset: {x: 0, y: 0},
                });
        });
})();

</script>

冬天的雨 发表于 2023-10-9 21:27

报告马老师，完成一个作业@马黑黑

冬天的雨 发表于 2023-10-9 21:28

@小辣椒 进来表扬一下{:4_170:}

冬天的雨 发表于 2023-10-9 21:29

发现全屏欣赏精彩极了{:4_205:}

冬天的雨 发表于 2023-10-9 21:29

主要这个音乐震撼，无损音乐欣赏{:4_208:}

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

这路径真漂亮。天空掉下的是什么，还是动态的呢。
欣赏冬小雨漂亮的制作{:4_199:}

红影 发表于 2023-10-9 21:42

冬天的雨 发表于 2023-10-9 21:29
发现全屏欣赏精彩极了

不光音乐震撼，背景也很震撼呢。的确，全屏时候更漂亮{:4_199:}

冬天的雨 发表于 2023-10-9 21:52

红影 发表于 2023-10-9 21:42
不光音乐震撼，背景也很震撼呢。的确，全屏时候更漂亮

美女晚上好{:4_187:}

冬天的雨 发表于 2023-10-9 21:52

红影 发表于 2023-10-9 21:41
这路径真漂亮。天空掉下的是什么，还是动态的呢。
欣赏冬小雨漂亮的制作

这个是天上掉原子弹下来{:4_170:}

冬天的雨 发表于 2023-10-9 21:57

这首大地非常震撼的，特别正能量的{:4_208:}

醉美水芙蓉 发表于 2023-10-9 22:04

红影 发表于 2023-10-9 22:09

冬天的雨 发表于 2023-10-9 21:52
美女晚上好

这个制作真漂亮，冬小雨厉害了{:4_187:}

红影 发表于 2023-10-9 22:11

冬天的雨 发表于 2023-10-9 21:52
这个是天上掉原子弹下来

哈哈，那么多，太恐怖了吧{:4_173:}

马黑黑 发表于 2023-10-9 22:38

如果路径能和中间物体的红线结合在一起，就更完美

焱鑫磊 发表于 2023-10-9 23:16

漂亮！{:4_187:}

亦是金 发表于 2023-10-10 00:04

冬雨很厉害哦！帖子制作精彩，视觉冲击震撼！欣赏学习了！{:4_176:}

小文 发表于 2023-10-10 17:30

美不胜收{:4_191:}

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

醉美水芙蓉 发表于 2023-10-9 22:04
欣赏冬雨老师精品制作！

谢谢美女{:4_187:}

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

红影 发表于 2023-10-9 22:09
这个制作真漂亮，冬小雨厉害了

和美女差距太大了

冬天的雨 发表于 2023-10-10 18:02

马黑黑 发表于 2023-10-9 22:38
如果路径能和中间物体的红线结合在一起，就更完美

哈哈，马老师冬雨不会

查看完整版本: 大地 (国语版)（学习马老师自由路径播放器效果）