魏佳艺-等我熬过了所有的苦【控】
本帖最后由 亚伦影音工作室 于 2023-9-11 19:52 编辑 <br /><br /><style>#papa {margin: 20px 0 0 calc(50% - 663px); width: 1164px;height:580px; background: url(https://pic.imgdb.cn/item/64fea316661c6c8e546b86ca.png)repeat center/100% 100%; overflow: hidden; position: relative;z-index: 20;}
#biank{position: absolute;top:7%; left:12%;z-index: 20;background:#000000; width:77%;height:87%;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 4px #000000; overflow: hidden;}
#tu{position: absolute;top:0%; left:0%;z-index: 2;background: url('https://pic.imgdb.cn/item/64fd5599661c6c8e5429c0e2.jpg')no-repeat center/cover;
width: 100%;height:180%;animation: round 24s linear infinite; }
@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1)translate(0%,0%);filter:hue-rotate(360deg);
opacity:1}
50% {
-webkit-transform:rotate(0)scale(1)translate(0%,-40%);filter:hue-rotate(0deg);
opacity:1}
90% {
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);filter:hue-rotate(0deg);
opacity:1}
100% {
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);filter:hue-rotate(0deg);
opacity:0}
}
#dt1{ position: absolute; width: 500px; height: 320px; bottom: 0%; left: 0%;z-index: 2 }
#lrc { --motion: cover2; --tt: 1s; position: absolute; left: 50%;top:76%; transform: translate(-50%, 10px);font:normal 2.5em 华文隶书; color:#0000;filter:hue-rotate(0deg)contrast(120%)brightness(200%);filter: drop-shadow( 2px 2px 0px #000000); z-index: 2; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#ff0000 ; filter: drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#mplayer { position: absolute; left: 0%;top:88%;cursor: pointer;z-index:2; width: 100%; mix-blend-mode: lighten;height:50px;filter:invert(100%)}
@keyframes cover1{0% { width: 100%;transform: rotateY(-100deg)rotatex(100deg);filter: hue-rotate(100deg)brightness(100%)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(100%) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(100%);width: 100%;}
}
@keyframes cover2 { 0% { width: 100%;transform: rotateY(-100deg)rotatex(100deg);filter: hue-rotate(100deg)brightness(100%)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(100%) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(100%);width: 100%;}
}
#biank:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:10%; left:12%;color:#FFffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2em/0em serif;color:#ffffff; opacity: 1; cursor: pointer; z-index: 111}
</style>
<div id="papa">
<div id="biank">
<div id='tu'></div>
<div id='dt1'><img id="testImg" src="https://pic.imgdb.cn/item/643dbb490d2dde5777df1d3c.gif" alt="" /></div>
<span id="fullscreen">全屏欣赏</span>
<div id="main" >
<div id="stars"></div>
</div>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="bnt"><div id="mplayer"><audiostyle="width:100%;" id="aud" autoplay="autoplay" controls="controls" height="100%" loop="loop" src="https://www.qqmc.com/mp3/music299901072.mp3"width="100%"></audio></div></div>
</div>
</div>
<script>
(function() {
let mKey = 0, mFlag = true;
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;};
let averAdd = 0, offset = 0;
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 geci = `魏佳艺-等我熬过了所有的苦
词作：苏晓
曲作：王平萍
编曲：传齐音乐
和声：寂悸
混音：边策
监制：Super
出品人：亚伦
OP/SP：影音工作室
每走一步脚下荆棘密布
太多委屈找不到人倾诉
历尽了生活的油盐酱醋
也许活着就是一种幸福
有人哭着笑有人笑着哭
都为了生活在日夜忙碌
细数这世间的任何万物
只要能活着就已经知足
等我熬过了这所有的苦
想找个地方开始放声大哭
这一段艰难而漫长的旅途
却成为这辈子最难走的路
等我熬过了这所有的苦
想对陌生的人说一声祝福
人这一生有太多说不清楚
有的人离开有人选择孤独
有人哭着笑有人笑着哭
都为了生活在日夜忙碌
细数这世间的任何万物
只要能活着就已经知足
等我熬过了这所有的苦
想找个地方开始放声大哭
这一段艰难而漫长的旅途
却成为这辈子最难走的路
等我熬过了这所有的苦
想对陌生的人说一声祝福
人这一生有太多说不清楚
有的人离开有人选择孤独
等我熬过了这所有的苦
想找个地方开始放声大哭
这一段艰难而漫长的旅途
却成为这辈子最难走的路
等我熬过了这所有的苦
想对陌生的人说一声祝福
人这一生有太多说不清楚
有的人离开有人选择孤独
`;
let lrcAr = getLrcAr(geci);
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
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 = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
bnt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>bnt.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>bnt.style.animationPlayState = 'paused');
</script>
<script>
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', biank.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
stars.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>stars.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>stars.style.animationPlayState = 'paused');
tu.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>tu.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>tu.style.animationPlayState = 'paused');
</script>
<style>
#main {
position: relative;
overflow: hidden;
width: 100%; z-index: 2;
min-height: 98vh;
perspective: 340px;}
#stars {
position: absolute;z-index:2;
top: 50%;
left: 50%;
width: 4px;
height: 4px;
border-radius:50%;
box-shadow: -238px 108px #fff000, 193px -376px #ff0000, -1264px -60px #fff000,145px -443px #fff000, -1440px 37px #fff000, 262px -136px #fff000, 212px 219px #fff000, 319px 223px #fff000, 1246px -51px #c9c9c9,308px 26px #fff000, 147px 229px #fff000, -1041px 450px #fff000, 671px 86px white, -921px 234px #fff000, -957px 242px #fff000, 1249px -285px #fff000, 741px 434px #fff000, -1030px 330px #00f000, 311px -475px #fcfcfc, -413px -105px #ff0000, 868px -435px #f7f7f7, -790px 289px #ff0000, 202px 427px #fcfcfc, -22px -158px #ff0000, -1294px -297px #cccccc, -63px 200px #ff0000, -592px -86px #f7f7f7, -732px 366px white, -1426px -262px #e8e8e8, 475px -400px #ff0000, -1442px -153px #00ff00, 1124px -219px #ededed, 701px 257px #ff0000, 36px -179px #ff0000, -937px 480px #f7f7f7, -267px -418px #00ff00, 1467px 127px #ff0000, -1128px 274px #d1d1d1, -180px 430px #e0e0e0,180px 430px #ffffff, 624px 275px #ff0000, -473px 150px #e6e6e6, -537px -348px #d4d4d4, 410px 455px #ff0000, 497px -29px #cccccc, 416px -370px whitesmoke, 977px 82px #c2c2c2, 1209px -222px #f0f0f0, 637px 360px #fcfcfc,-416px 370px whitesmoke, -1049px 409px white, 959px 407px #ff0000, -1153px -168px #dedede, -437px -216px #dbdbdb, -572px 420px #ff0000, -228px 78px #ff0000, -925px 452px #ccffcc, 244px 30px #ff0000, 453px -336px #fff000, -453px -336px #ff0000, 993px -63px #c2c2c2, 670px -343px #d9d9d9, -1088px 344px #000078, -170px -153px #fff000, 987px -208px #00ff00, 596px 166px #fcfcfc, -1362px -28px #ff0000, 1291px -106px #e3e3e3, -1128px 169px #ededed, 1056px 367px #ebebeb, 261px -128px #ff0000, 1017px 401px #cccccc, 1381px 245px #e3e3e3, 536px -113px #fafafa, -92px -217px #e3e3e3, 1481px 268px #00ff00, 832px -345px #000090, -863px 138px #00ff00, -997px -412px #e3e3e3, -330px -260px #ffff00, 691px -39px #fcfcfc, -468px -135px #ff0000, -535px 405px #e8e8e8, -1289px -284px #e3e3e3, 823px -225px #00ff00, -1172px -348px white, 505px -319px #ff0000, 94px -45px #ededed, -687px -64px #c7c7c7, -1133px -456px #e2f2f2, 1357px 135px #e0e0e0, -919px -249px whitesmoke, 206px 32px white, 1453px -338px #cccccc, -764px 83px #e8e8e8, 726px 85px #00f000, 205px 103px #e3e3e3, 85px 116px #d1d1d1, 1104px -121px #00ff00,-1104px 121px #fffcfc, 649px -304px #dbdbdb, -313px 313px whitesmoke, 491px -419px #c9c9c9, -1405px 397px #cfcfcf, 30px -81px #ff0000;130px -130px #eeeeee,1130px -230px #00ff00,-1000px -1550px 30px 0px #ff0000,500px -350px 100px 0px #00ff00;
animation: fly 3s linear infinite;
transform-style: preserve-3d;
}
#stars:before{
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}
#stars:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}
#stars:before {
transform: translateZ(-300px);
animation: fade1 2s linear infinite;
}
#stars:after {
transform: translateZ(-600px);
animation: fade2 2s linear infinite;
}
@keyframes fly {
from {
transform: translateZ(0px);
}
to {
transform: translateZ(300px);
}
}
@keyframes fade1 {
from {
opacity: 0.9;
}
to {
opacity: 1;
}
}
@keyframes fade2 {
from {
opacity: 0.2;
}
to {
opacity: 0.9;
}
}
</style>
<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("testImg");
varbutton = document.getElementById("bnt");
let mState = () => aud.paused ? image.stop() : image.play();
bnt.onclick = () => {aud.paused ? aud.play() : aud.pause();}
aud.addEventListener('play', mState,false);
aud.addEventListener('pause', mState,false);
</script> 这个边框漂亮，真的像在看手机屏幕呢{:4_199:} 欣赏亚伦老师好帖{:4_187:} 我熬过了所有的苦，应该快甜了吧 欣赏亚伦精彩的制作{:4_199:}
页:
[1]