亦是金 发表于 2023-10-19 15:48

《 旋 涡 》 - 鸡蛋面乐队（测试双螺旋路径）

本帖最后由 亦是金 于 2023-10-19 20:42 编辑 <br /><br /><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://ysj147.s3-us-east-1.ossfiles.com/zzsc/gif/231019c.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; }
</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: -30px;LEFT: -400px;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:30px;">《 旋 涡 》</span>
<span style="color:#3d46f7;"><span style="font-size:22px;">   - - 鸡蛋面乐队 </span></div>

</style>



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

<script>

(function() {
let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

        let js1 = 'https://ysj147.s3-us-east-1.ossfiles.com/zzsc/js/svg_path_lrcysj.js',
                js2 = '';
        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: 'width: 350px; height: 350px;top: 55%; left: 42%; background: url("") no-repeat center/cover;',

                        path: 'm58.74209,155.98697c0,0 1.78344,-3.56099 1.63482,-3.56099c0.14862,0 -4.30998,-2.84879 -4.4586,-2.84879c0.14862,0 -6.39065,2.49269 -6.53927,2.49269c0.14862,0 -2.2293,8.19026 -2.37792,8.19026c0.14862,0 4.01273,9.97075 3.86411,9.97075c0.14862,0 8.47133,4.62928 8.32271,4.62928c0.14862,0 9.66029,-2.49269 9.51167,-2.49269c0.14862,0 7.87685,-8.19026 7.72823,-8.19026c0.14862,0 2.2293,-16.73663 2.08068,-16.73663c0.14862,0 -3.71549,-10.32685 -3.86411,-10.32685c0.14862,0 -10.25477,-9.25856 -10.40339,-9.25856c0.14862,0 -10.84925,-1.78049 -10.99787,-1.78049c0.14862,0 -13.82164,4.98538 -13.97026,4.98538c0.14862,0 -8.17409,12.81954 -8.32271,12.81954c0.14862,0 -3.12101,11.03906 -3.26963,11.03906c0.14862,0 1.04034,16.73663 0.89172,16.73663c0.14862,0 5.49893,12.10735 5.35031,12.10735c0.14862,0 12.33545,11.03906 12.18683,11.03906c0.14862,0 15.30785,4.62928 15.15923,4.62928c0.14862,0 17.38852,-4.62928 17.2399,-4.62928c0.14862,0 13.22717,-14.24393 13.22717,-14.60003c0,-0.3561 7.13376,-21.00981 6.98514,-21.00981c0.14862,0 -1.33757,-23.8586 -1.4862,-23.8586c0.14862,0 -6.09341,-12.81954 -6.24203,-12.81954c0.14862,0 -9.95753,-11.75125 -10.10615,-11.75125c0.14862,0 -14.41612,-8.54636 -14.56474,-8.54636c0.14862,0 -15.90232,-1.06829 -16.05094,-1.06829c0.14862,0 -14.41612,4.27318 -14.56474,4.27318c0.14862,0 -15.60508,13.88784 -15.7537,13.88784c0.14862,0 -8.76857,16.02443 -8.91719,16.02443c0.14862,0 -4.01273,19.22932 -4.16136,19.22932c0.14862,0 0.44586,17.44882 0.29724,17.44882c0.14862,0 5.20169,16.73663 5.49893,16.73663c0.29724,0 9.80891,16.02443 9.66029,16.02443c0.14862,0 14.71336,11.75125 15.01061,11.75125c0.29724,0 18.13162,6.76587 17.983,6.76587c0.14862,0 18.57748,-0.7122 18.42886,-0.7122c0.14862,0 21.25264,-10.68296 21.10402,-10.68296c0.14862,0 12.0382,-13.88784 11.88958,-13.88784c0.14862,0 6.98514,-13.17564 6.83652,-13.17564c0.14862,0 4.30998,-18.51712 4.16136,-18.51712c0.14862,0 3.41825,-18.87321 3.71549,-19.58542c0.29724,-0.7122 9.51167,-19.22932 9.36304,-19.22932c0.14862,0 13.5244,-13.17564 13.82164,-13.17564c0.29724,0 19.02334,-9.61466 18.87472,-9.61466c0.14862,0 19.76643,-0.3561 19.61782,-0.3561c0.14862,0 17.09128,7.47807 16.94266,7.47807c0.14862,0 12.63269,10.32685 12.48407,10.32685c0.14862,0 8.47133,12.81954 8.32271,12.81954c0.14862,0 5.79617,16.02443 5.64755,16.02443c0.14862,0 1.93206,19.94152 1.78344,19.94152c0.14862,0 -3.41825,21.00981 -3.56687,21.00981c0.14862,0 -10.25477,18.87321 -10.25477,18.51712c0,-0.3561 -12.48407,10.32685 -12.63269,10.32685c0.14862,0 -17.68576,6.05367 -17.83438,6.05367c0.14862,0 -21.25264,-3.56099 -20.9554,-3.56099c0.29724,0 -17.2399,-16.02443 -17.38852,-16.02443c0.14862,0 -8.17409,-19.94152 -8.32271,-19.94152c0.14862,0 -0.7431,-17.09272 -0.89172,-17.09272c0.14862,0 4.30998,-17.80492 4.60722,-17.80492c0.29724,0 8.91719,-13.88784 9.21443,-13.88784c0.29724,0 13.07855,-9.25856 12.92993,-9.25856c0.14862,0 15.90232,-1.06829 16.19956,-1.06829c0.29724,0 13.37579,5.34147 13.22717,5.34147c0.14862,0 9.36304,9.61466 9.21443,9.61466c0.14862,0 5.49893,14.95614 5.35031,14.95614c0.14862,0 1.04034,16.73663 0.89172,16.73663c0.14862,0 -6.39065,16.02443 -6.53927,16.02443c0.14862,0 -9.95753,9.25856 -10.10615,9.25856c0.14862,0 -14.71336,2.1366 -14.86199,2.1366c0.14862,0 -13.22717,-7.47807 -13.37579,-7.47807c0.14862,0 -6.09341,-13.17564 -6.24203,-13.17564c0.14862,0 -0.44586,-12.10735 -0.59448,-12.10735c0.14862,0 5.20169,-11.03906 5.05308,-11.03906c0.14862,0 8.47133,-6.05367 8.32271,-6.05367c0.14862,0 9.06581,0 8.91719,0c0.14862,0 6.39065,5.34147 6.24203,5.34147c0.14862,0 3.12101,6.76587 2.9724,6.76587c0.14862,0 0.14862,7.83417 0,7.83417c0.14862,0 -4.60722,5.69757 -4.75584,5.69757c0.14862,0 -6.39065,-0.7122 -6.53927,-0.7122c0.14862,0 -1.33757,-4.62928 -1.4862,-4.62928c0.14862,0 1.93206,-1.78049 2.2293,-1.78049',
                        btn: {left: 34, top: 20},
                        track: {track: '#50c6f7', prog: '#f973e5'},
                        img: {play: '', pause: ''}
                });
        });

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

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

