烟花三月

东篱闲人 发表于 2023-9-2 13:30

本帖最后由东篱闲人于 2023-9-3 15:40 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1954780">
<br /><br /><style>
#papa { margin: 100px -300px; width: 1200px; height: 750px; background: gray url('https://pic.imgdb.cn/item/64f2bf25661c6c8e54aa29c9.jpg') center/cover no-repeat; box-shadow:0 0px 0px 0px #80ff00; position: relative; z-index: 1; --state: running; overflow:hidden;}

#vid { position: absolute; width: 100%; height: 100%; top: -30px; object-fit: cover; opacity: 1;auto;filter:contrast(120%);transform: scale(1.1, 1.1) }

#photo img {
width: 100%;
height: 100%;
position: absolute;
border: 0px solid #000000;
top: 0px;
left: 0px;
filter: contrast(150%)brightness(100%);
   -webkit-mask-image:radial-gradient(black 30%,transparent 70%);
   opacity: 0;
animation-name: round;
animation-duration: 48s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes round {
0% { opacity: 0; transform:translate(0%,0%)scale(0);}
5% { opacity: 1; transform:translate(0%,0%)scale(0);}
14% { opacity: 1; transform:translate(0%,0%)scale(1);}
16% { opacity: 1; transform:translate(0%,0%)scale(1);}
24% { opacity: 0; transform:translate(100%,0%)scale(1);}
}
#photo img:nth-child(8) { animation-delay: 42s; }
#photo img:nth-child(7) { animation-delay: 36s; }
#photo img:nth-child(6) { animation-delay: 30s; }
#photo img:nth-child(5) { animation-delay: 24s; }
#photo img:nth-child(4) { animation-delay: 18s; }
#photo img:nth-child(3) { animation-delay: 12s; }
#photo img:nth-child(2) { animation-delay: 6s; }
#photo img:nth-child(1) { animation-delay: 0s; }

#lrc { --motion: cover2; --tt: 1s; position: absolute; left: 45%;top:85%; transform: translate(-50%, 10px);font:normal 1.6em 华文隶书; color:#0000;filter: drop-shadow( 2px 2px 0px #000000); z-index: 2; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; 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: 300px; height: 300px;left: -5%; z-index: 120;top:60%; mix-blend-mode:exclusion; transform:perspective(0px) rotateY(0deg)rotateX(0deg)scale(1.0); }
#an{position: absolute; top:0%; left:0%; width: 100%; height:100%; z-index: 120; }
@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:85%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 1.6em 华文隶书; opacity: 1; cursor: pointer; z-index: 1660}
</style>

<div id="papa">
<span id="fullscreen"></span>

<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/82/5b4ad2af970dc.mp4" muted="muted" autoplay="autoplay" loop="loop"></video>

<divid="photo">
<img class="photo" src="https://pic.imgdb.cn/item/64f2be4a661c6c8e54aa02a2.jpg" /> <img class="photo" src="https://pic.imgdb.cn/item/64f2be68661c6c8e54aa0679.jpg" /> <img class="photo" src="https://pic.imgdb.cn/item/64f2be80661c6c8e54aa0a16.jpg" /> <img class="photo" src="https://pic.imgdb.cn/item/64f2be9f661c6c8e54aa1625.jpg" /> <img class="photo" src="https://pic.imgdb.cn/item/64f2bebe661c6c8e54aa1dfa.jpg" /> <img class="photo" src="https://pic.imgdb.cn/item/64f2bee1661c6c8e54aa20ed.jpg" /> <img class="photo" src="https://pic.imgdb.cn/item/64f2bf00661c6c8e54aa23e3.jpg" /> <img class="photo" src="https://pic.imgdb.cn/item/64f2c46a661c6c8e54ac3464.jpg" />
</div>

