女人花 (慢四版)【变色可控】
<style>#papa {
margin: 100px-300px;
place-items: center;
width: 1164px;
height: 620px;
background:#000000 ; border-radius: 0%;display: grid;
box-shadow: 0 0px 4px 0px hsla(0,0%,0%,.65);
user-select: none;
position: relative;
z-index: 1;
overflow:hidden;
}
#ptpt{width: 100%;
height: 100%;display: grid;
left: 0%; top:0%;
background:#00f000 url(https://www.kumeiwp.com/sub/filestores/2023/02/02/c52ebbf1d81561a7d97939f3bf1dee54.jpg)no-repeat center/cover;
position:absolute;
z-index: 4;
opacity: 1;
animation: ptpt 3s infinite linear;
}
@keyframes ptpt{0%{filter:hue-rotate(360deg);}100%{filter:hue-rotate(0deg)}}
#ptpu{width: 400px;display: grid;
height: 260px;mix-blend-mode:normal;
left: 0%; top:60%;border-radius: 0%;
position:absolute;opacity: 1;
z-index: 4;transform:translate(0%,0%)scale(0.6);
overflow:hidden;
}
#ptpn{width: 400px;display: grid;
height: 260px;
left: 70%; top:20%;
position:absolute;transform: rotateY(180deg);
z-index: 5;
opacity: 0.8;
}
#mplayer {position: absolute;grid-template-columns: auto auto auto;gap: 8px;display: grid;place-items: center;color: var(--color);font: normal 12px sans-serif;z-index:999;--ww: 500px;--color: #ffffff;--btn_size: 25px;--track: #ffffff;--prog: #000000;}
#btnplay {--state: paused;margin-right: -5px;font: bold var(--btn_size) / var(--btn_size) serif;cursor: pointer;animation: rot 4s infinite linear;animation-play-state: var(--state);}
@keyframes rot { to { transform: rotate(1turn); } }
#prog {--xx: 0px;width: var(--ww);height: 2px;border-radius: 8px;background: var(--track
);position: relative;cursor: pointer;}
#prog::before {position: absolute;content: '';width: var(--xx);height: 100%;border-radius: 8px;background: var(--prog);}
@keyframes cover1{ from { width: 0; } to { width: 100%;color: #ff0000;} }
@keyframes cover2 { from { width: 0;color: #00ff00; } to { width: 100%; } }
#lrc { --motion: cover2; --tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(240, 50%, 50%, .25), hsla(240, 30%, 50%, .75));position: absolute;left: 0%; top:0%;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);font:normal 2.4em 华文新魏;color:#000078; z-index:100; transform: translate(-30%, 10px)perspective(150px)rotateY(20deg)rotate(20deg);-webkit-background-clip: text;white-space: pre;-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 10%,#FFFFFF)}
#lrc::before { position: absolute; content: attr(data-lrc); color: transparent; width: 30%; height: 100%;white-space: pre; background:#880000;-webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
</style>
<div id="papa">
<div id="ptpt"></div>
<div id="ptpn"><img id="pp0"src="https://pic2.imgdb.cn/item/645611730d2dde5777c30c2f.gif" width="100%" height="100%"></div>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="ptpu">
<img id="pp1"src="https://pic2.imgdb.cn/item/64518dc30d2dde57779cde74.gif" width="100%" height="100%">
<div id="mplayer"><span id="btnplay"></span><span id="prog"></span><span id="tmsg">00:00 | 00:00</span></div>
</div>
</div>
<audio id="aud" src="https://p4.t57.cn:8399/2015/jy/12j/OPE.m4a" loop autoplay></audio>
<script >
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 0px; left: 0%; transform: translateX(-50%);',player_css: 'bottom: 0px; ; transform: translateX(-50%);',btn_txt: '✳',playerCode: ``,};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;btnplay.innerHTML = data.btn_txt;let mKey = 0, mFlag = true;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;aud.addEventListener('timeupdate', () => {let prg = aud.currentTime * prog.offsetWidth / aud.duration < 6 ? 6 : aud.currentTime * prog.offsetWidth / aud.duration;tmsg.innerText = `${toMin(aud.currentTime)} | ${toMin(aud.duration)}`;prog.style.setProperty('--xx', prg + '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());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 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;}};mkPlayer.HCPlayer = playCode;})(this);
(function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow;background: black; border: 0px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(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(90,80%,50%,.35),hsla(100,70%,45%,.6)); top:65%; left: 50%',
player_css: '--ww: 120px;top:57%;left: 23%;',
btn_txt: '✳',
});
FS({
pa: papa,
set: 'backgroun: #333; color: snow; border: 0px solid snow; bottom: 90%; left: 20px;font:normal 2em 华文行楷;',
});
aud.onerror = () => {
if(aud.error.code === 4) aud.src='http://antiserver.kuwo.cn/anti.s?rid=MUSIC_263613736&response=res&format=mp3|aac&type=convert_url&br=128kmp3&agent=iPhone&callback=getlink&jpcallback=getlink.mp3';
}
})();
ptpt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>ptpt.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>ptpt.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;
// 透明度还原
image0.style.opacity = '';image1.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
image0 = document.getElementById("pp0"),
image1= document.getElementById("pp1"),
button = document.getElementById("mplayer");
button.onclick = function() {
if (this.value == '') {
image0.play(); image1.play();
this.value = '.';
} else {
image0.stop(); image1.stop();
this.value = '';
}
};
</script>
欣赏老师佳作！{:4_204:} 漂亮的变色音画和倾斜歌词。欣赏亚伦老师好帖{:4_199:} 好漂亮的一朵花啊，欣赏问好！{:4_204:} 欣赏亚伦的精彩制作{:4_187:} 全屏效果更加美 这朵花真的会开放呢，好看。 其实我也是挺佩服亚伦的，每次修改代码都有自己的特色，而且代码从来不加密，不像有的人盗用了别人的代码制作完了加密发帖，以为是自己的东西了，其实会的人一看就晓得的{:4_189:} 亚伦每个帖我都会仔细看看，只是最近忙了，上来时间会少了 小辣椒 发表于 2023-5-6 21:37
亚伦每个帖我都会仔细看看，只是最近忙了，上来时间会少了
谢谢辣椒的支持，亚伦才有今天的成就！我的音画重来不加密，只求大家都能学会！欢迎朋友提出意见！
页:
[1]