上善若水 力成纳兰
本帖最后由 klxf 于 2025-3-16 19:21 编辑 <br /><br /><!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>力成纳兰</title>
</head>
<body>
<style>
#papa { margin: 130px 0 20px calc(50% - 721px); background:url('https://pic.imgdb.cn/item/65ae633e871b83018aa04268.jpg') no-repeat center/cover;width: 1280px; height: 720px;box-shadow: 3px 3px 6px gray; overflow: hidden; z-index:1; position: relative; display: grid; place-items: center; --state: running;border-radius:0px;}
#papa:hover #mplayer { transition: .7s; opacity: .99; }
#mplayer {
position: absolute;z-index: 8;
left: calc(50% + 525px);
bottom: 4.5%;
width: 50px;
height: 50px;
border: 0px solid #cccccc;
border-radius: 50%;
opacity: .1;
cursor: pointer;
#mplayer img { filter: invert(.8); }
}
#papa:hover #fullscreen { display:block ;opacity: .99;}
#fullscreen { position: absolute; top:90%; left:5%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 1.8em华文新魏; opacity: .1; cursor: pointer; z-index: 6}
.dancer{ position: absolute; z-index:3;}
#dt2 {position: absolute;left:31.5%;top:5%;width:356px;HEIGHT:175px; z-index:3;
}
#dt1{ position: absolute; width: 120px; height: 27px; left: 65px; top: 60px; z-index:3;}
#vid {width: 100%; height:100%;position:absolute;top:0%; left:0%;object-fit: cover; pointer-events: none; z-index:2;
}
#ppm{position: absolute; width: 80%; height: 80%; opacity:1; z-index:3;
background:url('https://cccimg.com/view.php/cd45d90af69ff09386f4c19dfb3650c0.gif') no-repeat 50% 1%/80% 80%;
}
#ppcm{ position: absolute;width: 80%; height: 80%; opacity:0;z-index:3;background:url('https://cccimg.com/view.php/c4f09497b0e521596e077455091dbb45.jpg') no-repeat 50% 1%/80% 80%;mix-blend-mode: multiply;}
#ppn{position: absolute; width: 100%; height: 100%; opacity:1; z-index:3;background:url('https://cccimg.com/view.php/d4c3c31db657c2ae0bce00f90308e2e2.gif') no-repeat 80% 33%/172.8px 141.6px;
}
#ppcn{ position: absolute;width: 100%; height: 100%; opacity:0;z-index:3;background:url('https://cccimg.com/view.php/3cfd9b074f466225eed0552ddf193909.png') no-repeat80% 33%/172.8px 141.6px;mix-blend-mode: multiply;}
</style>
<div id="papa">
<div id="dt1">
<img src="https://cccimg.com/view.php/cea88d9ad2506d063ae72c83fc14da71.gif" style="width:200px; height:200px;" alt="" id="IMG" /></div>
<div id="ppm"></div><div id="ppcm" ></div><div id="ppn"></div><div id="ppcn" ></div>
<div id="dt2"><img src="https://cccimg.com/view.php/b1033dcc31ae8760df0d34ee0eafff18.gif" alt="" id="Img" / > </div>
<img class="dancer" src="https://cccimg.com/view.php/a4d63905b1c586bb834dd48e54d39565.png" alt="" style="width:193px; height: 158px; left:835px; top: 30px;" />
<span id="fullscreen" title="全屏/退出">全屏</span>
<img id="mplayer" alt="" src="https://pic1.imgdb.cn/item/676a527ad0e0a243d4e9066e.png" title="播放/暂停" />
<video id="vid" src="https://video-qn.51miz.com/preview/video/00/00/11/32/V-113252-52B3228C.mp4" autoplay loop muted></video>
<audio id="aud" src="https://cccimg.com/view.php/8be13ca912d1480de03c2deec761b7ff.mp3" autoplay loop></audio>
<script type="text/javascript">
var lxtxt =[">lmth/<",
'>vid/<>naps/<兰纳成力水若善上>"楷行文华 me0.8 dlob:tnof;%081:thgieh-enil;)fig.ItYAP4/31/90/1202/moc.x1xa.3z//:sptth(lru:egami-dnuorgkcab;)0,0,552(bgr xp1 :ekorts-txet-tikbew-;tnerapsnart:roloc-llif-txet-tikbew-;txet:pilc-dnuorgkcab-tikbew-"=elyts naps<',
'>";evitaler :noitisop ;%81:thgieh-enil;retnec:ngila-txet;%31:pot-gniddap ;enon:stneve-retniop;2:xedni-z;otua xp001:nigram ;xp053:thgieh;%001:htdiw"=elyts vid<'];
var linelen = lxtxt.length;
var txtStr = '';
for(n = linelen - 1; n >=0; n--) {
var linetxt = lxtxt;
for(j = linetxt.length - 1; j>=0;j--) {
txtStr += linetxt.charAt(j);
}
}
document.write(txtStr);
</script></div>
<script>
mplayer.onclick = () => aud.paused ? (aud.play(),image.play(),vid.play(),ppcm.style.opacity= '0',ppm.style.opacity = '1',ppcn.style.opacity= '0',ppn.style.opacity = '1'): (aud.pause(),image.stop(),vid.pause(),ppcm.style.opacity= '1',ppm.style.opacity = '0',ppcn.style.opacity= '1',ppn.style.opacity = '0');
var mState = () => {
mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.paused ? vid.pause() : vid.play();
Img.style.setProperty('opacity', aud.paused ? '0' : '.9');
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
fs = !fs;
};
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("IMG");
</script>
</body>
</html> 欣赏友友的精彩音画！ 用心用情完美构思绘制了一篇馨香如怡,惟妙惟肖,精彩纷呈的唯美音画贴. 精彩动画美轮美奂,醉人的音乐把故事演绎得淋漓尽致..... 醉美水芙蓉 发表于 2025-3-15 18:26
欣赏友友的精彩音画！
谢谢醉美管理员支持与鼓励，共祝愿纳兰明天更美好:) 赞，顶帖角度十分巧妙 感谢分享，带来满满能量 我表示压力很大 赞，顶帖角度新颖独特
页:
[1]