|
|
发表于 2024-3-8 10:35:08
|
显示全部楼层
IP:
本帖最后由 老谟深虑 于 2024-3-13 18:20 编辑
<div style="width: 100%;height: 1050px;position: absolute;MARGIN-LEFT:-80px;MARGIN-top:0px;">
<style>#papa { margin: 10px 20px; width: 1164px; height: 620px; background: gray url('https://ice.frostsky.com/2024/03/05/2072eab886e52fe2d00be11601031286.gif') center/cover no-repeat; box-shadow:0 0px 0px 0px #80ff00; position: relative; z-index: 1; --state: running; overflow:hidden;}
#photo {
width: 100%;
height: 100%;
position: absolute;
border: 0px solid #000000;
top: 0px;
left: 0px;
filter: contrast(150%)brightness(100%);
opacity: 0;
animation: round 48s linear infinite ;
}
@keyframes round {
0% { opacity: 0; transform:translate(0%,0%)scale(0);}
5% { opacity: 1; transform:translate(0%,0%)scale(0);}
14% { opacity: 1; transform:translate(0%,0%)scale(1);}
16% { opacity: 1; transform:translate(0%,0%)scale(1);}
24% { opacity: 0; transform:translate(100%,0%)scale(1);}
}
#photo :nth-child(8) { animation-delay: 42s; }
#photo :nth-child(7) { animation-delay: 36s; }
#photo :nth-child(6) { animation-delay: 30s; }
#photo :nth-child(5) { animation-delay: 24s; }
#photo :nth-child(4) { animation-delay: 18s; }
#photo :nth-child(3) { animation-delay: 12s; }
#photo :nth-child(2) { animation-delay: 6s; }
#photo :nth-child(1) { animation-delay: 0s; }
#lrc { --motion: cover2; --tt: 1s; position: absolute; left:45%;top:85%; transform: translate(-50%);font:normal 2.8em 华文隶书; color:#0000;filter: drop-shadow( 2px 2px 0px #000000); z-index: 2; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; 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); }
@keyframes cover1{ 0% { width: 100%;transform: rotateY(-180deg)rotatex(0deg);filter: hue-rotate(180deg)brightness(850%)drop-shadow(0 0 10px #fff000)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%)drop-shadow(0 0 8px #000080) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%)drop-shadow(0 0 16px #ffffff);width: 100%;}
}
@keyframes cover2 { 0% { width: 100%;transform: rotateY(-180deg)rotatex(0deg);filter: hue-rotate(180deg)brightness(850%)drop-shadow(0 0 10px #fff000)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%)drop-shadow(0 0 8px #000080) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%)drop-shadow(0 0 16px #ffffff);width: 100%;}
}
#mplayer { width: 120px;
height: 120px;
position: absolute;z-index: 50;
left: 30px;
top: 480px;
background:url()no-repeat center/cover;
cursor: pointer;
animation: rot 5s linear infinite ;
}
@keyframes rot { to { transform: rotate(360deg); } }
#fullscreen { position: absolute; top:5%; left:85%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.0em 华文隶书; opacity: 1; cursor: pointer; z-index: 1660}
</style>
<div style="width:1164px;height:640px;position:absolute;margin:150px -200px;z-index:99999;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 8px #880000; overflow: hidden;transform: rotate(0deg);background:url()no-repeat center/cover">
<div id="papa">
<span id="fullscreen">全屏观赏</span>
<img id="photo" src="https://pic.imgdb.cn/item/64f0af8c661c6c8e541cacd3.jpg" />
<img id="photo" src="https://pic.imgdb.cn/item/64f0afbd661c6c8e541cb94b.jpg" />
<img id="photo"src="https://pic.imgdb.cn/item/64f0afda661c6c8e541cbe2e.jpg" />
<img id="photo"src="https://pic.imgdb.cn/item/64f0b012661c6c8e541cc6db.jpg" />
<img id="photo" src="https://pic.imgdb.cn/item/64f0b04f661c6c8e541cd374.jpg" />
<img id="photo" src="https://pic.imgdb.cn/item/64f0b06d661c6c8e541cd83d.jpg" />
<img id="photo" src="https://pic.imgdb.cn/item/64f0b0e7661c6c8e541cee68.jpg" />
<img id="photo" src="https://pic.imgdb.cn/item/64f0b0f6661c6c8e541cf12d.jpg" />
<div id="lrc" data-lrc="老谟深虑欢迎您">老谟深虑欢迎您</div>
<div id="mplayer"></div>
<audio id="aud" src="https://link.hhtjim.com/qq/004Hb1L52oQHZ7.mp3" autoplay loop></audio>
</div>
<div style="width:100%;height:960px;position:relative;"></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[j] = parseFloat((ar[j+1][0] - ar[j][0]).toFixed(1));}let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item,key) => {ar[key][2] = item > aver ? aver : item;});return ar;};
let averAdd = 0, offset = 0;
let getLrcAr = (text) => {let lrcAr = [];let calcRule = [60,1,0.001];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[z] * calcRule[z];ar[0] = [parseFloat(sec.toFixed(2)) + offset, geci];lrcAr.push(ar[0]); }}}}lrcAr.sort((a,b)=> a[0] - b[0]);return(lrcTime(lrcAr));}
let geci = `[00:00.00]《女人一辈子活的要漂亮》
[00:08.00]LRC：老谟深虑
[00:17.34]都说女人像月亮温柔又善良
[00:21.15]谁知女人也辛苦不停的奔忙
[00:25.05]洗衣做饭带孩子孝敬爹和娘
[00:28.89]忘了梳洗和打扮为自己化妆
[00:32.88]女人为啥做月亮做就做太阳
[00:36.69]光芒万丈做自己把世界照亮
[00:40.59]女人自信要自强遇事不慌张
[00:44.43]该逞强时就逞强为爱活一场
[00:50.22]女人一辈子活的要漂亮
[00:54.09]要做咱就做自己的女王
[00:57.96]该大胆的干该闯就去闯
[01:01.83]做最美的自己发最亮的光
[01:05.70]女人一辈子活的要漂亮
[01:09.60]该玩咱就玩该浪咱就浪
[01:13.44]胸怀像大海做人要坦荡
[01:17.34]活就活个女人样越活越漂亮
[01:22.01]
[01:36.75]女人为啥做月亮做就做太阳
[01:40.56]光芒万丈做自己把世界照亮
[01:44.46]女人自信要自强遇事不慌张
[01:48.30]该逞强时就逞强为爱活一场
[01:54.09]女人一辈子活的要漂亮
[01:57.96]要做咱就做自己的女王
[02:01.83]该大胆的干该闯就去闯
[02:05.70]做最美的自己发最亮的光
[02:09.57]女人一辈子活的要漂亮
[02:13.47]该玩咱就玩该浪咱就浪
[02:1**]胸怀像大海做人要坦荡
[02:21.21]活就活个女人样越活越漂亮
[02:25.08]女人一辈子活的要漂亮
[02:28.92]要做咱就做自己的女王
[02:32.82]该大胆的干该闯就去闯
[02:36.69]做最美的自己发最亮的光
[02:40.56]女人一辈子活的要漂亮
[02:44.43]该玩咱就玩该浪咱就浪
[02:48.27]胸怀像大海做人要坦荡
[02:52.17]活就活个女人样越活越漂亮
[02:56.43]祝论坛姐妹们节日快乐！
[03:11.99]
`;
let lrcAr = getLrcAr(geci);
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr[mKey][1];lrc.dataset.lrc = lrcAr[mKey][1].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[j][0]) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);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[j][0]) {if (mKey === j) showLrc(lrcAr[j][2]);else continue;}}});
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
mplayer.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mplayer.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
fs = !fs;
};
</script>
</div>
<div style="width: 100%;height: 980px;"> </div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
|
|
发表于 2024-3-8 08:27:50
发表于 2024-3-8 08:46:41
)no-repeat center/cover;
)no-repeat center/cover">