小辣椒 发表于 2023-8-6 21:10

匆匆那年 歌手：王菲

<style>
#papa { margin: 150px 0 0 calc(50% - 780px);   transform: translateX(0%); width: 1390px; height: 743px; background: tan url('https://wj.zp68.com/lxx/yunhua/2023/08/06/77.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; top:0px; display: grid; place-items: center; overflow: hidden; user-select: none; z-index: 1;}


#papa::before { position: absolute; content: ''; border-radius: inherit; width: 0%; height: 0%; transition: all 2s linear; }
#papa::before { background: tan url('') no-repeat center/cover;transform: rotateY(0deg); }
#papa:hover::before { transform: translate(0%,0%) rotateY(0deg)scale(3);opacity: 0; }



#lrc { --motion: cover2; --tt: 1s; position: absolute; left: 50%;top:62%; transform: translate(-50%, 10px);font:normal 2.8em 华文隶书; 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; font: normal 2.6em/0em serif;color:#acaeaf;left:61%;top:89%;cursor: pointer;z-index:880;animation: spin 10s infinite linear;}
@keyframes spin {0% { transform: rotate(360deg); }}
#dt{position: absolute;width: 100%; height: 100%;top:0%; left:0%;mix-blend-mode: lighten;z-index: 2;}
@keyframes cover1{0% { width: 100%;transform: rotateY(-100deg)rotatex(100deg);filter: hue-rotate(180deg)brightness(850%)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%);width: 100%;}
}
@keyframes cover2 { 0% { width: 100%;transform: rotateY(-100deg)rotatex(100deg);filter: hue-rotate(180deg)brightness(850%)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%);width: 100%;}
}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:80%;color:#FFffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 3em华文隶书; opacity: 1; cursor: pointer; z-index: 111}
</style>
<div id="papa">
<span id="fullscreen"></span>
<div id="mydiv"></div>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="dt"><img id="testImg"src="https://wj.zp68.com/lxx/yunhua/2023/08/06/77.gif" width=1390px; height=height: 743px;>
<div id="mplayer">✺</div>
</div>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2023/08/06/clip.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 = `匆匆那年
歌手：王菲 (Faye Wong)
词：林夕
曲：梁翘柏   
匆匆那年
我们究竟说了几遍再见
之后再拖延
可惜谁有没有爱过
不是一场七情上面的雄辩
匆匆那年
我们一时匆忙撂下
难以承受的诺言
只有等别人兑现
不怪那吻痕
还没积累成茧
拥抱着冬眠
也没能羽化再成仙
不怪这一段情
没空反复再排练
是岁月宽容
恩赐反悔的时间
如果再见不能红着眼
是否还能红着脸
就像那年匆促
刻下永远一起
那样美丽的谣言
如果过去还值得眷恋
别太快冰释前嫌
谁甘心就这样
彼此无挂也无牵
我们要互相亏欠
要不然凭何怀念
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());
})();

mplayer.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mplayer.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');
</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("testImg"),
    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: 10px auto;
      width: 100%;
      height: 100%;
       overflow: hidden;
      cursor: pointer;
      position: relative;
      --state: paused;}
.dot {z-index: 2;
      position: absolute;
      left: 40%;
      top:60%;
   width:250px;opacity:0;
      height:260px;
       background: url(' ')no-repeat center/cover;
}
@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-6 21:11

点击转盘中心，一键停止动图和音乐

bgmnet 发表于 2023-8-6 22:11

{:5_135:}{:5_117:}

liumang 发表于 2023-8-6 22:16

这个动图有点大吧:victory:


liumang 发表于 2023-8-6 22:18

{:5_132:}

小辣椒。接电话

小辣椒 发表于 2023-8-10 21:28

liumang 发表于 2023-8-6 22:18
小辣椒。接电话

来了。接到电话就来了;P

小辣椒 发表于 2023-8-10 21:28

bgmnet 发表于 2023-8-6 22:11


{:5_130:}


小辣椒 发表于 2023-8-10 21:29

liumang 发表于 2023-8-6 22:16
这个动图有点大吧

还可以，我打开还是蛮快的

liumang 发表于 2023-8-10 22:57

小辣椒 发表于 2023-8-10 21:29
还可以，我打开还是蛮快的

现在我这里打开也是快的

liumang 发表于 2023-8-10 22:58

小辣椒 发表于 2023-8-10 21:28


{:5_127:}


页: [1]
查看完整版本: 匆匆那年 歌手：王菲