明月 发表于 2023-4-17 11:25

泪在滴心在痛

<style>
#papa { margin: 20px -300px; width: 1164px; height: 620px; background: gray url('https://pan.111t.net/view.php/37e88de092277b2d18820cd2d3547f30.jpg') center/cover no-repeat; box-shadow: 0px 0px 0px 8px #800000 ,0px 0px 0px 2px #cccccc inset, 0px 0px 10px 0px #000080 inset;position: relative; z-index: 1; --state: running; overflow:hidden;}
#lrc { --motion: cover2; --tt: 1s; position: absolute; left: 50%;top:82%; transform: translate(-50%, 10px);font:normal 3em 华文隶书; 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; width: 120px; height: 180px;left: 10%; z-index: 20;top:65%;overflow:hidden;}

#an{position: absolute;
      top:0%; left:0%;
      width: 100%;
      height:100%; transform: rotateY(180deg);
   }
@keyframes cover1{0% { width: 0%;letter-spacing: 0px; filter: blur(0px); } to { width: 500%;} }
@keyframes cover2 {0% { width: 0%;letter-spacing: 10px; color:#000090;}100% { width: 500%; letter-spacing: 0px;color:#ff0000; ; }}
</style>

<div id="papa">
<div id="mydiv"></div>

<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>



<div id="mplayer">

</div></div>
<audio id="aud" src="https://pan.111t.net/view.php/f028c479f58dd93be3350d85c37cac76.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 = `〖泪在滴心在痛〗王爱华
编曲：姜凯升
混音：王爱华
作词：三力
作曲：三力
LRC歌词编辑：明月视听工作室
那一句承诺还停留心里
如今却没有谁再提起
或许早已经被你忘记
或许我不再是你的唯一
慢慢发现你已有了距离
不再像从前全心全意
你已狠心断绝关系
残忍的将我丢在风雨里
我的心在痛泪在滴
一幕幕往事成了伤心记忆
你的承诺原来早已经过期
只是我以为你是真的忘记
我的心在痛泪在滴
从此再不能和你相伴朝夕
曾经的甜蜜沉浸回忆里
默默祈祷有天你回心转意
〖泪在滴心在痛〗王爱华
编曲：姜凯升
混音：王爱华
作词：三力
作曲：三力
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());
})();
</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: 1164px;
      height: 620px;

      overflow: hidden;
      cursor: pointer;
      position: relative;
      --state: paused;
}
.dot {
      position: absolute;
      left: 50%;
      bottom: -10px;
      width: 100px;opacity:.8;
      height: 200px;
      border-radius: 0%;
      background: url('')0 0/100% 100%;
}
@keyframes ani { to { transform: rotate(var(--deg)) translateY(-620px); }}
</style>
<script>
Array.from({length: 60}).forEach( (item,key) => {
      let sp = document.createElement('span');
      let ww = Math.random() * 5 + 2;
      sp.className = 'dot';
      sp.style.cssText += `
                --deg: ${-50 + Math.random() * 100}deg;


                animation: ani 20s ${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-4-17 12:52

这个代码好像有问题，让论坛网格都变形了呢。

焱鑫磊 发表于 2023-4-17 15:36

本帖最后由 焱鑫磊 于 2023-4-17 15:38 编辑 <br /><br />
http://XXX.jpg
图片在这里不显示，需上传https://网站。
页: [1]
查看完整版本: 泪在滴心在痛