《做你心上人》 - 孙 露（试帖马黑黑老师svg路径播放器）
本帖最后由 亦是金 于 2023-10-7 13:27 编辑 <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://z4a.net/images/2023/10/07/1005f.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://ysj147.s3-us-east-1.ossfiles.com/shaobutin/CD1/0105.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: 250px; height: 250px; transform: translateY(-20px);',
path: 'm123.80225,29.99548l2.56667,-3.09789l-6.16,-1.40813l-8.89778,2.81626l0.34222,3.37952l10.26667,1.40813l11.97778,-4.2244c0.17111,0 2.22445,-4.78765 2.22445,-5.06928c0,-0.28163 -3.42222,-3.37952 -3.59333,-3.37952c0.17111,0 -5.64667,-2.53464 -5.81778,-2.53464c0.17111,0 -7.01556,-0.28163 -7.18667,-0.28163c0.17111,0 -4.62,3.66114 -4.79111,3.66114c0.17111,0 -6.33111,3.09789 -6.50222,3.09789c0.17111,0 -5.30445,5.3509 -5.47556,5.3509c0.17111,0 -0.51333,3.66114 -0.68444,3.66114c0.17111,0 5.64667,4.50602 5.47556,4.50602c0.17111,0 8.04222,-0.84488 8.38445,-0.84488c0.34222,0 14.03112,-3.66114 14.37334,-3.66114c0.34222,0 14.37334,-7.88554 14.20223,-7.88554c0.17111,0 -15.91334,10.98343 -15.57112,10.98343c0.34222,0 -11.63556,5.3509 -11.29334,5.3509c0.34222,0 -7.18667,0.84488 -7.18667,0.56325c0,-0.28163 -9.92445,-3.37952 -10.09556,-3.37952c0.17111,0 -5.30445,-9.85693 -5.47556,-9.85693c0.17111,0 7.35778,-8.16717 7.18667,-8.16717c0.17111,0 7.7,-6.47741 8.04222,-6.75904c0.34222,-0.28163 0.34222,-2.81626 0.17111,-2.81626c0.17111,0 -2.56667,-0.84488 -2.73778,-0.84488c0.17111,0 -10.43778,6.19578 -10.09556,5.91416c0.34222,-0.28163 -7.87111,1.97139 -8.04222,1.97139c0.17111,0 -7.7,5.06928 -7.87111,5.06928c0.17111,0 -1.88222,7.60392 -2.05333,7.60392c0.17111,0 2.56667,8.16717 2.39556,8.16717c0.17111,0 5.98889,3.94277 5.98889,4.2244c0,0.28163 22.9289,7.04066 22.75779,7.04066c0.17111,0 3.93556,1.12651 3.76445,1.12651c0.17111,0 12.49112,-1.97139 12.32,-1.97139c0.17111,0 8.04222,-4.50602 8.04222,-4.78765c0,-0.28163 6.16,-10.13855 5.98889,-10.13855c0.17111,0 12.49112,-7.88554 12.32,-7.88554c0.17111,0 3.93556,-5.06928 3.76445,-5.06928c0.17111,0 -3.25111,-4.2244 -3.42222,-4.2244c0.17111,0 -11.46445,-2.25301 -11.63556,-2.25301c0.17111,0 -10.43778,-5.3509 -10.60889,-5.3509c0.17111,0 9.75334,9.85693 9.58223,9.85693c0.17111,0 8.04222,5.63253 7.87111,5.63253c0.17111,0 1.54,9.29367 1.88222,9.29367c0.34222,0 -4.44889,13.7997 -4.62,13.7997c0.17111,0 -7.35778,9.01205 -7.01556,9.01205c0.34222,0 -4.44889,1.40813 -4.10667,1.40813c0.34222,0 -7.52889,1.12651 -7.7,1.12651c0.17111,0 -3.25111,1.97139 -2.90889,1.97139c0.34222,0 -5.13333,6.19578 -5.30445,6.19578c0.17111,0 -2.56667,-0.84488 -2.73778,-0.84488c0.17111,0 -8.04222,-7.60392 -8.21334,-7.60392c0.17111,0 -14.54445,-3.37952 -14.71556,-3.37952c0.17111,0 -8.72667,-2.53464 -8.89778,-2.53464c0.17111,0 -3.93556,-4.78765 -4.10667,-4.78765c0.17111,0 -0.85556,-9.29367 -1.02667,-9.29367c0.17111,0 -5.30445,-5.3509 -5.47556,-5.3509c0.17111,0 -2.90889,0 -3.08,0c0.17111,0 -4.96222,7.88554 -5.13333,7.88554c0.17111,0 -1.19778,6.75904 -1.36889,6.75904c0.17111,0 0.85556,7.88554 0.68444,7.88554c0.17111,0 11.80667,8.44879 11.63556,8.44879c0.17111,0 15.22889,3.09789 15.57112,3.09789c0.34222,0 14.71556,-2.25301 14.54445,-2.25301c0.17111,0 28.57556,-15.20783 28.40445,-15.20783c0.17111,0 19.33556,-14.64458 19.16445,-14.64458c0.17111,0 10.78,-5.3509 10.60889,-5.3509c0.17111,0 2.56667,-0.84488 2.39556,-0.84488c0.17111,0 14.88667,6.19578 15.57112,5.91416c0.68444,-0.28163 11.97778,3.09789 11.80667,3.09789c0.17111,0 -1.88222,2.81626 -2.05333,2.81626c0.17111,0 -17.28223,8.16717 -17.45334,8.16717c0.17111,0 -6.33111,15.20783 -6.50222,15.20783c0.17111,0 -6.33111,5.3509 -6.50222,5.3509c0.17111,0 -4.62,0.56325 -4.79111,0.56325c0.17111,0 -19.33556,-3.37952 -19.50667,-3.37952c0.17111,0 -12.49112,1.68976 -12.66223,1.68976c0.17111,0 -6.67334,3.37952 -6.84445,3.37952c0.17111,0 -1.88222,7.32229 -1.54,7.32229c0.34222,0 1.71111,23.93825 1.54,23.93825c0.17111,0 0.17111,24.21988 0.51333,23.93825c0.34222,-0.28163 -6.84445,-14.9262 -7.01556,-14.9262c0.17111,0 -11.46445,-9.29367 -11.63556,-9.29367c0.17111,0 -13.17556,-4.2244 -13.34667,-4.2244c0.17111,0 -12.49112,-0.84488 -12.49112,-1.12651c0,-0.28163 -14.71556,3.94277 -14.88667,3.94277c0.17111,0 -11.12223,2.25301 -11.29334,2.25301c0.17111,0 21.3889,8.73042 21.21778,8.73042c0.17111,0 17.28223,11.82831 17.62445,11.82831c0.34222,0 11.29334,7.60392 13.68889,7.60392c2.39556,0 23.27112,-2.53464 23.10001,-2.53464c0.17111,0 23.10001,-9.85693 22.9289,-9.85693c0.17111,0 18.65112,1.12651 18.48001,1.12651c0.17111,0 20.02001,4.50602 20.36223,4.50602c0.34222,0 19.8489,5.63253 20.19112,5.63253c0.34222,0 9.58223,1.68976 9.41111,1.68976c0.17111,0 -19.33556,6.47741 -19.50667,6.47741c0.17111,0 -20.02001,5.06928 -20.19112,5.06928c0.17111,0 -11.80667,-0.84488 -11.97778,-0.84488c0.17111,0 -22.75779,-5.3509 -22.9289,-5.3509c0.17111,0 -10.09556,-3.37952 -10.26667,-3.37952c0.17111,0 -5.98889,1.12651 -6.16,1.12651c0.17111,0 -3.93556,3.94277 -4.10667,3.94277c0.17111,0 -1.19778,22.24849 -0.85556,22.24849c0.34222,0 -1.36889,34.07681 -1.02667,34.07681',
btn: {left: 34, top: 20},
track: {track: '#f4fd05', prog: '#fb0925'},
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> 这玫瑰好复杂的路径，弄出来真不容易。{:4_187:} 动态背景很漂亮，人物的眼睛还会眨呢。欣赏亦是金老师好帖{:4_199:} 红影 发表于 2023-10-7 14:48
这玫瑰好复杂的路径，弄出来真不容易。
我是找了一笔画的玫瑰花，在svg路径在线制作网中，描点制作而成的。比你线描制作蝴蝶简单！{:4_189:} 红影 发表于 2023-10-7 14:50
动态背景很漂亮，人物的眼睛还会眨呢。欣赏亦是金老师好帖
问好！谢谢欣赏！{:4_187:} 这个路径不简单！我拿走了！ 亦是金 发表于 2023-10-7 15:07
我是找了一笔画的玫瑰花，在svg路径在线制作网中，描点制作而成的。比你线描制作蝴蝶简单！
能描得这么仔细也很不容易呢，亦是金老师辛苦了{:4_187:} 亦是金 发表于 2023-10-7 15:08
问好！谢谢欣赏！
问好亦是金老师，下午好{:4_187:} 亚伦影音工作室 发表于 2023-10-7 15:13
这个路径不简单！我拿走了！
问好亚伦！谢谢欣赏！向你学习！{:4_176:} 红影 发表于 2023-10-7 16:11
能描得这么仔细也很不容易呢，亦是金老师辛苦了
谢谢夸奖！{:4_172:} 红影 发表于 2023-10-7 16:12
问好亦是金老师，下午好
下午好！{:4_187:} 醉美水芙蓉 发表于 2023-10-7 17:42
老师这个路径漂亮，我收藏了！
问好！谢谢欣赏！{:4_187:} 亦是金 发表于 2023-10-7 17:22
谢谢夸奖！
亦是金老师想弄的路径就能弄出来，很赞的{:4_187:} 亦是金 发表于 2023-10-7 17:22
下午好！
谢谢，问好亦是金老师{:4_187:} 玫瑰花路径，亦是金太厉害了，大赞的{:4_199:} 感谢分享{:4_187:} 这个玫瑰花路径，前辈你做的太美了{:4_178:} 我都没有好好做一个的，只能以后再说了 向前辈学习，谢谢分享精彩的路径效果{:4_199:}
页:
[1]
2