醉美水芙蓉 发表于 2023-8-28 22:09

人生几十秋(DJ 默涵版)


<style>
#papa { margin: 20px-300px; width: 1164px; height: 620px; background: gray url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/8758264095a0dc043b565e1730a3e1e9.mp4.jpg') center/cover no-repeat; box-shadow:0 0px 0px 2px #80ff00; position: relative; z-index: 1; --state: running; overflow:hidden;}
#img_border{width:100%;height:100%;position: absolute;animation: rotating 10s linear infinite;z-index: 2;background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/1f1111f34218a7a00856d5876aa26061.mp4.jpg') no-repeat center/cover;}
@keyframes rotating{
0% {opacity: 1;transform: scale(1);}
50% {opacity: 1;transform: scale(1);filter:hue-rotate(360deg)contrast(120%)brightness(120%);}
51% {opacity: 1;transform: scale(1);}
100% {opacity: 0;transform:scale(4)rotateY(0deg);}
}

#lrc { --motion: cover2; --tt: 1s; position: absolute; left: 50%;top:82%; transform: translate(-50%, 10px);font:normal 3em 华文新魏; color:#0000;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; width: 353px; height: 78px;left: 35%; z-index: 120;top:70%; mix-blend-mode:exclusion; transform:perspective(750px) rotateY(180deg)rotateX(-180deg)scale(1.3); }
#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:83%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文新魏; opacity: 1; cursor: pointer; z-index: 1660}
</style>

<div id="papa">
<span id="fullscreen">全屏观赏</span>
<div id="mydiv"></div>
<divid="img_border" ></div>
<div id="lrc" data-lrc="人生几十秋(DJ 默涵版)-田娥">人生几十秋(DJ 默涵版)-田娥</div>
<div id="mplayer">
<img id="an"src="https://pic.imgdb.cn/item/64ec9cae661c6c8e54e51dc4.gif" width="100%" height="100%"></div>
</div>
<audio id="aud" src="https://i.mp3.wf/view.php/067033b5a8757f4bccac4d30cdd79f52.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 = 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 = `人生几十秋(DJ 默涵版)-田娥
词：徐晓岚
曲：李勇军
LRC编辑：醉美水芙蓉
匆匆走过了人生几十秋
留下太多回忆一无所有
曾经的岁月早已经远走
心中划满了一道道伤口
慢慢习惯了一个人承受
受了委屈也不轻易泪流
匆匆走过了人生的路口
那些是非对错谁能没有
跌跌撞撞走到这个年头
早已被经历把冷暖看透
收起了年少冲动的理由
退出了身边虚伪的朋友
跌跌撞撞走到这个年头
明白了什么更值得拥有
有个好身体有人伴左右
健康快乐是我最大奢求
健康快乐是我最大奢求
慢慢习惯了一个人承受
受了委屈也不轻易泪流
匆匆走过了人生的路口
那些是非对错谁能没有
跌跌撞撞走到这个年头
早已被经历把冷暖看透
收起了年少冲动的理由
退出了身边虚伪的朋友
跌跌撞撞走到这个年头
明白了什么更值得拥有
有个好身体有人伴左右
健康快乐是我最大奢求
健康快乐是我最大奢求
谢谢欣赏！`;
        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());
})();
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>
<style>
#mydiv {
      margin: 0px auto;
      width: 100%;
      height: 100%;
       z-index: 3;
      overflow: hidden;
      cursor: pointer;
      position: absolute;
      --state: paused;
}
.dot {
      position: absolute;
      left: 40%;
      bottom: -10px;z-index: 3;
      width:200PX;opacity:0;
      height:210PX;
      border-radius: 0%;
      background: url('https://pic.imgdb.cn/item/643c03fe0d2dde5777107ce2.png')0 0/100% 100%;
}
@keyframes ani { to { transform: rotate(var(--deg)) translateY(-620px); filter:hue-rotate(360deg);opacity:1;}}
</style>
<script>
Array.from({length: 100}).forEach( (item,key) => {
      let sp = document.createElement('span');
      let ww = Math.random() * 5 + 2;
      sp.className = 'dot';
      sp.style.cssText += `
                --deg: ${-100 + Math.random() * 200}deg;


                animation: ani 10s ${Math.random() * key - 2}s infinite alternate var(--state);
      `;
      mydiv.appendChild(sp);
});
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
</script>

焱鑫磊 发表于 2023-8-28 22:42

{:4_187:}{:4_187:}{:4_187:}

醉美水芙蓉 发表于 2023-8-29 06:34

@亚伦 老师请指导如何恢复播放器原本颜色？

红影 发表于 2023-8-29 09:20

真漂亮的制作，很有特色的播放器效果。欣赏水芙蓉好帖{:4_187:}

红影 发表于 2023-8-29 09:23

这个评分后需要刷新才能继续正常显示呢{:4_204:}

醉美水芙蓉 发表于 2023-8-29 12:08

红影 发表于 2023-8-29 09:23
这个评分后需要刷新才能继续正常显示呢

代码有点问题，正在问亚伦老师呢？

醉美水芙蓉 发表于 2023-8-29 12:09

焱鑫磊 发表于 2023-8-28 22:42


谢谢朋友支持！

红影 发表于 2023-8-29 14:07

醉美水芙蓉 发表于 2023-8-29 12:08
代码有点问题，正在问亚伦老师呢？

哦哦，不过漂亮还是很漂亮的呢{:4_199:}
页: [1]
查看完整版本: 人生几十秋(DJ 默涵版)