让我们拥抱春天
<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:2; position: relative; display: grid; place-items: center; --state: running; --showbackface: visible;border-radius:32px;}
#mboard { width: 420px; height: 40px; background:Snow; border-radius: 8px; box-shadow: 2px 2px 4px rgba(0,0,0,.5); display: flex; justify-content: center; align-items: center; gap: 8px; position: relative; opacity: 0;}
#papa:hover #mboard{ transition: .7s; opacity: .9; }
#mboard img { width: 26px; cursor: pointer; }
#mboard img:hover { filter: drop-shadow(1px 1px 1px rgba(0,0,0,.5)); }
#tMsg1, #tMsg2 { width: 45px; font-size: 13px; text-align: center; }
#volwrap { position: absolute; width: 60px; height: 40px; right: 45px; display: grid; place-items: center; background: none; }
#volwrap:hover #volume { display: inline; }
#btnMute:hover ~ #volwrap > #volume { display: inline; }
#volume { position: absolute; width: 50px; height: 4px; opacity: .75; display: none; }
#prog { --track: gray; --prog: red; --prg: 0%; width: 200px; height: 20px; cursor: pointer; background: linear-gradient(to right, var(--prog) var(--prg), var(--track) 0) no-repeat 0% 50%/100% 2px; }
#dt{
position:absolute;mix-blend-mode: screen;
width: 100%;
height: 100%;
top:0%;
left: 0%; z-index: 2; }
#dt img{width: 100%;
height: 100%;
}
#vid {width: 100%; height: 120%;
position:absolute; z-index: 1;
top:-20%; left:0%;
object-fit: cover;
}
#bfq{height: 40px;position: relative;left: 0%; top: 45%;overflow: hidden; z-index: 10;}
</style>
<div id="papa">
<div id="dt">
<img src="https://pic1.imgdb.cn/item/67aefe6cd0e0a243d4ff228d.png" id="IMG" />
</div>
<div id="bfq">
<div id="mboard">
<img id="btnPlay" src="https://638183.freep.cn/638183/web/icon/play.svg" title="播放/暂停(Alt+X)" alt="" />
<span id="tMsg1">00:00</span>
<span id="prog"></span>
<span id="tMsg2">00:00</span>
<img id="btnMute" src="https://638183.freep.cn/638183/web/icon/unmuted.svg" title="静音 (Alt+J)" alt="" />
<div id="volwrap"><input id="volume" type="range" min="0" max="1" step="0.1" value="1" /></div>
</div>
</div>
<video id="vid" src="https://imgpp.ztupic.com/u/6X8Xv0HBB2/1617066870065_8faf5263.mp4" autoplay loop muted></video>
</div>
<p><audio id="aud" src="https://cccimg.com/view.php/682b0c454d4168fc1fa352380ed1a2af.mp3" autoplay loop></audio></p>
<script>
var lastVolume = 1, muted = false;
var imgAr = [
'https://638183.freep.cn/638183/web/icon/play.svg',
'https://638183.freep.cn/638183/web/icon/pause.svg',
'https://638183.freep.cn/638183/web/icon/unmuted.svg',
'https://638183.freep.cn/638183/web/icon/muted.svg',
];
var setVolume = (val) => Math.min(1, Math.max(0, val));
var setMute = () => {
if(lastVolume === 0) return;
muted = !muted;
muted ? (aud.volume = 0, btnMute.src = imgAr) : (aud.volume = lastVolume, btnMute.src = imgAr);
};
var s2m = (seconds) => {
const secs = Math.floor(seconds || 0);
return `${String(secs/60|0).padStart(2,'0')}:${String(secs%60).padStart(2,'0')}`;
};
var mState = () => {
btnPlay.src = aud.paused ? imgAr : imgAr;
btnPlay.title = (aud.paused ? '播放' : '暂停') + ' (Alt+X)';
};
document.addEventListener('keydown', e => {
if(!e.altKey) return;
switch (e.keyCode) {
case 88:
btnPlay.click();
break;
case 74:
setMute();
break;
case 187: case 107:
aud.volume = setVolume(aud.volume + 0.1);
lastVolume = aud.volume;
break;
case 189: case 109:
aud.volume = setVolume(aud.volume - 0.1);
lastVolume = aud.volume;
break;
default:
return;
}
});
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
prog.style.setProperty('--prg', aud.currentTime/aud.duration*100 +'%');
tMsg1.innerText = s2m(aud.currentTime);
tMsg2.innerText = s2m(aud.duration);
};
aud.onvolumechange = () => {
btnMute.src = aud.volume === 0 ? imgAr : imgAr;
volume.value = aud.volume;
}
btnPlay.onclick = () => aud.paused ? (aud.play(),image.play(),vid.play()): (aud.pause(),image.stop(),vid.pause());
btnMute.onclick = () => setMute();
volume.onchange = () => aud.volume = lastVolume = volume.value;
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
prog.onmousemove = (e) => prog.title = s2m(e.offsetX * aud.duration / prog.offsetWidth);
volwrap.onmouseover = () => volwrap.title = '音量 : ' + volume.value + ' (Alt++/-)'
</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("IMG");
</script>
<script type="text/javascript">
var lxtxt =[">lmth/<",
'>vid/<>naps/<天春抱拥们我让 >"魏新文华 me0.8 dlob:tnof;%081:thgieh-enil;)gpj.4e4f00a6be8e00103b5b15a722d21251-81205202/26/cip/daolpu/pu/cc.vznc.sbb//: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 ;%081:thgieh-enil ;retnec:ngila-txet ;xp05: pot-gniddap ;enon :stneve-retniop;2:xedni-z;xp003 xp062-xp006-: nigram ;xp053:thgieh;%051: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>
看杨帆弄了半天才弄好的，真不容易{:4_187:} 文字制作很别致。视频和播放器也漂亮。
欣赏杨帆好帖{:4_199:} 春天是最美的季节，也是诗人离不开的主题。 鸟语花香，山青水绿，多美的春天啊！{:4_199:} 红影 发表于 2025-3-3 16:09
看杨帆弄了半天才弄好的，真不容易
是啊，鼓捣了好久，谢谢影子关注、支持与鼓励{:4_204:} 梦油 发表于 2025-3-3 16:39
春天是最美的季节，也是诗人离不开的主题。
是啊，春天是充满希望的季节，春天是属于新生的季节
让我们拥抱这美好的季节，共同迎接充满生机与活力的新开始！ 梦江南 发表于 2025-3-3 16:57
鸟语花香，山青水绿，多美的春天啊！
谢谢江南鼓励，让我们一起迎接春天的到来{:4_204:} https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 杨帆 发表于 2025-3-3 17:00
是啊，鼓捣了好久，谢谢影子关注、支持与鼓励
这个字体特别奇特呢，真漂亮{:4_187:} 起个网名好难 发表于 2025-3-3 18:27
谢谢难难老师关注与鼓励{:4_191:} 红影 发表于 2025-3-3 21:12
这个字体特别奇特呢，真漂亮
是，就是鼓捣这呢{:4_190:} 杨帆这个画面很漂亮，文字效果也是特别好{:4_199:} 发现加分后会甩出论坛，不知道别人是不是这样@红影 杨帆 发表于 2025-3-3 21:30
是，就是鼓捣这呢
效果非常好{:4_187:} 小辣椒 发表于 2025-3-3 21:40
发现加分后会甩出论坛，不知道别人是不是这样@红影
是的，我也是这样。不知道怎么回事。 红影 发表于 2025-3-3 21:49
是的，我也是这样。不知道怎么回事。
影子好，请问“加分后会甩出论坛”是什么意思呀？ 小辣椒 发表于 2025-3-3 21:39
杨帆这个画面很漂亮，文字效果也是特别好
谢谢小辣椒支持与鼓励{:4_204:} 杨帆 发表于 2025-3-3 22:31
影子好，请问“加分后会甩出论坛”是什么意思呀？
就是评分后忽然页面都没了，变成一片空白。刷新后才回来。 红影 发表于 2025-3-3 22:34
就是评分后忽然页面都没了，变成一片空白。刷新后才回来。
晕~那是什么原因呀
页:
[1]
2