《风含情水含笑》 - 梦之旅（再试帖马黑黑老师svg路径播放器）
本帖最后由 亦是金 于 2023-10-10 13:45 编辑 <br /><br />《风含情水含笑》 - 梦之旅<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1973151">
<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:50px;margin-LEFT: -310px;">
<style>
#papa { margin: auto; width: 1200px; height: 700px;top: -80px;left: 0px; background: url('https://z4a.net/images/2023/10/09/9732g2.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: 1100px; height: 650px; top: -300; left: 50; }
</style>
<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: 10px;LEFT: -250px;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 style="position: relative; width: 500px; height: 50px; top:610px;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>
<div id="papa"><div id="sky"></div>
<audio id="aud" src="https://ysj147.s3-us-east-1.ossfiles.com/ltdgs02/1010.mp3" autoplay loop></audio>
</div>
<script>
(function() {
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let js1 = 'https://ysj147.s3-us-east-1.ossfiles.com/zzsc/js/svg_path_lrc_z_ysj4.js',
js2 = 'https://ysj147.s3-us-east-1.ossfiles.com/zzsc/js/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: 'top: 60px; --bg: linear-gradient(rgba(249,214, 43,.25),rgba(249,42,111,.7)); color: snow;left: 80px;',
fs_css: 'bottom: 3%; left: 100px; transform: translate(0,-35px); background: transparent; --color: rgba(63,168,211,.95);',
player_css: 'width: 190px; height: 247px; top: 50%; left: 14%; background: url("https://z4a.net/images/2023/10/09/839s5g2.png") no-repeat center/cover;',
path: 'm0.75002,178.71668c1.74223,0 5.44446,-7.8 5.44446,-8.23333c0,-0.43333 -3.48445,-20.8 -3.70223,-20.8c0.21778,0 0.65334,-17.76667 0.43556,-17.76667c0.21778,0 -1.08889,-23.4 -0.65334,-23.4c0.43556,0 9.14669,-21.23334 9.14669,-21.66667c0,-0.43333 8.71114,-17.33334 8.49336,-17.33334c0.21778,0 8.0578,-8.23333 8.49336,-8.66667c0.43556,-0.43333 10.01781,-31.63334 10.45336,-32.06667c0.43556,-0.43333 9.58225,-17.33334 10.01781,-17.76667c0.43556,-0.43333 17.85783,-7.8 18.29338,-7.8c0.43556,0 19.60005,-3.46667 19.38228,-3.46667c0.21778,0 20.25339,1.3 20.03561,1.3c0.21778,0 12.41337,11.26667 12.19559,11.26667c0.21778,0 5.0089,11.26667 5.88002,11.26667c0.87111,0 4.35557,6.06667 5.22668,6.06667c0.87111,0 6.09779,9.53333 6.09779,9.96667c0,0.43333 0,13 -0.21778,13c0.21778,0 5.44446,14.3 5.22668,14.3c0.21778,0 14.59115,0.43333 14.37337,0.43333c0.21778,0 5.0089,20.8 5.88002,20.8c0.87111,0 8.71114,11.7 8.49336,11.7c0.21778,0 -10.67114,13.43333 -10.88892,13.43333c0.21778,0 -6.75113,19.06667 -6.96891,19.06667c0.21778,0 -3.70223,12.56667 -3.92001,12.56667c0.21778,0 10.67114,27.73334 11.54225,27.73334c0.87111,0 21.77784,29.03334 22.21339,29.03334c0.43556,0 8.27558,31.63334 8.0578,31.63334c0.21778,0 -1.08889,13.43333 -1.30667,13.43333c0.21778,0 -18.07561,-3.03333 -18.29338,-3.03333c0.21778,0 -14.15559,-18.63334 -14.37337,-18.63334c0.21778,0 -9.80003,-27.73334 -10.01781,-27.73334c0.21778,0 -1.52445,17.76667 -1.08889,17.76667c0.43556,0 -10.45336,13.86667 -10.67114,13.86667c0.21778,0 -27.65785,4.33333 -27.87563,4.33333c0.21778,0 -19.38228,-9.53333 -19.60005,-9.53333c0.21778,0 -8.0578,-18.63334 -8.27558,-18.63334c0.21778,0 -6.31557,-22.96667 -6.53335,-22.96667c0.21778,0 -13.72004,-13.86667 -13.72004,-14.3c0,-0.43333 -17.85783,-11.7 -18.07561,-11.7c0.21778,0 -5.88002,-2.6 -6.09779,-2.6c0.21778,0 -9.36447,8.23333 -9.58225,8.23333c0.21778,0 -5.0089,24.7 -5.0089,24.26667c0,-0.43333 0,9.1 -0.21778,9.1',
btn: {left: 44, top: 210},
track: {track: '#a56f93', prog: '#fb2b70'},
img: {play: 'https://pic.imgdb.cn/item/6520c3f0c458853aef0a4920.png', pause: 'https://pic.imgdb.cn/item/6520c3b2c458853aef0a400c.png'}
});
});
loadJs(js2, () => {
H5lz({
papa: '#sky',
total: 7,
size: {width: 30, height: 62},
shape: {background: 'url("https://ysj147.s3-us-east-1.ossfiles.com/zzsc/png/8707.png") no-repeat center/cover', borderRadius: '0'},
ani: 'toLeft',
maxTime: 20,
offset: {x: 0, y: 0},
});
});
})();
</script></td></tr></table> 醉美水芙蓉 发表于 2023-10-10 07:04
这么复杂的路径老师都能做出来厉害了！
问好水芙蓉！{:4_187:} 醉美水芙蓉 发表于 2023-10-10 07:06
这个按钮我怎么看着反的！
谢谢指正！已经更改了！{:4_187:} 这个美女路径好漂亮，背景的动态制作也好美。欣赏亦是金老师好帖{:4_199:} 亦是金老师把两个插件都重新上传了呢，真仔细{:4_204:} 这张透明图上下的空间再多点，播放器按钮就可以放置在图片之外了，可以相互不受影响{:4_173:} 路径做得很仔细，很吻合轮廓。给亦是金老师点赞{:4_199:} 红影 发表于 2023-10-10 09:56
这个美女路径好漂亮，背景的动态制作也好美。欣赏亦是金老师好帖
问好红影！{:4_187:} 红影 发表于 2023-10-10 09:57
亦是金老师把两个插件都重新上传了呢，真仔细
我怕丢失，重新上传了！{:4_189:} 红影 发表于 2023-10-10 10:00
这张透明图上下的空间再多点，播放器按钮就可以放置在图片之外了，可以相互不受影响
谢谢指点，我试着修改一下。{:4_187:} 红影 发表于 2023-10-10 10:01
路径做得很仔细，很吻合轮廓。给亦是金老师点赞
谢谢夸奖！{:4_187:} 亦是金 发表于 2023-10-10 11:42
问好红影！
亦是金找的图图也好看，花了不少功夫的吧{:4_204:} 亦是金 发表于 2023-10-10 11:44
我怕丢失，重新上传了！
这个挺有道理的，更放心些。 亦是金 发表于 2023-10-10 11:45
谢谢指点，我试着修改一下。
指点不敢当，只是彼此的交流和探讨啊{:4_173:} 亦是金 发表于 2023-10-10 11:46
谢谢夸奖！
不客气，一起学习更开心{:4_187:} 红影 发表于 2023-10-10 14:09
亦是金找的图图也好看，花了不少功夫的吧
是的，寻寻觅觅也快乐！{:4_189:} 红影 发表于 2023-10-10 14:13
这个挺有道理的，更放心些。
{:4_189:} 红影 发表于 2023-10-10 14:14
指点不敢当，只是彼此的交流和探讨啊
谦虚！