论坛 › 欢乐水吧 › 世人谓我恋长安

东篱闲人 发表于 2023-7-24 21:51

世人谓我恋长安

本帖最后由 东篱闲人 于 2023-7-25 10:19 编辑 <br /><br /><style>
#papa { margin: 20px -300px; width: 1164px; height: 620px;LEFT: 50px;background: gray url('https://pic.imgdb.cn/item/64be7ffc1ddac507ccfebff3.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: 1s; position: absolute; left: 50%;top:82%; transform: translate(-50%, 10px);font:normal 2em 华文隶书; color:#ff0000;filter:hue-rotate(0deg)contrast(120%)brightness(200%);filter: drop-shadow( 2px 2px 0px #000000); z-index: 21; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background: linear-gradient(0deg, #1E9600 0%,#FFF200 50%,#FF0000 100%);background-size: 10vmin 125%;background-position: center center; filter: drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#mplayer { position: absolute; width: 380px; height: 520px;left: 50%; z-index: 20;top:10%;overflow:hidden;-webkit-mask-image: radial-gradient(black 25% ,transparent 65%);}
#an{position: absolute;
      top:0%; left:0%;
      width: 100%;
      height:100%;
         
   }
@keyframes cover1{0% {
opacity: 1;clip-path:inset(0% 100% 0% 100% round 0 0% 0 0%);
filter:hue-rotate(0deg)contrast(120%)brightness(200%);}
20% {
opacity: 1;clip-path: inset(0% 0 0% 0 round 0 0% 0 0%);
filter:hue-rotate(0deg)contrast(120%)brightness(800%);}

}
@keyframes cover2 {0% {
opacity: 1;clip-path:inset(0% 100% 0% 100% round 0 0% 0 0%);
filter:hue-rotate(0deg)contrast(120%)brightness(200%);}
20% {
opacity: 1;clip-path: inset(0% 0 0% 0 round 0 0% 0 0%);
filter:hue-rotate(0deg)contrast(120%)brightness(800%);}
}
</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/64be5c641ddac507cc97a514.gif" width="100%" height="80%"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1994745132.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 = ` 烟雨草堂
作曲 : 白羽淇
作词 : 张凤敏
图意 :东篱闲人
一骑红尘在昨秋 拓印在心头
我在长街等你不经意回眸
午时三刻的酒楼 斟满旧时候
赋几首 平仄里的愁
一剑天涯 徘徊路口  实难回首 
念念不忘 梦回大唐的锦绣
请风探望 闻你无忧
仍些许贪恋 与你同城的星宿
世人谓我恋长安 其实只恋长安某
天凉好个秋 相思已白头
近在咫尺 风霜皆入喉 
抵不过你 倾城的 温柔
世人谓我恋长安 其实只恋长安某
繁花终流走 相思无穷几时休
我欲化作 月光盈满袖
天地遨游 朝暮怎 足够  

一剑天涯 徘徊路口  实难回首 
念念不忘 梦回大唐的锦绣
请风探望 闻你无忧
仍些许贪恋 与你同城的星宿
世人谓我恋长安 其实只恋长安某
天凉好个秋 相思已白头
近在咫尺 风霜皆入喉 
抵不过你 倾城的 温柔
世人谓我恋长安 其实只恋长安某
繁花终流走 相思无穷几时休
我欲化作 月光盈满袖
天地遨游 朝暮怎 足够  

录音 : 卢盼林
混音 : 大狗
【未经著作权人许可 不得翻唱翻录或使用】


];
`;
        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>


</td></tr></table>


</div>
<div id="comment_1882932" class="cm">
</div>

<h3 class="psth xs1"><span class="icon_ring vm"></span></h3>
<dl id="ratelog_1882932" class="rate">
<dd style="margin:0">
<div id="post_rate_1882932"></div>
<table class="ratl">
<tr>

红影 发表于 2023-7-24 22:17

漂亮的制作，图中的美女不知是在跳舞还是在练功。{:4_173:}
底图制作漂亮，歌曲也好听。欣赏东篱大哥好帖{:4_187:}

一斛珠 发表于 2023-7-25 09:40

这个腻害啊{:4_199:}

东篱闲人 发表于 2023-7-25 10:00

红影 发表于 2023-7-24 22:17
漂亮的制作，图中的美女不知是在跳舞还是在练功。
底图制作漂亮，歌曲也好听。欣赏东篱大哥好帖{ ...

跳舞吧？{:5_106:}

东篱闲人 发表于 2023-7-25 10:01

一斛珠 发表于 2023-7-25 09:40
这个腻害啊

套代码。。。{:5_106:}

东篱闲人 发表于 2023-7-25 10:02

红影 发表于 2023-7-24 22:17
漂亮的制作，图中的美女不知是在跳舞还是在练功。
底图制作漂亮，歌曲也好听。欣赏东篱大哥好帖{ ...

歌词里有乱码，你给看看。。。{:4_190:}

红影 发表于 2023-7-25 20:59

东篱闲人 发表于 2023-7-25 10:00
跳舞吧？

也很像舞剑呢，很漂亮的图图{:4_204:}

红影 发表于 2023-7-25 21:00

东篱闲人 发表于 2023-7-25 10:02
歌词里有乱码，你给看看。。。

没看出来乱码啊，这个是歌词特效吧？

查看完整版本: 世人谓我恋长安