测试
本帖最后由 亚伦影音工作室 于 2024-4-30 18:21 编辑 <br /><br /><style>#papa {margin: 140px -300px;
width: 1164px;
height: 640px;
background:url(https://s5.krakenfiles.com/uploads/30-04-2024/43Od1C8fbD/image.gif)no-repeat center/cover;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
position: relative;overflow: hidden;
z-index: 12345;
}
</style>
<div id="papa">
<div id="bfqbj">
<div id="dt"><img id="tu" src="https://pic.imgdb.cn/item/662b143c0ea9cb14032d1382.gif" ></div>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="mplayer"></div>
<div id="bt">等我不再去打扰 (Live合唱版) 歌手：王一佳</div>
</div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w8/audio/8e/8d/eb/85b016270aa4a6658176936dba70db59/audio.mp3" loop autoplay></audio>
<style>
#bfqbj {margin: 500px 610px;
width: 520px;
height: 125px;
position: absolute;overflow: hidden;
z-index: 12;}
#dt{position: absolute;top:41px; left:0px;width: 520px;height: 125px;z-index:3; }
#dt img{width: 100%;}
#mplayer {z-index: 80;
position: absolute;
top:0px; left:0px;
bottom: 0px;
width: 30px;
height: 30px;
opacity: 1;
transition: .3s;
display: grid;
place-items: center;
--disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
border-style: solid;
border-color: #eeeeee;
cursor: pointer;
transition: .3s;
}
#mplayer::before {
width: 0;
height: 0;
left: 281px;bottom: -35px;
border-width: 4px 5px;
border-color: transparent transparent transparent #eeeeee;
opacity: var(--disp1);
}
#mplayer::after {
width: 2px;
height: 8px;bottom: -35px;
left: 266px;
border-width: 0 2px 0 2px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
color: #ffffff;font-size: 4px;
bottom: 70px;
left:70px;}
#prog {position: absolute;z-index: 91;
width: 167px;
height: 1px;
cursor: pointer;
bottom: 63px;
left:71px;
border-radius: 2px;}
#bt{ --w: 60%; width: var(--w); overflow: hidden; color: #fff; position: absolute; left:220px;top:80px;font-size: 14px; z-index: 21; word-break: keep-all; white-space: nowrap; animation: bt 16s linear infinite;}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
</style>
<script >
(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(),image.play() ): (aud.pause(),image.stop()));
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 + '%, transparent 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;
};
bt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => bt.style.animationPlayState = 'running');
aud.addEventListener('pause', () => bt.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("tu");
</script>
好像没有编辑好。 加上抽丝效果，让图片变得好美啊{:4_199:} 亚伦老师真快，这么快试验帖子就出来了，还做得这么好{:4_187:} 来欣赏了，帖子制作得不错。
页:
[1]