亚伦影音工作室 发表于 2023-8-30 06:50

心上人你去了哪里

本帖最后由 亚伦影音工作室 于 2023-8-30 06:54 编辑 <br /><br /><style type="text/css">#papa { margin: 20px -300px; width: 1164px; height: 620px; background: gray url('https://pic.imgdb.cn/item/64ec3199661c6c8e54c39ffd.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/64ec3199661c6c8e54c39ffd.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: 250px; height: 55px;left: 5%; z-index: 120;top:60%;animation: rott 3s linear infinite; }
#an{position: absolute;
      top:0%; left:0%;
      width: 100%;
      height:100%; z-index: 120;
   }
@keyframes rott{0% {opacity: 1;filter:hue-rotate(360deg)contrast(100%)brightness(100%);}}
@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">&nbsp;</div>

<div id="img_border">&nbsp;</div>

<div data-lrc="谁把谁错过(对唱版)-彭大耳&amp;田娥" id="lrc">谁把谁错过(对唱版)-彭大耳&amp;田娥</div>

<div id="mplayer"><img height="100%" id="an" src="https://pic.imgdb.cn/item/64ee76b5661c6c8e546b61ba.gif" width="100%" /></div>
</div>


<audio autoplay="" id="aud" loop="" src="https://www.qqmc.com/mp3/music293172989.mp3">&nbsp;</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 = `作词：陈晓容
作曲：陈晓容
演唱：晓晓
编曲：大约冬季
混音：拙啼
监制：陈晓容
出品：陈晓容音乐工作室
发行：尧君文化
自从那年相遇人海里
心底都是你给我的印记
我好想与你永远在一起
你却转身爱不再继续
我想起你就会流泪滴
分手让我痛得无法呼吸
我依然把你当成我唯一
你不该把爱无情丢弃
心上人你已去了哪里
梦里总是呼喊你的名字
你可曾许我不会离去
让我活在想你的世界里
心上人你已去了哪里
花开花谢不见你的归期
你在我脑海挥之不去
你可知道我有多想你
我想起你就会流泪滴
分手让我痛得无法呼吸
我依然把你当成我唯一
你不该把爱无情丢弃
心上人你已去了哪里
梦里总是呼喊你的名字
你可曾许我不会离去
让我活在想你的世界里
心上人你已去了哪里
花开花谢不见你的归期
你在我脑海挥之不去
你可知道我有多想你
心上人你已去了哪里
花开花谢不见你的归期
你在我脑海挥之不去
你可知道我有多想你
你可知道我有多想你`;
        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 type="text/css">#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-30 09:14

这个小播放器真有特色。制作很漂亮。欣赏亚伦老师好帖{:4_187:}

醉美水芙蓉 发表于 2023-8-30 11:27

小辣椒 发表于 2023-8-30 11:43

欣赏亚伦的精彩制作{:4_178:}

醉美水芙蓉 发表于 2023-8-31 07:04

页: [1]
查看完整版本: 心上人你去了哪里