亦是金 发表于 2023-10-7 20:10

《数 鸭 子》 - 贝乐虎

<meta charset="UTF-8">
<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1969237">

<div style="width: 1200px;height: 700px;box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;overflow:hidden;border-radius:1%;margin-top:100px;margin-LEFT: -310px;">

<style>
#papa {
      margin: ; width: 1200px; height: 700px;top:-80px; LEFT: 0px; background: url('https://z4a.net/images/2023/10/07/104xx1.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; }


#sky { position: absolute; width: 1200px; height: 700px; bottom: 0; right: 0; transform: rotate(30deg); }
</style>


<div style="position: relative; width: 500px; height: 50px; top:650px;LEFT: 1000px;z-index: 100; filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:24px;">亦是金在线音乐</span></span></span></p></div>


<style type="text/css">

@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }

body { overflow-x: hidden; }
#baiBox {
      margin: auto;
      width: 800px;
      text-align: center;
      font-family:微软简中圆;
      font-size: 2.5rem;
      font-weight: bold;
      color: #f46ff6;
      transform-origin: top;
      animation: yao 1.0s linear infinite alternate;
}

@keyframes yao {
      from{transform: perspective(800px) rotatex(30deg); }
      to { transform: perspective(800px) rotatex(-30deg); }
}



.tit { position: relative;width: 300px;height: 30px;top:-20px;left: 50px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff) }
#tit:hover { color: green; }
/*标题位置 移动范围设置*/

</style>

<div id="hu" >
<div id="baiBox"
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:36px;">《数 鸭 子》</span>
<span style="color:#3d46f7;"><span style="font-size:28px;">-贝乐虎</span></div>


</style>



<div id="papa">
<div id="sky">

        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1417885730.mp3" autoplay loop></audio>
</div>

<script>

(function() {
let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
        let js1 = 'https://ysj147.s3-us-east-1.ossfiles.com/zzsc/js/svg_path_lrcysj4.js',
                js2 = '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(255,140,240,.35),rgba(250,90,220,.7)); color: #eee;',
                        fs_css: 'transform: translate(0,-35px); background: transparent;',
                        player_css: 'transform: translate(-400px,0;); width: 1200px; height: 420px;',
                        path: 'm144.0755,19.22536c0,0 29.59053,-0.90141 29.32153,-0.90141c0.269,0 4.57308,-2.10328 5.11109,-2.10328c0.53801,0 -22.0584,-7.21127 -22.3274,-7.21127c0.269,0 3.49706,-3.9061 3.22806,-3.9061c0.269,0 -4.57308,-2.10329 -4.84208,-2.10329c0.269,0 -22.86541,1.20188 -23.13442,1.20188c0.269,0 -13.18124,9.91549 -13.45024,9.91549c0.269,0 2.42105,16.22535 2.15204,16.22535c0.269,0 8.33915,9.61502 8.87716,9.61502c0.53801,0 13.45024,12.31925 13.18124,12.31925c0.269,0 13.18123,12.31925 12.91223,12.31925c0.269,0 1.34502,12.31925 1.88303,12.31925c0.53801,0 -12.91224,13.22065 -12.37423,12.92018c0.53801,-0.30047 -27.43849,10.8169 -27.7075,10.8169c0.269,0 -19.09935,5.10798 -19.36835,5.10798c0.269,0 -31.47356,2.10328 -31.74257,2.10328c0.269,0 -32.01158,-7.81221 -32.28058,-7.81221c0.269,0 -16.4093,-9.91549 -16.6783,-9.91549c0.269,0 -11.56721,-16.22535 -11.83621,-16.22535c0.269,0 12.10522,5.40845 11.83621,5.40845c0.269,0 20.71337,1.20187 21.25138,1.20187c0.53801,0 23.13442,-7.21127 22.86541,-7.21127c0.269,0 20.17537,-8.41315 19.90636,-8.41315c0.269,0 18.02332,-4.20657 17.75432,-4.20657c0.269,0 13.71924,0 13.45024,0c0.269,0 12.64323,5.70892 13.18124,6.00939c0.53801,0.30047 6.45611,9.31455 6.18711,9.31455c0.269,0 -3.49706,12.01878 -3.76607,12.01878c0.269,0 -20.17537,9.91549 -20.44437,9.91549c0.269,0 -14.25726,6.30986 -13.71925,6.30986c0.53801,0 -9.14616,9.01408 -9.41516,9.01408c0.269,0 -0.269,8.71361 0.80702,8.71361c1.07602,0 6.45611,6.00939 6.18711,6.00939c0.269,0 11.0292,3.0047 12.10522,3.0047c1.07603,0 18.29233,-2.40376 18.83034,-2.40376c0.53801,0 5.91811,-3.00469 5.6491,-3.00469c0.269,0 -9.41517,-2.10329 -9.68417,-2.10329c0.269,0 -22.86541,2.40376 -23.13442,2.40376c0.26901,0 -27.7075,1.50235 -27.9765,1.50235c0.269,0 -8.33915,-1.80282 -8.60816,-1.80282',
                        btn: {left: 34, top: 20},
                        track: {track: '#f4fd05', prog: '#fb0925'},
                        img: {play: '', pause: ''}
                });
        });

        loadJs(js2, () => {
                H5lz({
                        papa: '#papa',
                        total: 15,
                        size: {width: 64, height: 64},
                        shape: {background: 'url("yjzi1.svg") no-repeat center/cover', borderRadius: '0'},
                        ani: 'toTop',
                        maxTime: 30,
                        offset: {x: -100, y: 0},
                });
        });
})();

