葬花词
<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/64f320c6661c6c8e54cfb0a1.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">
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/23/94/62275f055cb37.mp4" muted="muted" autoplay="autoplay" loop="loop"></video>
<divid="photo">
<img class="photo" src="https://pic.imgdb.cn/item/64f320e7661c6c8e54cfb5a7.jpg" /> <img class="photo" src="https://pic.imgdb.cn/item/64f320fc661c6c8e54cfb872.jpg" /> <img class="photo" src="https://pic.imgdb.cn/item/64f32113661c6c8e54cfbb0b.jpg" /> <img class="photo" src="https://pic.imgdb.cn/item/64f3212b661c6c8e54cfbdcc.jpg" /> <img class="photo" src="https://pic.imgdb.cn/item/64f32141661c6c8e54cfbf9e.jpg" /> <img class="photo" src="https://pic.imgdb.cn/item/64f32157661c6c8e54cfc1b7.jpg" /> <img class="photo" src="https://pic.imgdb.cn/item/64f3216e661c6c8e54cfc431.jpg" /> <img class="photo" src="https://pic.imgdb.cn/item/64f32184661c6c8e54cfc7fa.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=1370886393.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 = ` 开辟鸿蒙，谁为情种？都只为风月情浓。
趁着这奈何天、伤怀日、寂寥时，试遣愚衷。
因此上演出这怀金悼玉的“红楼梦”。
编辑：东篱闲人
编辑：东篱闲人
编辑：东篱闲人
-
也作风露辞寒春
往事空照梦里人
庭阶藓生，玉楼埋沉
醉里问愁最相衬
-
凭栏人间闻秋声
原是垂泪不归人
消磨光景，对影庭深
夤夜仓皇辞星辰
-
风回小庭逐明月
只身似飘蓬倦未歇
怅怅与暮夜
途拾杯中，漾泊一圆缺
-
花谢花飞花满天，红消香断有谁怜？
-
也作风露辞寒春
往事空照梦里人
庭阶藓生，玉楼埋沉
醉里问愁最相衬
-
也作远天风里尘
望断当年笙歌枕
初逢花醅，醉向早春
空留醒时问离恨
-
风回小庭逐明月
只身似飘蓬倦未歇
怅怅与暮夜
途拾杯中，漾泊一圆缺
-
余花临烛飘香屑
是芳菲散尽催辞别
冉冉对老雀
浮生好梦，算来多是窃
-
趁这奈何天，梦里暂相见
楼前花枝仍睡在当年
-
花谢花飞花满天
红消香断有谁怜
游丝软系飘春榭
落絮轻沾扑绣帘
-
试看春残花渐落
便是红颜老死时
一朝春尽红颜老
花落人亡两不知
——End——
策划：悠羽
林黛玉（昆曲）：邵天帅
昆曲指导：张鹏
诗词选段：曹雪芹《红楼梦》
混音：幺唠
制作人：左木修
歌曲录音：田跃君
昆曲录音：BOB后权宝@行人Studio
联合出品：观其复
出品：万象凡音
`;
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 20:27
老师图片配得很漂亮！
谢谢芙蓉、、、、{:4_190:} 这个真漂亮，黛玉葬花，几多悲苦。很是古色古香，东篱大哥的特色{:4_199:} 红影 发表于 2023-9-2 21:13
这个真漂亮，黛玉葬花，几多悲苦。很是古色古香，东篱大哥的特色
喝水。。。。{:4_180:} 东篱闲人 发表于 2023-9-2 21:49
喝水。。。。
可惜这个美女不是晓旭那个林妹妹{:4_173:} 很喜欢这样古风味的氛围{:4_204:} 红影 发表于 2023-9-2 22:40
可惜这个美女不是晓旭那个林妹妹
那个没了。。。 东篱闲人 发表于 2023-9-3 09:11
那个没了。。。
是啊，可惜了。那个无法替代呢。
页:
[1]