小辣椒 发表于 2023-11-3 20:36

再试黑黑螺旋路径改小播放器效果


<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: -200px; background: transparent;',
                        player_css: 'width: 200px; height: 240px; left: 60%; bottom: 15%; background: url("https://wj1.zp68.com:812/lxx/yunhua/2023/04/02/yu.jpg") no-repeat 35px 35px',
                        path: 'm94.48647,154.62091c2.21005,1.79222 -2.80533,2.73162 -4.80337,2.27788c-5.41459,-1.22965 -5.35863,-5.73587 -2.54296,-8.23533c5.03656,-4.47091 15.55531,-4.17373 21.75649,-0.8761c9.1004,4.8394 8.15568,13.61281 0.28253,18.7485c-10.49359,6.84506 -28.38017,5.9561 -38.70957,-0.52565c-12.9985,-8.15666 -11.0658,-21.5959 1.97786,-29.26168c15.79761,-9.2843 41.27795,-7.77289 55.66266,1.92741c16.95195,11.43147 14.00722,29.60315 -4.23823,39.77485c-21.06512,11.74365 -54.19933,9.60161 -72.6158,-3.32915c-20.92597,-14.69277 -16.96119,-37.62003 6.49868,-50.28804c26.31843,-14.21159 67.13149,-11.43574 89.56885,4.73093c24.90979,17.94806 19.92158,45.64173 -8.75908,60.8012',
                        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-11-3 20:37

@亦是金 谢谢前辈指导，小辣椒学习了！

小辣椒 发表于 2023-11-3 20:38

@马黑黑

黑黑小辣椒争取做优秀学生，继续学习做螺旋路径效果{:4_170:}

亦是金 发表于 2023-11-3 20:44

小辣椒 发表于 2023-11-3 20:37
@亦是金 谢谢前辈指导，小辣椒学习了！

客气了！问好小辣椒！{:4_187:}

红影 发表于 2023-11-3 20:50

这个螺旋路径好像压扁了的，更有特色呢{:4_199:}

红影 发表于 2023-11-3 20:50

漂亮的叶子的粒子也漂亮，跟背景特别和谐{:4_204:}

红影 发表于 2023-11-3 20:51

动态也加得漂亮，树上的鸟儿水里的鱼儿都那么灵动。欣赏亲爱的好帖{:4_187:}

梦油 发表于 2023-11-3 20:57

几条小鱼儿挺好玩的。

小辣椒 发表于 2023-11-3 21:10

亦是金 发表于 2023-11-3 20:44
客气了！问好小辣椒！

谢谢前辈指导，小辣椒还有许多不会的，郁闷呢

小辣椒 发表于 2023-11-3 21:11

红影 发表于 2023-11-3 20:50
这个螺旋路径好像压扁了的，更有特色呢

才晓得原图要压到自己想的效果路径才可以编辑出来

小辣椒 发表于 2023-11-3 21:11

红影 发表于 2023-11-3 20:50
漂亮的叶子的粒子也漂亮，跟背景特别和谐

这叶子我挺喜欢的{:4_173:}

小辣椒 发表于 2023-11-3 21:12

红影 发表于 2023-11-3 20:51
动态也加得漂亮，树上的鸟儿水里的鱼儿都那么灵动。欣赏亲爱的好帖

瞎加效果的{:4_170:}

小辣椒 发表于 2023-11-3 21:13

梦油 发表于 2023-11-3 20:57
几条小鱼儿挺好玩的。

梦油晚上好，加几条小雨增加画面的灵动感{:4_173:}

马黑黑 发表于 2023-11-3 21:22

小辣椒 发表于 2023-11-3 20:38
@马黑黑

黑黑小辣椒争取做优秀学生，继续学习做螺旋路径效果

好

红影 发表于 2023-11-3 22:38

小辣椒 发表于 2023-11-3 21:11
才晓得原图要压到自己想的效果路径才可以编辑出来

svg的图图是可以调整的{:4_173:}

红影 发表于 2023-11-3 22:39

小辣椒 发表于 2023-11-3 21:11
这叶子我挺喜欢的

是的，这个叶子很漂亮{:4_199:}

红影 发表于 2023-11-3 22:39

小辣椒 发表于 2023-11-3 21:12
瞎加效果的

非常有趣，好看{:4_187:}

小辣椒 发表于 2023-11-4 14:03

马黑黑 发表于 2023-11-3 21:22
好

只是我心想总不能事成{:4_203:}

小辣椒 发表于 2023-11-4 14:04

红影 发表于 2023-11-3 22:38
svg的图图是可以调整的

这个也是要花时间去研究的，昨天试了一下，才明白

小辣椒 发表于 2023-11-4 14:04

红影 发表于 2023-11-3 22:39
是的，这个叶子很漂亮

緑的叶子才感觉漂亮
页: [1] 2
查看完整版本: 再试黑黑螺旋路径改小播放器效果