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

《童年的秋》 - 鸡蛋面乐队（测试8字路径）

<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/231020c.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=1368894906.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,-5px); background: transparent;',
                        player_css: 'width: 350px; height: 350px;top: 70%; left: 62%; background: url("") no-repeat center/cover;',

                        path: 'm33,40.75688c0,-127.32954 171.85282,127.32954 171.85282,0c0,-127.32954 -171.85282,127.32954 -171.85282,0z',
                        btn: {left: 34, top: 20},
                        track: {track: '#50c6f7', prog: '#f973e5'},
                        img: {play: 'https://pic.imgdb.cn/item/65212a5ac458853aef566925.png', pause: 'https://pic.imgdb.cn/item/65212a6bc458853aef566b8e.png'}
                });
        });

        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-20 10:03

这个8字路径好，像两只小可爱的蝴蝶结{:4_199:}

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

背景图里的动态元素很美，两只小可爱的选择也跟歌曲含义很相符。欣赏亦是金老师好帖{:4_199:}

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

红影 发表于 2023-10-20 10:03
这个8字路径好，像两只小可爱的蝴蝶结

问好！谢谢欣赏点赞！{:4_187:}

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

红影 发表于 2023-10-20 10:04
背景图里的动态元素很美，两只小可爱的选择也跟歌曲含义很相符。欣赏亦是金老师好帖

谢谢夸奖！{:4_205:}

醉美水芙蓉 发表于 2023-10-20 11:56

亦是金 发表于 2023-10-20 14:35

醉美水芙蓉 发表于 2023-10-20 11:56
欣赏老师佳作！

问好水芙蓉！{:4_187:}

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

亦是金 发表于 2023-10-20 10:17
问好！谢谢欣赏点赞！

童年的秋，看着好可爱{:4_187:}

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

亦是金 发表于 2023-10-20 10:18
谢谢夸奖！

问好亦是金老师，再赏好帖{:4_187:}

亦是金 发表于 2023-10-20 18:07

红影 发表于 2023-10-20 15:13
童年的秋，看着好可爱

问好！{:4_187:}

亦是金 发表于 2023-10-20 18:08

红影 发表于 2023-10-20 15:13
问好亦是金老师，再赏好帖

欢迎再次欣赏！谢谢！{:4_187:}

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

亦是金 发表于 2023-10-20 18:07
问好！

昨天和你说音符也可以做，然后我真的找了一个去做，一会我去发出来{:4_173:}

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

亦是金 发表于 2023-10-20 18:08
欢迎再次欣赏！谢谢！

这么可爱的帖子必须一赏再赏{:4_187:}

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

红影 发表于 2023-10-20 19:19
昨天和你说音符也可以做，然后我真的找了一个去做，一会我去发出来

好的，我去欣赏学习！{:4_187:}

红影 发表于 2023-10-20 22:41

亦是金 发表于 2023-10-20 20:59
好的，我去欣赏学习！

好像线条不是很准确，只是好玩呢{:4_173:}

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

音乐好听，动图好看，路径播放器制作精彩！

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

亦是金非常的有才{:4_178:}
页: [1]
查看完整版本: 《童年的秋》 - 鸡蛋面乐队（测试8字路径）