论坛 › 动画音画 › 火火的爱火火的情

亚伦影音工作室 发表于 2023-5-2 17:37

火火的爱火火的情

本帖最后由 亚伦影音工作室 于 2023-5-6 12:08 编辑 <br /><br /><style>
#papa {
      margin: 20px-300px;
       place-items: center;
      width: 1164px;
      height: 620px;
      background: #000000; border-radius: 12px;display: grid;
      box-shadow: 0 0px 4px 0px hsla(0,0%,0%,.65);
      user-select: none;
      position: relative;
      z-index: 1;   
       overflow:hidden;
}

#tup{width: 100%;display: grid;
         mix-blend-mode:hard-light;
      height: 100%;
left: 0%; top:0%;
position:absolute;transform: rotateY(0deg);
      z-index: 2;
      opacity: 1;
}
#ptpt{width: 400px;display: grid;
      mix-blend-mode:lighten;   
      height: 200px;
left: 58%; top:23%;
position:absolute;-webkit-mask-image: radial-gradient(black 25% ,transparent 65%);
      z-index: 2;
      opacity: 1;
}

#ptpn{width: 120px;display: grid;
         height: 100px;
left: 30%; top:46%;
position:absolute;
      z-index: 3;
      opacity: 1;
}

#ptpm{width: 100%;display: grid;
         height: 30%; mix-blend-mode: difference;
left: 0%; top:30%;
position:absolute;
      z-index: 3;
      opacity: 1;
}

#mplayer {position: absolute;grid-template-columns: auto auto auto;gap: 8px;display: grid;place-items: center;color: var(--color);font: normal 12px sans-serif;z-index: 999;--ww: 500px;--color: #ffffff;--btn_size: 30px;--track: #ffffff;--prog: #FF0000;}

#btnplay {--state: paused;margin-right: -5px;font: bold var(--btn_size) / var(--btn_size) serif;cursor: pointer;animation: rot 4s infinite linear;animation-play-state: var(--state);}
@keyframes rot { to { transform: rotate(1turn); } }
#prog {--xx: 0px;width: var(--ww);height: 2px;border-radius: 8px;background: var(--track
);position: relative;cursor: pointer;}
#prog::before {position: absolute;content: '';width: var(--xx);height: 100%;border-radius: 8px;background: var(--prog);}

