焱鑫磊 发表于 2023-8-28 21:27

《今生有你好幸福》钰柃 月下思故人

<style>
#papa { margin: 100px -280px; width: 1164px; height: 620px; background: gray url('https://pic.imgdb.cn/item/64ec972b661c6c8e54e3cff8.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://pic.imgdb.cn/item/64ec9826661c6c8e54e3f96b.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: 420px; height: 150px;left: 65%; z-index: 120;top:60%;mix-blend-mode:exclusion;   transform:perspective(750px) rotateY(60deg)rotateX(50deg)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="今生有你好幸福">今生有你好幸福</div>
<div id="mplayer">
<img id="an"src="https://pic.imgdb.cn/item/645136810d2dde5777595e6d.gif" width="100%" height="100%"></div>
</div>
<audio id="aud" src="https://i.mp3.wf/view.php/dbe197738bcc3320d91df44bfc8dc66b.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歌词制作：焱鑫磊
感谢缘份的眷顾
让你我今生相遇
牵手走在红尘路
欣赏人间美景无数
一起走过了风雨
有你陪伴不孤独
谢谢你温柔的照顾
竭尽所能为我付出
今生有你好幸福
用爱把彼此呵护
你是小草我是大树
甜蜜爱恋滋润心深处
今生有你好幸福
相伴这日落日出
白头偕老相互馋扶
把爱写成传奇佳书
感谢缘份的眷顾
让你我今生相遇
牵手走在红尘路
欣赏人间美景无数
一起走过了风雨
有你陪伴不孤独
谢谢你温柔的照顾
竭尽所能为我付出
今生有你好幸福
用爱把彼此呵护
你是小草我是大树
甜蜜爱恋滋润心深处
今生有你好幸福
相伴这日落日出
白头偕老相互馋扶
把爱写成传奇佳书
感谢缘份的眷顾
让你我今生相遇
牵手走在红尘路
欣赏人间美景无数
一起走过了风雨
有你陪伴不孤独
谢谢你温柔的照顾
竭尽所能为我付出
今生有你好幸福
用爱把彼此呵护
你是小草我是大树
甜蜜爱恋滋润心深处
今生有你好幸福
相伴这日落日出
白头偕老相互馋扶
把爱写成传奇佳书
白头偕老相互搀扶
把爱写成传奇佳书
`;
        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 21:50

背景加了变色效果，一键停止，制作漂亮{:4_199:}

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

问好焱鑫磊，谢谢分享{:4_171:}

红影 发表于 2023-8-28 21:56

好漂亮的制作。欣赏焱鑫磊好帖{:4_187:}

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

小辣椒 发表于 2023-8-28 21:50
背景加了变色效果，一键停止，制作漂亮

问好小辣椒！{:4_187:}{:4_187:}{:4_187:}

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

红影 发表于 2023-8-28 21:56
好漂亮的制作。欣赏焱鑫磊好帖

红影晚上好！送花{:4_187:}{:4_187:}{:4_187:}

小辣椒 发表于 2023-8-28 22:09

焱鑫磊 发表于 2023-8-28 22:04
问好小辣椒！

谢谢焱鑫磊分享，制作辛苦了！{:4_179:}

红影 发表于 2023-8-28 22:36

焱鑫磊 发表于 2023-8-28 22:05
红影晚上好！送花

焱鑫磊晚上好，新周快乐{:4_187:}
页: [1]
查看完整版本: 《今生有你好幸福》钰柃 月下思故人