落单的鸳鸯-赵洋
本帖最后由 亚伦影音工作室 于 2023-12-7 17:46 编辑 <br /><br /><style type="text/css">#papa { margin: 180px -150px; width: 1164px; height: 620px;background:url(https://pic.imgdb.cn/item/64e9ee70661c6c8e544cd94a.jpg)no-repeat center/cover;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000; position: relative; overflow: hidden;}
#dh{ width: 100%; height: 100%; position: absolute;
z-index: 1;filter: url(#f1);
top:0px; left:0px;
animation: rod 5s linear infinite;}
@keyframes rod{0% {opacity: 1;}
80% {opacity: 0;}100% {opacity: 0;}
}
#prog {
position: absolute;z-index: 1666;
bottom: 30px;
left: calc(22% - 150px);
width: 75%;
height: 2px;
background: linear-gradient(to right, green, green var(--prg), white 0);
color: lightgreen;
--prg: 0%; --state: paused;
}
#prog::before, #prog::after { position: absolute;color: #00ff00; }
#prog::before { content: attr(data-cu); left:-50px; top: -10px; }
#prog::after { right: -50px; content: attr(data-du); ; top: -10px; }
#mplayer {z-index: 1666;
position: absolute;
top:320px;left:15%;
cursor: pointer; width: 420px;filter:hue-rotate(20deg);
height:150px;
}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; bottom: 15px; right: 4%;color:#00ff00;font:normal 2em 华文行楷; opacity: 1; cursor: pointer; z-index: 166}
#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(0deg, #ff0000, #ff0000, #ff0000);
position: absolute;z-index: 6;
left: 52%;
transform: translate(-50%);
top: -80px;
font:normal 3em 华文新魏;
font-weight:400;
color: #000080;
white-space: pre;
-webkit-background-clip: text;
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 20%;
height: 100%;
color: transparent;
overflow: hidden;
white-space: pre;
background: var(--bg);
-webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards;
animation-play-state: var(--state);
}
@keyframes cover1{0% { width: 0%;}100% { width: 100%;}}
@keyframes cover2 { 0% { width: 0%;}100% { width: 100%;}}
#dt{position: absolute;top:15%; left:4%;width: 60%;height: 65%;z-index:1; mix-blend-mode:lighten; }
</style>
</p>
<div id="papa">
<svg > <filter id="f1"> <feturbulence basefrequency="0.2 0.5" numoctaves="2" seed="10" type="fractalNoise"> </feturbulence> <fedisplacementmap in="SourceGraphic" scale="200" xchannelselector="G" ychannelselector="R"> </fedisplacementmap> </filter> </svg>
<img id="dh"src="https://pic.imgdb.cn/item/64e9ee70661c6c8e544cd94a.jpg"/>
<span id="fullscreen" title="全屏欣赏/退出全屏">全屏</span>
<div id="mplayer" title="暂停/播放"><img height="100%" id="an" src="https://pic.imgdb.cn/item/64fc23e6661c6c8e54eee347.gif" width="100%" /></div>
<div data-cu="00:00" data-du="00:00" id="prog" title="调节进度">
<div data-lrc="想你念你忘不掉" id="lrc" title="歌词显示">想你念你忘不掉</div>
</div>
<div id="dt"><img height="100%" id="Img" src="https://pic.imgdb.cn/item/6562dc6bc458853aefee7156.gif" width="100%" /></div>
<audio autoplay="" id="aud" loop="" src="https://www.qqmc.com/mp3/music320349635.mp3"> </audio>
</div>
<script>
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 = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => {
prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');
prog.dataset.cu = toMin(aud.currentTime);
prog.dataset.du = toMin(aud.duration);
});
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出',papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
fs = !fs;
};
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `落单的鸳鸯-赵洋
词：关连宇
曲：赵洋
编曲：GK 康康
混音：冯鑫阳
和声：雪无影
制作人：亚伦
OP：亚伦影音工作室
那天迎亲的队伍走过了十里八乡
你明媒正娶唢呐吹得满街响
她凤冠霞帔做了你美丽新娘
我们两小无猜从此天各一方
你掀起她的红盖头春风在荡漾
我恐怕泪水哭花她脸上的妆
眼前晃动着你们恩爱的模样
你们喝的交杯酒痛断我肝肠
我怎么就成了落单的鸳鸯
你们比翼双飞 负我泪千行
为什么有缘无分难成双
我心啊心迷茫 谁能够体谅
我怎么就成了落单的鸳鸯
带着满身伤独自去流浪
为什么你把心贴在她心上
我泪啊泪汪汪 已无处话凄凉
你掀起她的红盖头春风在荡漾
我恐怕泪水哭花她脸上的妆
眼前晃动着你们恩爱的模样
你们喝的交杯酒痛断我肝肠
我怎么就成了落单的鸳鸯
你们比翼双飞 负我泪千行
为什么有缘无分难成双
我心啊心迷茫 谁能够体谅
我怎么就成了落单的鸳鸯
带着满身伤独自去流浪
为什么你把心贴在她心上
我泪啊泪汪汪 已无处话凄凉
我泪啊泪汪汪 已无处话凄凉`;
/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;
/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
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;
};
/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
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 showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrcAr;
lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
/*函数 ：处理当前歌词索引 mKey*/
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 = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</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 = '';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 image= document.getElementById("Img");
var image1= document.getElementById("an");
mplayer.onclick =function() { aud.paused ? ( image.play(),image1.play(),aud.play()):(image.stop(),image1.stop(),aud.pause())};
dh.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>dh.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>dh.style.animationPlayState = 'paused');
</script>
这个是滤镜效果？？？ 这么漂亮的美女被遮着了;P {:5_150:}{:5_150:}{:5_150:}
页:
[1]