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

心上的罗加（学习螺旋路径效果）




<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>

liumang 发表于 2023-11-3 21:06

小辣椒重新做了啊{:5_150:}

liumang 发表于 2023-11-3 21:07

这种路径我不会

liumang 发表于 2023-11-3 21:07

小辣椒教我

liumang 发表于 2023-11-3 21:09

{:5_134:}{:5_137:}{:5_141:}

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

liumang 发表于 2023-11-3 21:06
小辣椒重新做了啊

liumang晚上好

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

liumang 发表于 2023-11-3 21:07
这种路径我不会

我也是才学习的

liumang 发表于 2023-11-3 21:46

liumang 发表于 2023-11-3 21:07
小辣椒教我

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

liumang 发表于 2023-11-3 21:46


好吧，你一看就会的

liumang 发表于 2023-11-3 21:49

小辣椒 发表于 2023-11-3 21:48
好吧，你一看就会的

不一定的，我笨的
页: [1] 2
查看完整版本: 心上的罗加（学习螺旋路径效果）