红影 发表于 2023-10-19 16:01

又是一个漂亮的新路径。给亦是金老师点赞{:4_187:}

红影 发表于 2023-10-19 16:03

这个弹琴动画也有趣。背景漂亮，歌曲好听，欣赏亦是金老师好帖{:4_187:}

亦是金 发表于 2023-10-19 19:03

红影 发表于 2023-10-19 16:01
又是一个漂亮的新路径。给亦是金老师点赞

问好红影！{:4_187:}

亦是金 发表于 2023-10-19 19:04

红影 发表于 2023-10-19 16:03
这个弹琴动画也有趣。背景漂亮，歌曲好听，欣赏亦是金老师好帖

谢谢欣赏点评！祝你欣赏愉快！{:4_187:}

红影 发表于 2023-10-19 21:00

亦是金 发表于 2023-10-19 19:03
问好红影！

亦是金老师厉害，找到这么多有趣的路径{:4_204:}

红影 发表于 2023-10-19 21:01

亦是金 发表于 2023-10-19 19:04
谢谢欣赏点评！祝你欣赏愉快！

这个乐队的名字好玩，鸡蛋面{:4_189:}

千羽 发表于 2023-10-19 21:27

老师的制作全是看点，看着舒心{:4_187:}

亦是金 发表于 2023-10-19 22:13

本帖最后由 亦是金 于 2023-10-19 22:16 编辑

红影 发表于 2023-10-19 21:00
亦是金老师厉害，找到这么多有趣的路径
问好红影！{:4_187:}我是找一个螺旋图，在PS中拼接成双螺旋，再在在线svg绘制工具上制作，得到svg路径。

亦是金 发表于 2023-10-19 22:13

红影 发表于 2023-10-19 21:01
这个乐队的名字好玩，鸡蛋面

{:4_189:}

亦是金 发表于 2023-10-19 22:14

千羽 发表于 2023-10-19 21:27
老师的制作全是看点，看着舒心

问好千羽！谢谢欣赏！{:4_187:}

红影 发表于 2023-10-19 22:47

亦是金 发表于 2023-10-19 22:13
问好红影！我是找一个螺旋图，在PS中拼接成双螺旋，再在在线svg绘制工具上制作，得到svg路径。

原来是自己拼的，这个脑筋动得好{:4_199:}

红影 发表于 2023-10-19 22:55

亦是金 发表于 2023-10-19 22:13


应该还有很多好玩的路径，比如音符。

亦是金 发表于 2023-10-20 09:04

红影 发表于 2023-10-19 22:47
原来是自己拼的，这个脑筋动得好

问好！{:4_187:}你的夸奖我会骄傲的！{:4_205:}

亦是金 发表于 2023-10-20 09:06

红影 发表于 2023-10-19 22:55
应该还有很多好玩的路径，比如音符。

我会试做一些新路径玩玩！

红影 发表于 2023-10-20 15:10

亦是金 发表于 2023-10-20 09:04
问好！你的夸奖我会骄傲的！

哈哈，能想出这么多路径，应该骄傲的啊{:4_173:}

红影 发表于 2023-10-20 15:10

亦是金 发表于 2023-10-20 09:06
我会试做一些新路径玩玩！

嗯嗯，看到了8字路径呢{:4_187:}

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

厉害了，亦是金太有才了，这个路径是对称的{:4_178:}

冬天的雨 发表于 2023-10-23 13:22

{:4_199:}{:4_199:}{:4_199:}

赞的
页: [1]
查看完整版本: 《 旋 涡 》 - 鸡蛋面乐队（测试双螺旋路径）