论坛 › 欢乐水吧 › 城市的翅膀

醉美水芙蓉 发表于 2023-8-21 20:19

城市的翅膀

本帖最后由 醉美水芙蓉 于 2023-8-21 20:19 编辑 <br /><br /><style>
#papa {
      margin: 100px-280px;
       place-items: center;
      width: 1164px;
      height: 640px;
      background:#000000 ; border-radius: 0%;display: grid;
      box-shadow: 0 0px 4px 0px hsla(0,0%,0%,.65);
      user-select: none;
      position: relative;
      z-index: 1;   
       overflow:hidden;
}

#ptpt{width: 100%;
      height: 100%;display: grid;
left: 0%; top:0%;
background:#00f000 url(https://www.yiyuen.com/e/file/view/624111)no-repeat center/cover;
position:absolute;
      z-index: 4;
      opacity: 1;
animation: ptpt 3s infinite linear;
}
@keyframes ptpt{0%{filter:hue-rotate(360deg);}100%{filter:hue-rotate(0deg)}}

#ptpu{width: 400px;display: grid;
         height: 260px;mix-blend-mode:normal;
left: 0%; top:60%;border-radius: 0%;
position:absolute;opacity: 1;
      z-index: 4;transform:translate(0%,0%)scale(0.6);
      overflow:hidden;
}
#ptpn{width: 400px;display: grid;
         height: 260px;
left: 70%; top:20%;
position:absolute;transform: rotateY(180deg);
      z-index: 5;
      opacity: 0.8;
}


#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: 25px;--track: #ffffff;--prog: #000000;}

#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{ from { width: 0; } to { width: 100%;color: #ff0000;} }
@keyframes cover2 { from { width: 0;color: #00ff00; } to { width: 100%; } }

#lrc { --motion: cover2; --tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(240, 50%, 50%, .25), hsla(240, 30%, 50%, .75));position: absolute;left: 0%; top:0%;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);font:normal 2.4em 华文新魏;color:#000078; z-index:20; transform: translate(-30%, 10px)perspective(150px)rotateY(20deg)rotate(20deg);-webkit-background-clip: text;white-space: pre;-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 10%,#FFFFFF)}
#lrc::before { position: absolute; content: attr(data-lrc); color: transparent; width: 30%; 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="ptpt"></div>


<div id="ptpn"><img id="pp0"src="https://pic2.imgdb.cn/item/645611730d2dde5777c30c2f.gif" width="100%" height="100%"></div>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="ptpu">
<img id="pp1"src="https://pic2.imgdb.cn/item/64518dc30d2dde57779cde74.gif" width="100%" height="100%">
<div id="mplayer"><span id="btnplay"></span><span id="prog"></span><span id="tmsg">00:00 | 00:00</span></div>
</div>

</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music277349946.mp3" loop autoplay></audio>

<script >
(function() {
      (function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 0px; left: 0%; transform: translateX(-50%);',player_css: 'bottom: 0px; ; 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: 0px 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 = `00:00.00]作词: 梁芒/阳蕾
作曲: 郭亮
编曲: 郭亮
片尾标题题字：郭明祥
总策划: 刘思齐
LRC编辑：醉美水芙蓉
太阳鸟飞过的地方
鸟语花香城市中徜徉
遇见自己未来的模样
坚定信念我们启航
带着你的梦到这里来
未来更美因为都有爱
跨千山万水相聚吧
今天这里就是全世界
欢迎来成都
成就你梦想
信仰需要拼搏才怒放
欢迎来成都
你就是最强
分享胜利和渴望
追逐的心向往翱翔
我们是这城市的翅膀
闪耀着光芒的赛场
海阔天空任你绽放
带着你的梦到这里来
未来更美因为都有爱
跨千山万水相聚吧
今天这里就是全世界
欢迎来成都
成就你梦想
信仰需要拼搏才怒放
欢迎来成都
你就是最强
分享胜利和渴望
欢迎来成都
(BVG: Welcome to ChengDu)
漫天舞星光
(BVG: Makes Dreams Come 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 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:65%; left: 50%',
                player_css: '--ww: 120px;top:57%;left: 23%;',
                btn_txt: '✳',
      });

      FS({
                pa: papa,
               
set: 'backgroun: #333; color: snow; border: 0px solid snow; bottom: 90%; left: 20px;font:normal 2em 华文行楷;',
      });
aud.onerror = () => {
                if(aud.error.code === 4) aud.src='http://bbs.cnzv.cc/v/a.php/Y2MyZWI2MzgyNWRkZjJlMGZjMDhmYjJhZWQyY2UxYmIma2dtcDM=.mp3';
      }
})();

ptpt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>ptpt.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>ptpt.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;
            // 透明度还原
             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
image0 = document.getElementById("pp0"),
image1= document.getElementById("pp1"),
button = document.getElementById("mplayer");
button.onclick = function() {
      if (this.value == '') {
             image0.play(); image1.play();
            this.value = '.';
      } else {
             image0.stop(); image1.stop();
            this.value = '';
      }
    };


</script>

红影 发表于 2023-8-21 21:31

这个小磁带做得好逼真啊，水芙蓉美女太厉害了{:4_199:}

红影 发表于 2023-8-21 21:32

歌词同步也好别致。欣赏水芙蓉美女好帖{:4_199:}

醉美水芙蓉 发表于 2023-8-21 21:59

红影 发表于 2023-8-21 21:31
这个小磁带做得好逼真啊，水芙蓉美女太厉害了

我只是做了个图片，是亚伦老师设计的代码！

红影 发表于 2023-8-21 22:14

醉美水芙蓉 发表于 2023-8-21 21:59
我只是做了个图片，是亚伦老师设计的代码！

饿呢，这个制作非常完美{:4_187:}

东篱闲人 发表于 2023-8-25 12:51

很炫酷！{:4_204:}

查看完整版本: 城市的翅膀