小辣椒请参考
本帖最后由 亚伦影音工作室 于 2024-1-7 18:03 编辑 <br /><br /><style>#papa {margin: 150px -300px;
width: 1440px;
height: 720px;
background:url('https://xlaj.cn/assets/file/zp/20240106015310.jpg')no-repeat center / cover;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
position: relative;overflow: hidden;
z-index: 12345;
}
#vid { position: absolute; width: 37%; height: 39%; top:12.5%; left:9%;object-fit: cover; pointer-events: none;opacity: 1;z-index: 1; }
#dt{position: absolute;top:0%; left:0%;width: 100%;height:100%;z-index:-1;}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#mplayer {z-index: 80;
position: absolute;
top:81.5%; left:8%;
bottom: 25px;
width: 20px;
height: 20px;background:#cccccc;
border: 2px solid #000000;
border-radius: 50%;
opacity: 1;
transition: .7s;
display: grid;
place-items: center;
--disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
border-style: solid;
border-color: #000000;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 5px;
border-width: 5px 8px;
border-color: transparent transparent transparent #000000;
opacity: var(--disp1);
}
#mplayer::after {
width: 1px;
height: 10px;
border-width: 0 2px 0 2px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
font: normal 10px sans-serif;
color: #ffffff;
top:61%;
left:24%;}
#prog {position: absolute;z-index: 91;
width: 19%;
height: 1.0%;
cursor: pointer;
top:82.7%;
box-shadow: 0px 0px 1px 1px #ffffff;
left:18%;
border-radius: 3px;}
#wzsd1 { animation: wzsd 0.56s linear infinite ;}
@keyframes wzsd {
from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
#musickrc{width:30%;line-height:25px;position: absolute;position: absolute;left:12%;top:40%;z-index: 11;filter:drop-shadow(#ffffff 0.8px 0 0)drop-shadow(#ffffff 0 0.8px 0)drop-shadow(#ffffff -0.8px 0 0) drop-shadow(#ffffff 0 -0.8px0);}
#musickrc span {display:block;text-align:center; }
</style>
<div id="papa">
<div id="dt"><img id="Img" src="https://xlaj.cn/assets/file/zp/20240106210247.gif" width="100%" height="100%"></div>
<video id="vid"src="https://lk999.oss-cn-guangzhou.aliyuncs.com/fengh.mp4" muted autoplay loop></video>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="mplayer"></div>
<divid="musickrc" >
<p id="musickrc01"style="color:#880000; text-align:left;font-weight: ;font-family:隶书;font-size: 25px;" ></P>
<P id="musickrc02"style="color:#000080;text-align:right;font-weight: ;font-family:隶书;font-size: 25px;"></P>
</div>
<div id="testImg"><div id="bt"><div id="klok"> </div></di></di>
</div>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2022/06/mhnnn.mp3" loop autoplay></audio>
<script >
var songkrc =`想你的话告诉月亮（DJ 默涵版）-刘晓超
作词：花开花落/冯光
作曲：冯光
演唱：刘晓超
编曲：福洲
混音：宋马超
制作人：亚伦
亚伦影音工作室
天边的云朵总那么匆忙
久久凝望你身处的方向
苦苦压抑这思念的疯狂
情不自禁让我热泪盈眶
牵挂的心呀飞向了远方
顺便托风儿轻轻对你讲
不知远方的你是否无恙
今夜梦中会不会不一样
想你的话呀 悄悄的 悄悄的 告诉月亮
相思的话呀相思的话现在无人可讲
真的难忘记那些旧时光
牵挂的心呀在风中彷徨
想你的话呀 悄悄的 悄悄的 告诉月亮
心上的人啊心上的人多想陪在你身旁
无边的思念全都写脸上
写在我的心上 我心上
牵挂的心呀飞向了远方
顺便托风儿轻轻对你讲
不知远方的你是否无恙
今夜梦中会不会不一样
想你的话呀 悄悄的 悄悄的 告诉月亮
相思的话呀相思的话现在无人可讲
真的难忘记那些旧时光
牵挂的心呀在风中彷徨
想你的话呀 悄悄的 悄悄的 告诉月亮
心上的人啊心上的人多想陪在你身旁
无边的思念全都写脸上
写在我的心上 我心上
写在我的心上 我心上
`;
function parseLyric(text) { var lines = text.split(/\r|\n|\r\n/),pattern = /\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g,result = []; while (!pattern.test(lines)) {lines = lines.slice(1); }; lines.length === 0 && lines.pop(); lines.forEach(function(v,i,a) { var time = v.match(pattern), value = v.replace(pattern,''); time.forEach(function(v1,i1,a1){ var t = v1.slice(1, -1).split(/:/); result.push(,10) * 60 + parseFloat(t), value]); }); }); result.sort(function(a, b){ return a - b;}); return result;}
var my_audio =document.getElementById("aud");var lyric = parseLyric(songkrc); my_audio.ontimeupdate = function () { for (var i = 0; i < lyric.length; i++) { if(this.currentTime > lyric){ document.getElementById("musickrc01").innerHTML = lyric; if(i+1==lyric.length){ document.getElementById("musickrc01").innerHTML = ""; }else{ document.getElementById("musickrc02").innerHTML = lyric;};};};}; my_audio.play();
/*暂停 播放按钮*/
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
/*结束*/
/*进度条 进度时间*/
prog.onclick = (e) => {
aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
}
aud.addEventListener('timeupdate', () => {
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, #00ff00, #00ff00, #00ff00 ' + aud.currentTime / aud.duration * 100 + '%, #111111 0)';});
tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
});
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;
};
/*结束*/
/*控制歌词颜色*/
klok.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => klok.style.animationPlayState = 'running');
aud.addEventListener('pause', () => klok.style.animationPlayState = 'paused');
/*结束*/
/*控制文字颜色*/
dt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => dt.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>dt.style.animationPlayState = 'paused');
/*结束*/
</script>
<style>
#bt{ width: 15%; height: 50px;color: #00ff00; position: absolute; left:23%;top:5%;font-size: 22px; font-family:隶书;z-index: 21; animation: wz 20s linear infinite ; }
.stop #bt{animation-play-state: paused;}
@keyframes wz {
50% {opacity: 1;filter:hue-rotate(0deg)contrast(100%)brightness(100%); left: 50%;}
}
#klok{width: 560px; height: 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color:#880000;
background-image:linear-gradient(50deg, #ff0000 40%, #00ff80 50%, #fff000 10%, #000078 60%);
background-repeat:no-repeat;
line-height:35px;background-position: 0px 0;
-webkit-animation:loop 1slinearinfinite ;}
@-webkit-keyframes loop{
50%{background-position: -400px 0;filter:hue-rotate(0deg)contrast(120%)brightness(150%);}
}
</style>
<script>
/*控制动画*/
(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop')): (image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
/*结束*/
</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;
}
}
};
}
vid=document.querySelector('#vid');
var image= document.getElementById("Img");
mplayer.onclick =function() { aud.paused ? (image.stop(),vid.pause()):(image.play(),vid.play())};
</script>
这个可以一键停止{:5_150:} {:5_150:}{:5_150:}{:5_150:}
页:
[1]