曾经的誓言成了笑话(DJ 版)-李英
<style>#papa {margin: 10px -150px;
width: 1164px;
height: 640px;
background:url(https://pic.imgdb.cn/item/65378517c458853aef7deb87.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: 100%; height: 100%; top:0%; object-fit: cover; pointer-events: none;opacity: 1;z-index: -1; transition: 0.1s all ease;}
#gj {top:35%; left:-35%;z-index: 20;
position: absolute;overflow: hidden;transform:scale(0.3);
width: 100%;
height: 100%;}
#xzcp {top:25%; left:5%;z-index: 20;
position: absolute;
width: 350px;
height: 350px;
border-radius: 50%;
background:url('https://pic.imgdb.cn/item/642d9c53a682492fcccad99f.png') center/cover no-repeat,url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b0bea37f1dff1ba2977e3d3cdf8cf8ea.jpg')30px 50px/100% 60%;
animation: spin 10s infinite linear ;}
@keyframes spin {100% { transform: rotate(360deg);opacity: 1; }
}
#mplayer {position: absolute;
top:2%; left:0%;z-index: 20;
width: 500px;
height: 500px;
cursor: pointer;
}
.pink { background: url('https://pic.imgdb.cn/item/642e1dcea682492fcc4d5bb1.png')no-repeat center/cover;transform:rotate(-2deg);transform-origin: 100% 0%;}
.purple { background: url('https://pic.imgdb.cn/item/642e1dcea682492fcc4d5bb1.png')no-repeat center/cover; transform-origin: 75% 0%;margin: 25px -32px;transform:rotate(-20deg);}
#tmsg {position: absolute;z-index: 91;
font: normal 15px sans-serif;
color: #000000;
top:93.5%;
left:82%;}
#prog {position: absolute;z-index: 91;
width: 67%;
height: 2px;
cursor: pointer;
top:95%;
left:14%;
border-radius: 2px;}
#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:95%; left:calc(95% - 15px);font: normal 1.5em/0em 楷体;color:#000000; opacity: 1; cursor: pointer; z-index: 111}
#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%);}}
#bt{ --w: 70%; width: var(--w); overflow: hidden; color: #000000; position: absolute; left:62%;top:90%;font-size: 16px; z-index: 91;}
#bt { word-break: keep-all; white-space: nowrap; animation: bt 26s linear infinite; background:#0000}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
.stop #bt{animation-play-state: paused;}
#musickrc{width:80%;line-height:35px;position: absolute;position: absolute;color:#000080;left:10%;top:80%;z-index: 11;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);}
#musickrc span {display:block;text-align:center; }
#dt{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index:3;mix-blend-mode:lighten;}
</style>
<div id="papa">
<span id="fullscreen">全屏</span>
<div id="Img0" ><span id="bt">曾经的誓言成了笑话(DJ 版)-李英</span></div>
<div id="dt"><img id="Img" src="https://pic.imgdb.cn/item/64a52c121ddac507cc5fd3ac.gif" width="100%" height="100%"></div>
<div id="testImg" >
<pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p>
</div>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="gj" >
<div id="xzcp" ></div>
<div id="mplayer" class="pink"></div>
</div>
<divid="musickrc" >
<divid="klok" ><p id="musickrc01"style="color:#ffffff; text-align:center;font-family:华文隶书;font-size: 40px;" ></P></div>
<P id="musickrc02"style="color:#ffffff;text-align:right;font-weight: ;font-family:华文隶书;font-size: 0px;"></P>
</div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music306732522.mp3" loop autoplay></audio>
<script >
var songkrc =`曾经的誓言成了笑话(DJ 版)-李英
词：三力
曲：三力
编曲：李胜华
混音：冯鑫阳
监制：谢飞
厂牌：三力音乐
Op：星汉马文化
望着窗外纷飞飘落的雪花
勾起我心中深藏的牵挂
曾经一往情深放不下的他
如今你在他乡一切还好吗
好想对你诉说心中的牵挂
熟悉的电话却换了号码
想起你曾对我说过的情话
泪水悄然无声滑落在脸颊
无情的雪花无情地飘洒
洒落一地冰冷的泪花
曾经的誓言已成了笑话
散落天涯留下难愈的伤疤
无情的寒风无情地刮
刮不走我多余的牵挂
好想再问你还爱着我吗
却再也收不到想要的回答
好想对你诉说心中的牵挂
熟悉的电话却换了号码
想起你曾对我说过的情话
泪水悄然无声滑落在脸颊
无情的雪花无情地飘洒
洒落一地冰冷的泪花
曾经的誓言已成了笑话
散落天涯留下难愈的伤疤
无情的寒风无情地刮
刮不走我多余的牵挂
好想再问你还爱着我吗
却再也收不到想要的回答
`;
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 = lyric; }else{ document.getElementById("musickrc02").innerHTML = lyric;};};};}; my_audio.play();
/*暂停 播放按钮*/
mplayer.addEventListener('click', () => aud.paused ? (aud.play(),mplayer.classList.remove('purple')) : (aud.pause(),mplayer.classList.add('purple')));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
/*结束*/
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
fs = !fs;
};
/*进度条 进度时间*/
prog.onclick = (e) => {
aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
}
aud.addEventListener('timeupdate', () => {
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg,#eeeeee,#eeeeee,#eeeeee ' + aud.currentTime / aud.duration * 100 + '%, #000000 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;
};
/*结束*/
/*控制视频*/
vid=document.querySelector('#vid');
mplayer.onclick =function() { aud.paused ? vid.pause(): vid.play() };
/*结束*/
/*控制歌词颜色*/
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');
/*结束*/
xzcp.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>xzcp.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>xzcp.style.animationPlayState = 'paused');
</script>
<style>
#klok{
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color:#ffffff;
background-image:linear-gradient(0deg, #ff0000 50%, #fff000 40%, #00ff00 60%);
background-repeat:no-repeat;
-webkit-animation:loop 4slinearinfinite ;}
@-webkit-keyframes loop{
50%{background-position: -800px 0;filter:hue-rotate(0deg)contrast(120%)brightness(350%);}
}
</style>
<style>
.photo {width: 100%;
height: 100%;
position: absolute;
z-index: 1;
top:0px; left:0px;filter:contrast(120%)brightness(80%);
opacity: 0;
animation: round 90s linear infinite;}
@keyframes round{0% {opacity: 1;-webkit-transform:translate(30%,0%)perspective(5px)scale(1) rotateY(-40deg);}
6% {opacity: 1;-webkit-transform:translate(0%,0%)scale(1) ;}
7% {opacity: 1;-webkit-transform:translate(0%,0%)scale(1) ;}
13% {opacity: 1;-webkit-transform:translate(-30%,0%)scale(1)perspective(5px) rotateY(45deg);}
14% {opacity: 0;-webkit-transform:translate(-30%,0%)scale(1)perspective(5px) rotateY(45deg);}
}
.photo:nth-child(1) {animation-delay: 84s;background: url('https://img-qn.51miz.com/preview/element/00/01/33/20/P-1332073-5C9607BD.png')no-repeat center/cover}
.photo:nth-child(2) {animation-delay: 78s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/23/P-1312352-E506D784.png)no-repeat center/cover}
.photo:nth-child(3) {animation-delay: 72s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/17/P-1311727-040363C5.png)no-repeat center/cover}
.photo:nth-child(4) {animation-delay: 66s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/17/P-1311728-7F39962B.png)no-repeat center/cover}
.photo:nth-child(5) {animation-delay: 60s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/23/P-1312352-E506D784.png)no-repeat center/cover}
.photo:nth-child(6) {animation-delay: 54s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/23/P-1312353-7B4AD9E1.png)no-repeat center/cover}
.photo:nth-child(7) {animation-delay: 48s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/23/P-1312355-659BD8DC.png)no-repeat center/cover}
.photo:nth-child(8) {animation-delay: 42s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/31/P-1313154-3807C065.png)no-repeat center/cover}
.photo:nth-child(9) {animation-delay: 36s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/14/P-1311459-35C9504D.png)no-repeat center/cover}
.photo:nth-child(10){animation-delay: 30s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/31/P-1313163-D3AC7269.png)no-repeat center/cover}
.photo:nth-child(11){animation-delay: 24s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/31/P-1313165-A3FD1305.png)no-repeat center/cover}
.photo:nth-child(12){animation-delay: 18s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/23/P-1312358-897681D1.png)no-repeat center/cover}
.photo:nth-child(13){animation-delay: 12s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/31/P-1313157-AA2D045C.png)no-repeat center/cover}
.photo:nth-child(14) {animation-delay: 6s;background: url('https://img-qn.51miz.com/preview/element/00/01/31/31/P-1313158-3C9ABEF0.png')no-repeat center/cover}
.photo:nth-child(15) {animation-delay: 0s;background: url('https://img-qn.51miz.com/preview/element/00/01/31/26/P-1312615-B88B9882.png')no-repeat center/cover}
.stop .photo:nth-child(1),
.stop .photo:nth-child(2),
.stop .photo:nth-child(3),
.stop .photo:nth-child(4),
.stop .photo:nth-child(5),
.stop .photo:nth-child(6),
.stop .photo:nth-child(7),
.stop .photo:nth-child(8),
.stop .photo:nth-child(9),
.stop .photo:nth-child(10),
.stop .photo:nth-child(11),
.stop .photo:nth-child(12),
.stop .photo:nth-child(13),
.stop .photo:nth-child(14),
.stop .photo:nth-child(15){animation-play-state: paused;}
</style>
<script>
/*控制动画*//*控制动字*/
(function(){
var image = document.getElementById("testImg");
var image0 = document.getElementById("Img0");
let mState = () => aud.paused ? (image.classList.add('stop'),image0.classList.add('stop')):(image.classList.remove('stop'),image0.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;
}
}
};
}
/*控制动图*/
var image= document.getElementById("Img");
mplayer.onclick =function() { aud.paused ? (image.stop()):(image.play())};
/*结束*/
</script>
欣赏亚伦老师精美音画！ 这个作品漂亮！！！！ 这个作品漂亮！！！！ 这个作品漂亮！！！！
页:
[1]