小辣椒 发表于 2023-10-16 18:51

心上的罗加 （学习黑黑螺旋路径播放器效果）


<style>
#papa { margin: 150px 0 0 calc(50% - 721px); width: 1280px; height: 763px; background: url('https://wj1.zp68.com:812/lxx/yunhua/2023/04/02/02F.gif') 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 > svg { stroke-linecap: round; }
#btnPlay { filter: hue-rotate(90deg); }

#dt2{ position: absolute; width:300px; height: 198px; top: 500px; left: 230px; }

</style>

<div id="papa">

<img id="dt2" src="https://wj1.zp68.com:812/lxx/yunhua/2023/04/02/4.gif" alt="" />

      <audio id="aud" src="https://wj1.zp68.com:812/lxx/yunhua/2023/04/02/xsdlj.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_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; --bg: linear-gradient(rgba(46,139,87,.5),rgba(        46,139,87,.9));color: snow;',
                        fs_css: 'bottom: 100px; background: transparent;',
                        player_css: 'width: 200px; height: 240px; left: 60%; bottom: 8%; background: url("https://wj1.zp68.com:812/lxx/yunhua/2023/04/02/yu.jpg") no-repeat 35px 35px',
                        path: 'm 91.318138,107.43137 c 3.172108,4.32435 -4.026526,6.59097 -6.894346,5.49617 -7.771643,-2.96695 -7.691325,-13.839754 -3.649946,-19.870538 7.229043,-10.787603 22.326764,-10.070545 31.227404,-2.113883 13.06194,11.676711 11.70597,32.845561 0.40552,45.237161 C 97.345174,152.69632 71.672306,150.5514 56.846371,134.91197 38.189429,115.23125 40.96347,82.804494 59.685216,64.30816 82.359759,41.906622 118.93205,45.553412 139.57863,68.958702 163.91001,96.541034 159.6834,140.38642 133.49544,164.92912 103.26037,193.26468 55.702374,188.09629 29.268942,156.8964 -0.76640611,121.44507 4.9243018,66.125211 38.596588,35.559306 76.371811,1.2689836 134.95138,7.9666849 167.15604,46.974286 202.90942,90.280114 195.74977,157.10056 154.584,193.67798',
                        btn: {left: 34, top: 200},
                         track: {track: '#72c983', prog: '#075302'},
                        img: {play: '', pause: ''}
                });
      });

      loadJs(js2, () => {
                H5lz({
                        papa: '#papa',
                        total: 15,
                        size: {width: 30, height: 28},
                     shape: {background: 'url("https://wj1.zp68.com:812/lxx/yunhua/2023/04/02/shuye.png") no-repeat center/cover', borderRadius: '0'},
                        ani: 'toBottom',
                        maxTime: 30,
                        offset: {x: 80, y: 0},
                });
      });
})();

</script>

小辣椒 发表于 2023-10-16 18:53

@马黑黑

黑黑套用一个螺旋路径播放器效果，滤镜修改播放器颜色瞎捣鼓了，纯緑调不出来{:4_198:}

小辣椒 发表于 2023-10-16 18:54

谢谢黑黑的源码分享，小辣椒直接套用了{:4_173:}

马黑黑 发表于 2023-10-16 19:01

矮油，这条路俺太熟悉了{:4_189:}

马黑黑 发表于 2023-10-16 19:02

就是鸟窝位置不对，俺记得，俺在这里等菇凉的时候，树上有鸟叫，然后俺就找鸟叫的位置，发现一个鸟窝，好高的

醉美水芙蓉 发表于 2023-10-16 19:25

东篱闲人 发表于 2023-10-16 20:39

好听！{:5_116:}

亦是金 发表于 2023-10-16 21:02

欣赏美帖！好听好看！欣赏学习了！{:4_187:}

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

估计美女雨天有约会{:4_189:}

冬天的雨 发表于 2023-10-16 21:11

马黑黑 发表于 2023-10-16 19:01
矮油，这条路俺太熟悉了

马老师和美女约会{:4_170:}

冬天的雨 发表于 2023-10-16 21:11

小辣椒 发表于 2023-10-16 18:53
@马黑黑

黑黑套用一个螺旋路径播放器效果，滤镜修改播放器颜色瞎捣鼓了，纯緑调不出来

小辣椒还是做了播放器，以为你会休息了{:4_197:}{:4_185:}

冬天的雨 发表于 2023-10-16 21:12

小辣椒 发表于 2023-10-16 18:54
谢谢黑黑的源码分享，小辣椒直接套用了

冬雨还不会套用，小辣椒这首歌好听的{:4_199:}

马黑黑 发表于 2023-10-16 21:16

冬天的雨 发表于 2023-10-16 21:11
马老师和美女约会

这你也知道{:4_203:}

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

马黑黑 发表于 2023-10-16 21:16
这你也知道

我会算 {:4_170:}神机妙算的算

马黑黑 发表于 2023-10-16 21:33

冬天的雨 发表于 2023-10-16 21:18
我会算 神机妙算的算

算法还不错

冬天的雨 发表于 2023-10-16 21:36

马黑黑 发表于 2023-10-16 21:33
算法还不错

原来冬天算对了，马老师和美女有约了{:4_170:}

红影 发表于 2023-10-16 21:49

这么多动态效果，蝴蝶蜻蜓鱼儿还有小鸟落叶雨丝，真是应有尽有{:4_173:}
这个螺旋路径漂亮，随便放在哪都很美呢。欣赏亲爱的好帖{:4_199:}

红影 发表于 2023-10-16 21:51

小辣椒 发表于 2023-10-16 18:53
@马黑黑

黑黑套用一个螺旋路径播放器效果，滤镜修改播放器颜色瞎捣鼓了，纯緑调不出来

那个带底色的色调旋转我也弄不清楚，只能一点点蒙了{:4_173:}

红影 发表于 2023-10-16 21:52

亲爱的，你去看病前还在做帖子，真不容易{:4_179:}

马黑黑 发表于 2023-10-16 22:24

冬天的雨 发表于 2023-10-16 21:36
原来冬天算对了，马老师和美女有约了

那是预期的事情，结果是悲催的
页: [1] 2
查看完整版本: 心上的罗加 （学习黑黑螺旋路径播放器效果）