亚伦影音工作室 发表于 2023-8-5 21:54

人间这一遭（DJ 默涵版）-半吨兄弟

<style>
#papa { margin: 20px -300px; width: 1164px;height:620px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;border: 1px solid;background: #333 url('https://pic.imgdb.cn/item/64ce4f131ddac507ccfe2ee3.jpg') no-repeat center/cover;
position: relative;z-index: 12345;}
#papa::before { position: absolute; content: ''; border-radius: inherit; width: 100%; height: 100%; transition: all 2s linear; }
#papa::before { background: tan url('https://pic.imgdb.cn/item/64ce4f0e1ddac507ccfe1eae.jpg') 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:82%; transform: translate(-50%, 10px);font:normal 3.2em 华文隶书; 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 7em/0em serif;color:#00ff00;left: 0%;top:95%;cursor: pointer;z-index:880;animation: spin 10s infinite linear;}
@keyframes spin {0% { transform: rotate(360deg); }}
#dt{position: absolute;width: 80%; height: 80%;top:10%; left:10%;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://img.365.tf/file/2023/07/05/y087m8.gif" width="100%" height="100%">
<div id="mplayer">✺</div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music274403307.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 默涵版）-半吨兄弟
作词：木杰
作曲：木杰
混音：DJ 默涵
人生这一杯酒啊
只要一喝就上头
百般滋味皆入口
烂醉红尘才方休
人生这一杯酒啊
醉在其中怎看透
我且干了你随意
人间一遭已足够
时光匆匆地走啊走
可曾为谁而停留
多少光阴似水东流
却带不走哀与愁
岁月无声地偷啊偷
偷偷染白了少年头
跌跌撞撞半生已过
多少遗憾心中留
人生这一杯酒啊
只要一喝就上头
百般滋味皆入口
烂醉红尘才方休
人生这一杯酒啊
醉在其中怎看透
我且干了你随意
人间一遭已足够
岁月无声地偷啊偷
偷偷染白了少年头
跌跌撞撞半生已过
多少遗憾心中留
人生这一杯酒啊
只要一喝就上头
百般滋味皆入口
烂醉红尘才方休
人生这一杯酒啊
醉在其中怎看透
我且干了你随意
人间一遭已足够
人生这一杯酒啊
只要一喝就上头
百般滋味皆入口
烂醉红尘才方休
人生这一杯酒啊
醉在其中怎看透
我且干了你随意
人间一遭已足够
`;
        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 = '';
      }
    };
}
let fs = true;
        fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
        };
</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('https://pic.imgdb.cn/item/643c03fe0d2dde5777107ce2.png')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-5 22:04

沙发我的

小辣椒 发表于 2023-8-5 22:06

亚伦这个美女有点迷人的看看老人会不会喜欢@东篱闲人

小辣椒 发表于 2023-8-5 22:08

亚伦我感觉粒子图片可以少一点，这个可能和每个人的习惯不一样

亚伦影音工作室 发表于 2023-8-5 22:13

本帖最后由 亚伦影音工作室 于 2023-8-5 22:14 编辑

小辣椒 发表于 2023-8-5 22:08
亚伦我感觉粒子图片可以少一点，这个可能和每个人的习惯不一样
很性感老头肯定喜欢&#128525;&#128525;&#128525;&#128525;换换图片就可以了！

红影 发表于 2023-8-5 23:20

很漂亮的制作。歌词也很有特色。欣赏亚伦老师好帖{:4_199:}

醉美水芙蓉 发表于 2023-8-6 06:27

东篱闲人 发表于 2023-8-6 09:25

小辣椒 发表于 2023-8-5 22:06
亚伦这个美女有点迷人的看看老人会不会喜欢@东篱闲人

老啦，不挑食。。。。{:5_117:}

小辣椒 发表于 2023-8-6 20:25

东篱闲人 发表于 2023-8-6 09:25
老啦，不挑食。。。。

老头就是谦虚，假老头，那天某人说老头最多40几岁 装老的{:4_170:}

东篱闲人 发表于 2023-8-6 21:54

小辣椒 发表于 2023-8-6 20:25
老头就是谦虚，假老头，那天某人说老头最多40几岁 装老的

谁说的，俺找他去。。。{:5_117:}
页: [1]
查看完整版本: 人间这一遭（DJ 默涵版）-半吨兄弟