心灵家园 恭喜庶民入驻花潮满月
<style>
#papa {
margin: 80px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: gray url('https://pic.imgdb.cn/item/63f4d5aef144a01007c9b48b.jpg') no-repeat center/cover;
box-shadow: 8px 4px 20px hsla(0,0%,0%,.65);
user-select: none;
position: relative; overflow: hidden;
z-index: 1;
}
#mydiv {
right: 260px; top:210px;
width: 60px;
height: 60px;
background: lightblue;
box-shadow: -10px -20px 30px navy inset;
border-radius: 50%;
position: absolute;
}
#mydiv::before, #mydiv::after {
--deg: 360deg;
position: absolute;
content: '';
left: -40px;
top: -40px;
bottom: -40px;
right: -40px;
border: 6px dotted navy;
border-radius: 50%;
transform: perspective(1600px) rotateX(45deg) rotateY(15deg);
animation: rot11 8s linear infinite;
}
#mydiv::after {
--deg: -360deg;
left: -50px;
top: -50px;
right: -50px;
bottom: -50px;
}
@keyframes rot11 {
to { transform: perspective(1600px) rotateX(45deg) rotateY(15deg) rotateZ(var(--deg)); }
}
</style>
<div id="papa"><div id="mydiv"></div></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1867091357.mp3" loop autoplay></audio>
<script >
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 15px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 0; left: 50%; transform: translateX(-50%);',num: 3,playerCode: `<style>#mplayer {position: absolute;display: grid;grid-template-areas: 'cur btnplay dur''prog prog prog';gap: 8px 2px;place-items: end center;color: var(--color);font: normal 16px sans-serif;padding-bottom: 20px;z-index: 999;--ww: 260px;--btn_size: 30px;--color: hsla(0,0%,100%,.75);--track: hsla(90,100%,95%,.65);--prog: linear-gradient(90deg,hsla(90,30%,50%,.55),hsla(280,40%,50%,.75),hsla(30,100%,50%,.65));}#cur { grid-area: cur; color: var(--color); }#dur { grid-area: dur; color: var(--color); }#btnplay {--state: paused;position: absolute;grid-area: btnplay;width: var(--btn_size);height: var(--btn_size);bottom: 6px;animation: rot linear 3s infinite;animation-play-state: var(--state);cursor: pointer;}#btnplay > span {position: absolute;width: 50%;height:50%;border-radius: 0 100%;background: var(--color);transform-origin: 100% 100%;}#prog {--xx: 0px;grid-area: prog;width: var(--ww);height: 4px;background: var(--track);position: relative;display: grid;place-items: center;border-radius: 4px;}#prog::before, #prog::after { position: absolute; content: ''; }#prog::before {left: 0;width: var(--xx);height: 100%;border-radius: 6px;background: var(--prog);border-radius: 4px;}#prog::after {left: calc(var(--xx) - 12px);opacity: .85;width: 16px;height: 16px;background: radial-gradient(transparent 2px, teal 0, Gold);border-radius: 50%;cursor: pointer;}#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(70, 50%, 50%, .45), hsla(190, 80%, 50%, .75));position: absolute;font: bold 2.4em sans-serif;color: hsl(0, 10%, 90%);white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));z-index: 1000;}#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}@keyframes cover1 { from { width: 0; } to { width: 100%; } }@keyframes cover2 { from { width: 0; } to { width: 100%; } }@keyframes rot { to { transform: rotate(1turn); } }</style><div id="lrc" data-lrc="HCPlayer">HCPlayer</div><div id="mplayer"><span id="btnplay"></span><span id="prog"></span><span id="cur">00:00</span><span id="dur">00:00</span></div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;let mKey = 0, mFlag = true, mDrag = false;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();aud.addEventListener('timeupdate', () => {cur.innerText = toMin(aud.currentTime);dur.innerText = toMin(aud.duration);if(mDrag===false) prog.style.setProperty('--xx', aud.currentTime * prog.offsetWidth / aud.duration + 'px');for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());prog.onmousedown = () => mDrag = true;document.onmouseup = () => mDrag = false;mplayer.onmouseup = (e) => { if(mDrag) aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth; };mplayer.onmousemove = (e) => { if(mDrag) moveBar(e.offsetX); };let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),btnplay.style.setProperty('--state', 'paused')): (lrc.style.setProperty('--state','running'),btnplay.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.lrcAr);showLrc(time);};let moveBar = (x) => {if(x < 0) x = 0;if(x > prog.offsetWidth - 5) x = prog.offsetWidth - 5;prog.style.setProperty('--xx', x + 'px');};let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};(function(num) {for(j = 0; j<num; j++) {let ele = document.createElement('span');ele.style.transform = `rotate(${j*360/num}deg)`;btnplay.appendChild(ele);}})(data.num);};mkPlayer.HCPlayer = playCode;})(this);
let averAdd = 0, offset = 0;
let geci = `
心灵家园—董咚
恭喜庶民入驻花潮满月
爱心如春风拂面
关心是雪中送炭
热心似冬日暖阳
真心能铸就明天
小鸟展开了翅膀
梦想飞向蓝天
生命选择了坚强
注定一往无前
人生坎坷
神采志坚
爱心撑起一片天
心相连
手相牵
共筑心灵家园
爱心如春风拂面
关心是雪中送炭
热心似冬日暖阳
真心能铸就明天
小鸟展开了翅膀
梦想飞向蓝天
生命选择了坚强
注定一往无前
人生坎坷
神采志坚
爱心撑起一片天
心相连
手相牵
共筑心灵家园
人生坎坷
神采志坚
爱心撑起一片天
心相连
手相牵
共筑心灵家园
共筑心灵家园
谢谢观赏
`;
let lrcTime = (ar) => {let tmpAr = [];for(j = 0; j <ar.length - 1; j ++) {if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));}let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item,key) => {ar = item > aver ? aver : item;});return ar;};
let getLrcAr = (text) => {let lrcAr = [];let calcRule = ;for(x of text.split('\n')) {let ar = [];let re = /\d+[\.:]\d+([\.:]\d+)?/g;let geci = x.replace(re,'');if(geci) {geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');let time = x.match(re);if(time != null) {for(y of time) {let tmp = y.match(/\d+/g);let sec = 0;for(z in tmp) sec += tmp * calcRule;ar = ;lrcAr.push(ar); }}}}lrcAr.sort((a,b)=> a - b);return(lrcTime(lrcAr));}
HCPlayer({
lrcAr: getLrcAr(geci),
lrc_css: '--bg: linear-gradient(hsla(200,80%,50%,.35),hsla(200,70%,45%,.6)); left: 60px; top: 60px;',
player_css: '--color: DarkBlue; bottom: 100px; left: 40px;--ww: 300px;--hh: 8px;--btn_size: 42px;--track: MediumOrchid;--prog: purple;',
});
})();
</script> 为了赶上在今天这个值得纪念的日子送礼，匆匆忙忙做了个帖子。
恭喜庶民入驻花潮满月，愿未来的日子玩得更开心。@庶民 我做帖子太慢了，弄得一堆提醒都没回复，来不及回了，明天吧{:4_173:} 谢谢黑黑@马黑黑的代码，把黑黑最新播放器当作动态效果了，另找了个带进度的封装播放器，比较喜欢带进度条的，可以自己调整进度来检查原始歌词的情况{:4_173:} 仙人居中的环境，向往中…… 红影 发表于 2023-2-21 23:33
为了赶上在今天这个值得纪念的日子送礼，匆匆忙忙做了个帖子。
恭喜庶民入驻花潮满月，愿未来的日子玩得更 ...
真心感谢您的友情与真情，庶民心情很激动。 红影 发表于 2023-2-21 23:35
谢谢黑黑@马黑黑的代码，把黑黑最新播放器当作动态效果了，另找了个带进度的封装播放器，比较喜欢带进度 ...
热心如冬日暖阳
支持像雪中送炭
祝福比恭喜更贵
庶民谢情意绵绵 马黑黑 发表于 2023-2-21 23:43
仙人居中的环境，向往中……
谢谢黑黑的代码，用原始歌词更方便了，想送礼的时候变得十分方便。{:4_187:} 庶民 发表于 2023-2-22 06:03
真心感谢您的友情与真情，庶民心情很激动。
客气了啊，还要感谢你呢，有文采又热心，还帮大家做签名，还有帮我做的消寒帖子动画，大家包括影子都受益良多呢{:4_187:} 庶民 发表于 2023-2-22 06:07
热心如冬日暖阳
支持像雪中送炭
祝福比恭喜更贵
庶民太客气了，祝福你满月开心{:4_187:} 红影 发表于 2023-2-22 19:06
谢谢黑黑的代码，用原始歌词更方便了，想送礼的时候变得十分方便。
{:5_106:} 红影 发表于 2023-2-22 19:07
客气了啊，还要感谢你呢，有文采又热心，还帮大家做签名，还有帮我做的消寒帖子动画，大家包括影子都受益 ...
看到这里有这个栏目，唤醒了我的旧梦。 庶民 发表于 2023-2-23 04:51
看到这里有这个栏目，唤醒了我的旧梦。
是的，以前芊芊也喜欢帮大家做签名，现在她忙了。 红影 发表于 2023-2-23 12:21
是的，以前芊芊也喜欢帮大家做签名，现在她忙了。
人都有一些事情，过几天我也忙了。 庶民 发表于 2023-2-24 05:46
人都有一些事情，过几天我也忙了。
嗯嗯，人都可能有忙的事，正事要紧{:4_187:}
页:
[1]