《杏花溪之恋》 - 童丽/王浩（学习马黑黑老师svg路径播放器）
<meta charset="UTF-8"><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1969237">
<div style="width: 1250px;height: 640px;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 {
width: 1250px; height: 640px;top:-30px;LEFT: 0px; background: url('https://ysj147.s3-us-east-1.ossfiles.com/zzsc/gif/157g4.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>
<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: -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/zzsc/mp3/xinghuaxizhilian.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: 'm120.49999,62.44911c45.55863,-128.76177 224.05876,0 0,165.55087c-224.05876,-165.55087 -45.55863,-294.31264 0,-165.55087z',
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> 套用马黑黑老师svg播放器代码试做一个帖子！谢谢老师了！{:4_176:} 歌词同步的颜色设置和摆动字相互呼应呢。制作很漂亮。欣赏亦是金老师好帖{:4_199:} 红影 发表于 2023-10-3 17:16
歌词同步的颜色设置和摆动字相互呼应呢。制作很漂亮。欣赏亦是金老师好帖
问好！谢谢欣赏点评！{:4_187:} 亦是金 发表于 2023-10-3 17:41
问好！谢谢欣赏点评！
问好亦是金老师，节假期间还在做帖，真不容易。很赞{:4_199:} 红影 发表于 2023-10-3 19:09
问好亦是金老师，节假期间还在做帖，真不容易。很赞
晚上好！在家闲着，做帖玩玩！{:4_187:} 亦是金 发表于 2023-10-3 21:01
晚上好！在家闲着，做帖玩玩！
这个也是节假里不错的休闲呢{:4_204:} 红影 发表于 2023-10-3 21:21
这个也是节假里不错的休闲呢
{:4_189:} 醉美水芙蓉 发表于 2023-10-4 06:33
很漂亮！欣赏老师美贴！
谢谢！问好！{:4_187:} 亦是金 发表于 2023-10-4 18:08
问好亦是金老师，晚上好{:4_187:} 前辈，去做个自己的路径播放器，我就你那在线编辑的路径，总算现在明白了怎么去加背景用图片的那种路径效果 问好！你的殇雪帖子精美，路径精细，学习了！可否将路径的颜色换成与背景颜色差别明显一点的，这样便于观察播放路径的动态变化！供你参考！{:4_187:} 我有试做一个！{:4_203:}
页:
[1]