玻璃舞者《想你的话告诉月亮（DJ 默涵版）-刘晓超》
本帖最后由 亚伦影音工作室 于 2024-4-16 10:46 编辑 <br /><br /><style>#papa {margin: 150px -300px;
width: 1164px;
height: 640px;
background:url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/a56f7f6065983b88da4f88456513ad62.png?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080')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: 55%; height: 55%; top:2%; left:23%;object-fit: cover; pointer-events: none;opacity: 1;z-index: 1; transition: 0.1s all ease;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 4px #880000;}
#dt{position: absolute;top:60%; left:30%;width: 40%;height: 40%;z-index:-1;}
#dt1{position: absolute;top:60%; left:73%;width: 5%;height: 40%;z-index:-1;}
#dt2{position: absolute;top:60%; left:22%;width: 5%;height: 40%;z-index:-1;transform: rotateY(180deg);}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#mplayer {z-index: 80;
position: absolute;
top:87.5%; left:52.3%;
bottom: 5px;
width: 18px;
height: 18px;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 15px sans-serif;
color: #ffffff;
top:61%;
left:45%;}
#prog {position: absolute;z-index: 91;
width: 11%;
height: 1.2%;
cursor: pointer;
top:96%;
box-shadow: 0px 0px 1px 1px #ffffff;
left:44.5%;
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:50%;line-height:25px;position: absolute;position: absolute;left:25%;top:42%;z-index: 11;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);}
#musickrc span {display:block;text-align:center; }
</style>
<div id="papa">
<div id="dt"><img id="Img" src="https://files.superbed.cn/images/65960c24871b83018a18c921.gif" width="100%" height="100%"></div>
<div id="dt1"><img id="Img1" src="https://pic.imgdb.cn/item/65960c33871b83018a18e31b.gif" width="100%" height="100%"></div>
<div id="dt2"><img id="Img2" src="https://pic.imgdb.cn/item/65960c33871b83018a18e31b.gif" width="100%" height="100%"></div>
<video id="vid"src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/021e3bff21cef34d3476f1cbf0f70d4d_preview.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">想你的话告诉月亮 DJ 默涵版</div></di></di>
</div>
<audio id="aud" src="https://bzgz.club/view.php/43e9254bcc998db7b36e019df939d447.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: -300px 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 = '';image1.style.opacity = '';image2.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");
var image1= document.getElementById("Img1");
var image2= document.getElementById("Img2");
mplayer.onclick =function() { aud.paused ? (image.stop(),vid.pause(),image1.stop(),image2.stop()):(image.play(),vid.play(),image1.play(),image2.play())};
</script>
说明：动图有三，视频一个，歌曲一首，静图一个，暂停键可全控。 又是一个漂亮的音响效果，有播放按钮，还有进度条，还能一键全控。这个制作真棒{:4_199:} 欣赏亚伦老师精彩好帖{:4_199:} 欣赏亚伦老师佳作！赞！！！{:4_187:} 亚伦老师新作品不断，欣赏点赞学习！{:4_178:}{:4_190:} 不断创新！高质量享听！{:4_178:} 欣赏老师精彩佳作{:4_204:} 亚伦这个制作很强大，非常喜欢{:4_199:} 亚伦影音工作室 发表于 2024-1-5 10:39
说明：动图有三，视频一个，歌曲一首，静图一个，暂停键可全控。
亚伦，很奇怪我套用了一个自己瞎捣鼓了一下，电脑预览是好的，花潮也是可以的，可以停止动图，发微风论坛不能停止了，不知道是什么原因
页:
[1]