@keyframes cover1{ 0%{opacity: 1;transform: scale(0.4);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 {0%{opacity: 1;transform: scale(0.4);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%)}}

#lrc { --motion: cover2; --tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(240, 50%, 50%, .25), hsla(240, 30%, 50%, .75));position: absolute;left: 40%; top:10%;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);font:normal 3em 华文行楷;color:#0000; z-index: 100; transform: translate(-30%, 10px);-webkit-background-clip: text;white-space: pre;}
#lrc::before { position: absolute; content: attr(data-lrc); color: transparent; width: 100%; height: 100%;white-space: pre; background:#880000;-webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
</style>

<div id="papa">
<div id="tup"><img src="https://pic2.imgdb.cn/item/645088790d2dde577794490d.jpg" width="100%" height="100%"></div>
<div id="ptpt"><img id="pp"src="https://pic2.imgdb.cn/item/645070a70d2dde57777c6af2.gif" width="100%" height="100%"></div>
<div id="ptpn"><img id="pp0"src="https://pic2.imgdb.cn/item/64309c8c0d2dde577781ae06.gif" width="100%" height="100%"></div>
<div id="ptpm"><img id="pp1"src="https://pic2.imgdb.cn/item/644f29d90d2dde5777d4c632.gif" width="100%" height="100%"></div>


<div id="lrc" data-lrc="HCPlayer">HCPlayer</div><div id="mplayer"><span id="btnplay"></span><span id="prog"></span><span id="tmsg">00:00 | 00:00</span></div></div>
<audio id="aud" src="http://fs.ringop.kugou.com/KGTX/CLTX001/2322147a1222f0fd075474ad0854cdaa.mp3" loop autoplay></audio>

<script >
(function() {
      (function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 20px; left: 50%; transform: translateX(-50%);',btn_txt: '✳',playerCode: ``,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;btnplay.innerHTML = data.btn_txt;let mKey = 0, mFlag = true;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;aud.addEventListener('timeupdate', () => {let prg = aud.currentTime * prog.offsetWidth / aud.duration < 6 ? 6 : aud.currentTime * prog.offsetWidth / aud.duration;tmsg.innerText = `${toMin(aud.currentTime)} | ${toMin(aud.duration)}`;prog.style.setProperty('--xx', prg + 'px');for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),btnplay.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state','running'),btnplay.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.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;}};mkPlayer.HCPlayer = playCode;})(this);
      (function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow; background: black; border: 2px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
      let averAdd = 0, offset = 0;
      let geci = `http://bbs.cnzv.cc/ 歌词外链
龙奔、张怡诺 - 火火的爱火火的情
作词：龙奔
作曲：龙奔
编曲：晓枫音乐
和声：俞子欣
混音：卢晓武
出品：亚伦
制作：亚伦影音工作室
男：爱在心中悄悄绽放
让人着了迷又很疯狂
只为那一个伟大梦想
你是我今生的信仰
女：是你给我指引方向
让我在宠爱中成长
暖暖的肩膀暖暖胸膛
你是我永恒的太阳
合：火火的爱火火的情
男：火火的缠绵如梦境
天上的星亮晶晶
照耀我们一路前行
合：火火的爱火火的情
女：火火的幸福如生命
分分秒秒如影随形
你就是我今生的宿命
男：爱在心中悄悄绽放
让人着了迷又很疯狂
只为那一个伟大梦想
你是我今生的信仰
女：是你给我指引方向
让我在宠爱中成长
暖暖的肩膀暖暖胸膛
你是我永恒的太阳
合：火火的爱火火的情
男：火火的缠绵如梦境
天上的星亮晶晶
照耀我们一路前行
合：火火的爱火火的情
女：火火的幸福如生命
分分秒秒如影随形
你就是我今生的宿命
合：火火的爱火火的情
男：火火的缠绵如梦境
天上的星亮晶晶
照耀我们一路前行
合：火火的爱火火的情
女：火火的幸福如生命
分分秒秒如影随形
你就是我今生的宿命
合：分分秒秒如影随形
你就是我今生的宿命
`;
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 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));}

      HCPlayer({
                lrcAr: getLrcAr(geci),
                lrc_css: ' --bg: linear-gradient(hsla(90,80%,50%,.35),hsla(100,70%,45%,.6)); top:14%; ',
                player_css: '--ww: 120px;bottom: 30px;top:280px;left: 55%;',
                btn_txt: '✳',
      });

      FS({
                pa: papa,
               
set: 'backgroun: #333; color: snow; border: 2px solid snow; bottom: 90%; left: 20px;',
      });
aud.onerror = () => {
                if(aud.error.code === 4) aud.src='http://fs.ringop.kugou.com/KGTX/CLTX001/2322147a1222f0fd075474ad0854cdaa.mp3';
      }
})();
</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 = ''; image0.style.opacity = '';image1.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("pp"),
image0 = document.getElementById("pp0"),
image1 = document.getElementById("pp1"),
button = document.getElementById("mplayer");

    if (image1 &&image0 &&image && button) {
    button.onclick = function() {
      if (this.value == '') {
         image.play();    image0.play(); image1.play();
            this.value = '.';
      } else {
            image.stop();   image0.stop();image1.stop();
            this.value = '';
      }
    };
}

</script>
<audio id="audio" src="https://aod.cos.tx.xmcdn.com/storages/617d-audiofreehighqps/4F/F5/GKwRIMAH-M2IAAAdjwIID-mv.m4a"></audio>
    <script>
      document.addEventListener("click", function() {
      document.getElementById("audio").play();
      });
    </script>

梦缘 发表于 2023-5-2 17:38

好漂亮的帖，欣赏点赞！{:4_204:}

亦是金 发表于 2023-5-2 18:54

精美帖子，欣赏学习了！{:4_178:}

罗浮梦 发表于 2023-5-2 19:19

真棒！{:4_199:}

红影 发表于 2023-5-2 20:45

帖子里的动态元素特别漂亮，歌词同步也很漂亮。欣赏亚伦老师好帖{:4_187:}

醉美水芙蓉 发表于 2023-5-2 21:33

焱鑫磊 发表于 2023-5-2 21:50

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

樵歌 发表于 2023-5-3 08:47

欣赏隹作{:4_174:}

查看完整版本: 火火的爱火火的情