|
|
楼主 |
发表于 2023-11-27 16:32
|
显示全部楼层
- <style>
- #papa { margin: 100px -20px; width: 1200px; height: 750px; background: gray url('https://pic.imgdb.cn/item/64f29845661c6c8e54a06877.jpg') center/cover no-repeat; box-shadow:0 0px 0px 0px #80ff00; position: relative; z-index: 1; --state: running; overflow:hidden;}
- #vid { position: absolute; width: 100%; height: 100%; top: -30px; object-fit: cover; opacity: 1;auto;filter:contrast(120%);transform: scale(1.1, 1.1) }
- #photo img {
- width: 100%;
- height: 100%;
- position: absolute;
- border: 0px solid #000000;
- top: 0px;
- left: 0px;
- filter: contrast(150%)brightness(100%);
- -webkit-mask-image:radial-gra**nt(black 30%,transparent 70%);
- opacity: 0;
- animation-name: round;
- animation-duration: 48s;
- animation-iteration-count: infinite;
- animation-timing-function: linear;
- }
- @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 img:nth-child(8) { animation-delay: 42s; }
- #photo img:nth-child(7) { animation-delay: 36s; }
- #photo img:nth-child(6) { animation-delay: 30s; }
- #photo img:nth-child(5) { animation-delay: 24s; }
- #photo img:nth-child(4) { animation-delay: 18s; }
- #photo img:nth-child(3) { animation-delay: 12s; }
- #photo img:nth-child(2) { animation-delay: 6s; }
- #photo img:nth-child(1) { animation-delay: 0s; }
- #lrc { --motion: cover2; --tt: 1s; position: absolute; left: 45%;top:85%; transform: translate(-50%, 10px);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); }
- #mplayer { position: absolute; width: 300px; height: 300px;left: -5%; z-index: 120;top:60%; mix-blend-mode:exclusion; transform:perspective(0px) rotateY(0deg)rotateX(0deg)scale(1.0); }
- #an{position: absolute; top:0%; left:0%; width: 100%; height:100%; z-index: 120; }
- @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%;}
- }
- #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 id="papa">
- <span id="fullscreen">全屏观赏</span>
- <video id="vid" src="https://i.mp3.wf/view.php/cdf48d76d9e11e2728aee888cd307c58.mp4" muted="muted" autoplay="autoplay" loop="loop"></video>
- <div id="photo">
- <img class="photo" src="https://z1.ax1x.com/2023/11/25/pi0Pomd.jpg" /> <img class="photo" src="https://z1.ax1x.com/2023/11/25/pi0PfSO.jpg" /> <img class="photo" src="https://z1.ax1x.com/2023/11/25/pi0PhlD.jpg" /> <img class="photo" src="https://z1.ax1x.com/2023/11/25/pi0P46e.jpg" /> <img class="photo" src="https://z1.ax1x.com/2023/11/25/pi0P5OH.jpg" /> <img class="photo" src="https://z1.ax1x.com/2023/11/25/pi0PT0A.jpg" /> <img class="photo" src="https://z1.ax1x.com/2023/11/25/pi0P7TI.jpg" /> <img class="photo" src="https://z1.ax1x.com/2023/11/25/pi0Pbkt.jpg" />
- </div>
- <div id="mydiv"></div>
- <div id="img_border" ></div>
- <div id="lrc" data-lrc="焱鑫磊"></div>
- <div id="mplayer">
- <p> </p>
- <p> </p>
- <p> </p>
- <p> </p>
- <p> </p>
- <p> </p>
- <p> <img alt="" src="https://pic.imgdb.cn/item/647b1e12f024cca1730e8c3f.png" style="width: 100px; height: 100px;" /></p>
- <p> </p>
- </div>
- <audio id="aud" src="https://www.kumeiwp.com/sub/filestores/2023/11/24/5e51839ab8a9536b823cb62cb524e2ad.mp3" autoplay loop></audio>
- <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:03.46]作词：（现代）毛泽东
- [00:05.94]作曲：孙玄龄
- [00:08.87]LRC：老谟深虑
- [00:10.88]风雨送春归
- [00:30.27]飞雪迎春到
- [00:49.86]已是悬崖百丈冰
- [00:53.33]犹有花枝俏
- [00:55.88]犹有花枝俏
- [01:23.87]俏也不争春
- [01:28.30]只把春来报
- [01:33.75]待到山花烂漫时
- [01:39.11]她在丛中笑
- [01:43.58]待到山花烂漫时
- [01:47.71]她在丛中笑
- [02:01.99]风雨送春归
- [02:09.67]飞雪迎春到
- [02:17.81]已是悬崖百丈冰
- [02:21.08]犹有花枝俏
- [02:23.96]犹有花枝俏
- [02:32.89]俏也不争春
- [02:36.74]只把春来报
- [02:41.04]待到山花烂漫时
- [02:48.95]她在丛中笑
- [02:54.57]俏也不争春
- [02:57.66]只把春来报
- [03:00.04]待到山花烂漫时
- [03:03.04]她在丛中笑
- [03:05.66]待到山花烂漫时
- [03:12.80]她在丛中
- [03:22.80]笑
- `;
- 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());
- })();
- img_border.style.animationPlayState = aud.paused ? 'paused' : 'running';
- aud.addEventListener('playing', () =>img_border.style.animationPlayState = 'running');
- aud.addEventListener('pause', () =>img_border.style.animationPlayState = 'paused');
- let fs = true;
- fullscreen.onclick = () => {
- fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
- fs = !fs;
- };
- </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("an"),
- button = document.getElementById("mplayer");
- if (image && button) {
- button.onclick = function() {
- if (this.value == '') {
- image.play();
- this.value = '.';
- } else {
- image.stop();
- this.value = '';
- }
- };
- }
- </script>
|
|
发表于 2023-11-27 14:39
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-11-27 15:03
发表于 2023-11-27 15:26