<div id="mydiv"></div>
<divid="img_border" ></div>
<div id="lrc" data-lrc="烟花三月</div>
<div id="mplayer">

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1449592019.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 = ` 烟花三月
烟花三月
烟花三月
烟花三月
TO；焱鑫磊
TO；焱鑫磊
TO；焱鑫磊
TO；焱鑫磊
编辑：东篱闲人
编辑：东篱闲人
编辑：东篱闲人
编辑：东篱闲人
编辑：东篱闲人

牵住你的手相别在黄鹤楼
波涛万里长江水送你下扬州
真情伴你走春色为你留
二十四桥明月夜牵挂在扬州
扬州城有没有我这样的好朋友
扬州城有没有人为你分担忧和愁
扬州城有没有我这样的知心人
扬州城有没有人和你风雨同舟
烟花三月是折不断的柳
梦里江南是喝不完的酒
等到那孤帆远影碧空尽
才知道思念总比那西湖瘦

牵住你的手相别在黄鹤楼
波涛万里长江水送你下扬州
真情伴你走春色为你留
二十四桥明月夜牵挂在扬州
扬州城有没有我这样的好朋友
扬州城有没有人为你分担忧和愁
扬州城有没有我这样的知心人
扬州城有没有人和你风雨同舟
烟花三月是折不断的柳
梦里江南是喝不完的酒
等到那孤帆远影碧空尽
才知道思念总比那西湖瘦
烟花三月是折不断的柳
梦里江南是喝不完的酒
等到那孤帆远影碧空尽
才知道思念总比那西湖瘦

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

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

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

<div id="post_rate_div_1954780"></div>
</div>
</div>

红影发表于 2023-9-2 14:14

漂亮，东篱大哥现在学了好多新的做法啊{:4_187:}

红影发表于 2023-9-2 14:14

做得真好，欣赏东篱大哥好帖{:4_187:}

红影发表于 2023-9-2 14:16

看到歌词才知道是送给焱鑫磊的呢，焱鑫磊快来收礼@焱鑫磊{:4_187:}

焱鑫磊 发表于 2023-9-2 14:21

谢谢东篱大哥！有礼了？以后有美女全全经大哥审阅。归大哥管理了。{:4_172:}

焱鑫磊 发表于 2023-9-2 14:22

红影发表于 2023-9-2 14:16
看到歌词才知道是送给焱鑫磊的呢，焱鑫磊快来收礼@焱鑫磊

收下了！谢谢！！！{:4_204:}

梦油发表于 2023-9-2 15:13

全图都在动，很具有生气。东篱闲人朋友的美帖真是一件绝妙的艺术品。

马黑黑 发表于 2023-9-2 18:06

这是回忆往年的，还是展望来年的？

东篱闲人 发表于 2023-9-2 18:22

红影发表于 2023-9-2 14:14
漂亮，东篱大哥现在学了好多新的做法啊

刚从焱鑫磊那盗来的。。。{:5_117:}

东篱闲人 发表于 2023-9-2 18:22

焱鑫磊发表于 2023-9-2 14:21
谢谢东篱大哥！有礼了？以后有美女全全经大哥审阅。归大哥管理了。

妇联主任？{:5_115:}

东篱闲人 发表于 2023-9-2 18:23

梦油发表于 2023-9-2 15:13
全图都在动，很具有生气。东篱闲人朋友的美帖真是一件绝妙的艺术品。

谢谢老梦。。。{:4_176:}

东篱闲人 发表于 2023-9-2 18:23

马黑黑发表于 2023-9-2 18:06
这是回忆往年的，还是展望来年的？

来年，来年一起去哈。。。。{:5_112:}

红影发表于 2023-9-2 18:51

焱鑫磊发表于 2023-9-2 14:22
收下了！谢谢！！！

不客气啊，焱鑫磊收礼开心{:4_187:}

醉美水芙蓉 发表于 2023-9-2 20:31

东篱闲人 发表于 2023-9-2 20:40

醉美水芙蓉发表于 2023-9-2 20:31
美女下扬州！

一起去吧？{:5_117:}

醉美水芙蓉 发表于 2023-9-2 20:42

东篱闲人 发表于 2023-9-2 20:44

醉美水芙蓉发表于 2023-9-2 20:42
扬州真得好玩，东篱老师可以去玩玩！

15年前去过。时光真的快啊。。。{:4_203:}

马黑黑 发表于 2023-9-2 20:46

东篱闲人发表于 2023-9-2 18:23
来年，来年一起去哈。。。。

算了，谢谢

红影发表于 2023-9-2 20:55

东篱闲人发表于 2023-9-2 18:22
刚从焱鑫磊那盗来的。。。

很不错呢，做得很美的{:4_187:}

焱鑫磊 发表于 2023-9-2 21:04

红影发表于 2023-9-2 18:51
不客气啊，焱鑫磊收礼开心

开心！开心！{:4_181:}

页: [1] 2

花潮论坛's Archiver

烟花三月