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

Hayley Westenra - Blooming Flower

本帖最后由 醉美水芙蓉 于 2023-10-31 20:27 编辑 <br /><br /><style>
#papa {
      margin: 0 0 0 calc(50% - 593px);
      width: 1024px;
      height: 640px;
      background: url('https://www.yiyuen.com/e/file/view/640932') no-repeat center/cover;
      box-shadow: 3px 3px 20px #000;
      overflow: hidden;
      z-index: 1;
      position: relative;
      display: grid;
      place-items: center;
}
</style>

<div id="papa"></div>
<audio id="aud" src="https://yinhua.ru/20221125/yy/Hana .mp3" autoplay loop></audio>

<script>
(function() {
      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();
      };

      let rippleJs = 'https://638183.freep.cn/638183/web/svg/ripple-min.js',
                playerJs = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js';
      let lrcAr= [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
      loadJs(rippleJs, () => rippleEffect(papa));
      
      loadJs(playerJs, () => {
                HCPlayer({
                        papa: '#papa',
                        lrcAr: lrcAr,
                        lrc_css: 'top: 520px;right:200px;',
                        fs_css: 'top: -1000px; background: transparent;',
                        player_css: `
                              width: 200px;
                              height: 200px;
                              left: 80px;
                              bottom: 140px;
                              background: url('https://638183.freep.cn/638183/t23/btn/12f.png') -5px 1px,
                        `,
                        path: 'm64.5775,95.81497l0,0c0,-19.88224 15.22232,-35.99999 33.99999,-35.99999l0,0c9.01736,0 17.66539,3.79284 24.04162,10.54415c6.37624,6.75131 9.95837,15.90804 9.95837,25.45584l0,0c0,19.88224 -15.22232,35.99999 -33.99999,35.99999l0,0c-18.77767,0 -33.99999,-16.11775 -33.99999,-35.99999zm17,0l0,0c0,9.94112 7.61116,17.99999 17,17.99999c9.38884,0 17,-8.05888 17,-17.99999c0,-9.94112 -7.61116,-17.99999 -17,-17.99999l0,0c-9.38883,0 -17,8.05888 -17,17.99999z',
                        btn: {left: 34, top: 80},
                        track: {track: 'pink', prog: 'steelblue'},
                        img: {play: '', pause: ''}
                });
      });
})();
</script>

红影 发表于 2023-10-30 22:39

画面很漂亮，只是这个旋转动图好像不是连续的，而且暂停的时候也无法停止呢{:4_173:}

红影 发表于 2023-10-30 22:40

旋律很熟悉啊，好像是花心的英文版吧{:4_173:}

红影 发表于 2023-10-30 22:42

加了水波纹效果，看不出路径呢。{:4_204:}

亦是金 发表于 2023-10-30 23:10

本帖最后由 亦是金 于 2023-10-30 23:14 编辑

@@水芙蓉   将这段代码：path: 'm386.5775,480.81497l0,      改为：path: 'm64.5775,95.81497l0,

即可看到路径了！

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

红影 发表于 2023-10-30 22:39
画面很漂亮，只是这个旋转动图好像不是连续的，而且暂停的时候也无法停止呢

谢谢红影点评，看得好仔细，因为图片容量太大改小，所以旋转不不是连续的。暂停动图一键控制没有学会，有机会跟你一起学学！

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

亦是金 发表于 2023-10-30 23:10
@@水芙蓉   将这段代码：path: 'm386.5775,480.81497l0,      改为：path: 'm64.5775,95.81497l0,

即 ...

谢谢老师指导，我正愁怎么看不出路径呢？

红影 发表于 2023-10-31 22:06

醉美水芙蓉 发表于 2023-10-31 20:30
谢谢红影点评，看得好仔细，因为图片容量太大改小，所以旋转不不是连续的。暂停动图一键控制没有学会，有 ...

辛苦做出来的帖子肯定要认真欣赏啊。不客气啊，其实一键控制我也不熟的{:4_173:}
页: [1]
查看完整版本: Hayley Westenra - Blooming Flower