想去风吹的地方-花僮

亚伦影音工作室 发表于 2023-4-21 06:22

本帖最后由亚伦影音工作室于 2023-4-21 06:24 编辑 <br /><br /><style>
#papa { margin: 20px -300px; width: 1164px; height: 620px; background: gray url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9fca3d32997953b9d0dfe55db8026ec8.jpg') center/cover no-repeat; box-shadow:0 0px 0px 3px #800000; position: relative; z-index: 1; --state: running; overflow:hidden;}
#lrc { --motion: cover2; --tt: 0s; position: absolute; left: 50%;top:82%; transform: translate(-50%, 10px);font:normal 2.4em 华文隶书; color:#0000;filter: drop-shadow( 2px 2px 0px #000000); z-index: 2; }
#lrc:before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%;overflow: hidden; white-space: pre;color:#ff0000; filter: drop-shadow( 2px 2px 0px #ffffff); filter: hue-rotate(0deg)brightness(650%);animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#mplayer { position: absolute; width: 320px; height: 320px;left: 70%; z-index: 20;top:15%;overflow:hidden;}

#an{position: absolute;
   top:0%; left:0%;
   width: 100%;
   height:100%;
}

@keyframes cover1 {0%{opacity: 1;transform: scale(0.5);filter: hue-rotate(0deg)brightness(100%)}
80%{opacity: 1;transform: scale(1.1);filter: hue-rotate(160deg)brightness(650%)}
100%{opacity: 1;transform:scale(1.1);filter: hue-rotate(360deg)brightness(850%)}}

@keyframes cover2 {100%{opacity: 1;transform: scale(0.5);filter: hue-rotate(0deg)brightness(100%)}
80%{opacity: 1;transform: scale(1.1);filter: hue-rotate(160deg)brightness(650%)}
0%{opacity: 1;transform:scale(1.1);filter: hue-rotate(360deg)brightness(850%)}}
</style>
<div id="papa">
<div id="mydiv"></div>
<div id="lrc" data-lrc="花潮在线">花潮在线</div>
<div id="mplayer">
<img id="an"src="https://pic.imgdb.cn/item/641c7117a682492fcc45c008.gif" width="100%" height="100%"></div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music263595469.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 = `想去风吹的地方-花僮
词：马一柯
曲：黄建华
编曲：韩俊平
和声：夏初安
录音师：花僮
混音：CuTTleFiSh
母带：CuTTleFiSh
制作人：亚伦
出品人：亚伦
OP：亚伦影音
夜深了手机闪了几下
信息却还是没送达
聊天框里一个人的对话
那爱的人消失在哪
谁的身上没有几道疤
遗憾不经过人嘴巴
你还好吗你还好吗
我们也曾牵过手啊还记得吗
我想去有风的地方听一听你说说话
说说你现在那个她
爱过你那么多日夜有那么多的牵挂
你过得好也算报答
我想去风吹的地方听一听你说说话
我哭过爱过最后也放下
想见见你爱着的她一定要幸福呀
好好的成一个家
别忘了啊
谁的身上没有几道疤
遗憾不经过人嘴巴
你还好吗你还好吗
我们也曾牵过手啊还记得吗
我想去有风的地方听一听你说说话
说说你现在那个她
爱过你那么多日夜有那么多的牵挂
你过得好也算报答
我想去风吹的地方听一听你说说话
我哭过爱过最后也放下
想见见你爱着的她一定要幸福呀
好好的成一个家
别忘了啊
我想去有风的地方听一听你说说话
说说你现在那个她
爱过你那么多日夜有那么多的牵挂
你过得好也算报答
我想去风吹的地方听一听你说说话
我哭过爱过最后也放下
想见见你爱着的她一定要幸福呀
好好的成一个家
别忘了啊
`;
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: 40%;
   bottom: -10px;
   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-4-21 09:14

欣赏老师佳作！{:4_187:}

红影发表于 2023-4-21 14:45

又是AI美女呢，真漂亮。歌词同步很有特色，放大缩小的呢。欣赏亚伦老师好帖{:4_199:}

绿叶清舟 发表于 2023-4-21 19:45

高清图片啊，漂亮

页: [1]

花潮论坛's Archiver

想去风吹的地方-花僮