</script>
</td></tr></table>

红影 发表于 2023-10-7 20:31

有趣,这鸭子的简笔画的路径也好有趣呢。亦是金老师又一个自己做的路径呢{:4_199:}

红影 发表于 2023-10-7 20:32

还配了鸭子在水面的视频,这制作真好{:4_187:}

冬天的雨 发表于 2023-10-7 20:49

哈哈,这个好,路径播放器,太棒了!{:4_178:}

小辣椒 发表于 2023-10-7 21:06

这只鸭子路径太可爱了{:4_199:}

小辣椒 发表于 2023-10-7 21:06

前辈这个是很熟练了,做的漂亮的{:4_199:}

小辣椒 发表于 2023-10-7 21:07

发现直接路径出来还是比有背景图片的漂亮一点

小辣椒 发表于 2023-10-7 21:08

谢谢精彩的分享{:4_187:}

亦是金 发表于 2023-10-7 21:23

红影 发表于 2023-10-7 20:31
有趣,这鸭子的简笔画的路径也好有趣呢。亦是金老师又一个自己做的路径呢

问好!{:4_187:}老套路做的路径,不难!

亦是金 发表于 2023-10-7 21:24

红影 发表于 2023-10-7 20:32
还配了鸭子在水面的视频,这制作真好

哈哈哈,喜欢就好!{:4_187:}

亦是金 发表于 2023-10-7 21:24

冬天的雨 发表于 2023-10-7 20:49
哈哈,这个好,路径播放器,太棒了!

问好冬雨!谢谢欣赏!{:4_176:}

亦是金 发表于 2023-10-7 21:25

小辣椒 发表于 2023-10-7 21:06
这只鸭子路径太可爱了

是的!我也喜欢!

亦是金 发表于 2023-10-7 21:28

小辣椒 发表于 2023-10-7 21:06
前辈这个是很熟练了,做的漂亮的

我手头有好多个路径,慢慢的放送!{:4_189:}

亦是金 发表于 2023-10-7 21:32

小辣椒 发表于 2023-10-7 21:07
发现直接路径出来还是比有背景图片的漂亮一点

我也觉得直接路径出来比较好,不会遮挡背景图片,影响整体美观!

亦是金 发表于 2023-10-7 21:33

小辣椒 发表于 2023-10-7 21:08
谢谢精彩的分享

问好!谢谢欣赏点评!{:4_187:}

红影 发表于 2023-10-7 21:54

亦是金 发表于 2023-10-7 21:23
问好!老套路做的路径,不难!

看到这个,我也想去弄个动物路径了,比如小狐狸什么的{:4_173:}

红影 发表于 2023-10-7 21:55

亦是金 发表于 2023-10-7 21:24
哈哈哈,喜欢就好!

非常漂亮的{:4_187:}

马黑黑 发表于 2023-10-7 22:06

这个太有创意了{:4_199:}

亦是金 发表于 2023-10-7 22:57

红影 发表于 2023-10-7 21:54
看到这个,我也想去弄个动物路径了,比如小狐狸什么的

好!{:4_187:}

亦是金 发表于 2023-10-7 22:57

红影 发表于 2023-10-7 21:55
非常漂亮的

谢谢表扬!{:4_187:}
页: [1] 2
查看完整版本: 《数 鸭 子》 - 贝乐虎