鲁冰花 TO：亚伦 祝双节快乐！
<style>
#papa {margin: 150px 0 0 calc(50% - 581px); width: 1000px;height:846px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 8px #165a28; overflow: hidden;place-items: center;background: #333 url('https://xlaj.cn/assets/file/zp/20230920232647.jpg') no-repeat center/cover; position: relative;z-index: 12345;}
@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1)translate(0%,0%);filter:hue-rotate(360deg);
opacity:1}
100% {
-webkit-transform:rotate(0deg)scale(4)translate(0%,0%);filter:hue-rotate(0deg);
opacity:0}
}
#dt{position: absolute;top:0%; left:0%;width: 1000px;height: 846px;z-index:2;}
#flyBox { --w: 180px; width: var(--w); overflow: hidden; color: #cccccc; position: absolute; left:45%;bottom: 14%; font: normal 1.2em华文新魏;z-index:5;}
#flyBox div { word-break: keep-all; white-space: nowrap; animation: fly 10s linear infinite; background:#0000}
@keyframes fly { from { transform: translateX(100%); } to { transform: translateX(calc(0% - var(--w))); }}
#lrc { --motion: cover2; --tt: 2s; position: absolute; left: 53%;top:69%;transform: translate(-50%); font:normal 2.0em 华文新魏; color:#0000;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0); z-index: 5; place-items: center; overflow: hidden; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#ff0000;-webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; place-items: center;}
@keyframes cover1{0% { width: 100%;transform: rotateY(-100deg)rotatex(100deg);filter: hue-rotate(180deg)brightness(850%)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(150%) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(150%);width: 100%;}
}
@keyframes cover2 { 0% { width: 100%;transform: rotateY(-100deg)rotatex(100deg);filter: hue-rotate(180deg)brightness(850%)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%);width: 100%;}
}
#mplayer { position: absolute; left: 21%;top:74.3%;cursor: pointer;z-index:888; width: 100%;mix-blend-mode: lighten; filter:invert(100%)}
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:80%;color:#FFffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.0em华文新魏; opacity: 1; cursor: pointer; z-index: 111}
</style>
<div id="papa">
<div id='tu'></div>
<div id='dt' ><img id="testImg" src="https://xlaj.cn/assets/file/zp/20230919112843.gif" width="1000px" height="846px"></div>
<div id="flyBox"><div >帖赠：亚伦 祝双节快乐！</div></div>
<span id="fullscreen"> </span>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="bnt"><div id="mplayer"><audiostyle="width:12%;" id="aud" controls="controls" autoplay="autoplay" loop="loop" src= "https://xlaj.cn/assets/file/zp/20230919112921.mp3" type="audio/mpeg"></audio></div></div>
</div>
<script>
(function() {
let mKey = 0, mFlag = true;
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 averAdd = 0, offset = 0;
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));}
let geci = ` DJ音乐--鲁冰花
DJ音乐--鲁冰花
天上的星星不说话
地上的娃娃想妈妈
天上的眼睛眨呀眨
妈妈的心呀鲁冰花
家乡的茶园开满花
妈妈的心肝在天涯
夜夜想起妈妈的话
闪闪的泪光鲁冰花
啊~
啊~
夜夜想起妈妈的话
闪闪的泪光鲁冰花
啊~
啊~
夜夜想起妈妈的话
闪闪的泪光
`;
let lrcAr = getLrcAr(geci);
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
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;}
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script>
<script>
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
fs = !fs;
};
tu.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>tu.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>tu.style.animationPlayState = 'paused');
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 移除存储的canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
// 透明度还原
image.style.opacity = '';
}
if (this.storeUrl) {
this.src = this.storeUrl;
}
};
HTMLImageElement.prototype.stop = function() {
var canvas = document.createElement('canvas');
// 尺寸
var width = this.width, height = this.height;
if (width && height) {
// 存储之前的地址
if (!this.storeUrl) {
this.storeUrl = this.src;
}
// canvas大小
canvas.width = width;
canvas.height = height;
// 绘制图片帧（第一帧）
canvas.getContext('2d').drawImage(this, 0, 0, width, height);
// 重置当前图片
try {
this.src = canvas.toDataURL("image/gif");
} catch(e) {
// 跨域
this.removeAttribute('src');
// 载入canvas元素
canvas.style.position = 'absolute';
// 前面插入图片
this.parentElement.insertBefore(canvas, this);
// 隐藏原图
this.style.opacity = '0';
// 存储canvas
this.storeCanvas = canvas;
}
}
};
}
var image = document.getElementById("testImg");
varbutton = document.getElementById("bnt");
let mState = () => aud.paused ? image.stop() : image.play();
bnt.onclick = () => {aud.paused ? aud.play() : aud.pause();}
aud.addEventListener('play', mState,false);
aud.addEventListener('pause', mState,false);
</script>
@亚伦
祝双节快乐！ 现在一键停止就是滚动字停不了{:4_173:}
我也是不会弄，就这样发了 小辣椒很喜欢这个小播，做了这个动图，希望亚伦喜欢 谢谢辣椒的祝福！祝全家中秋快乐！ 亚伦影音工作室 发表于 2023-9-25 15:57
谢谢辣椒的祝福！祝全家中秋快乐！
谢谢~~提前祝福送上，双节快乐!{:4_173:} 欢天喜地、其乐融融。
祝小辣椒中秋快乐，
祝亚伦中秋快乐！
祝朋友们中秋快乐！ 欣赏欣赏 节奏感强{:4_208:} 是不是小孩子的歌{:4_170:} 好听，循环一下{:4_208:} 亚伦影音工作室 发表于 2023-9-25 15:57
谢谢辣椒的祝福！祝全家中秋快乐！
亚伦收礼开心{:4_187:} 进来欣赏小辣椒的《鲁冰花》{:4_187:} 好多的亮点啊，眼睛都不够用了{:4_173:} 这么多的素材，要精准的安排好位置，听不容易的，小辣椒棒棒哒{:4_187:} 问好亚伦，收礼开心{:4_187:} 醉美水芙蓉 发表于 2023-9-25 16:49
欣赏辣椒美女精美播放器！
谢谢水芙蓉欣赏{:4_171:} 梦油 发表于 2023-9-25 16:49
欢天喜地、其乐融融。
祝小辣椒中秋快乐，
祝亚伦中秋快乐！
谢谢梦油好温馨的回复{:4_187:} 世外桃源 发表于 2023-9-25 16:52
欣赏欣赏
谢谢欣赏，问好世外桃源{:4_187:}
页:
[1]
2