生日快乐 TO 绿叶清舟

杨帆发表于 2025-2-28 12:19

本帖最后由杨帆于 2025-2-28 13:14 编辑 <br /><br /><style>
#papa { margin:100px 0 20px calc(50% - 681px); background:url('https://pic.imgdb.cn/item/66447c130ea9cb1403cd4ffa.jpg') no-repeat center/cover;width: 1200px; height: 721px;box-shadow: 3px 3px 6px gray; overflow: hidden; z-index:3; position: relative; display: grid;place-items: center; --state: running; --showbackface: visible;}
#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;z-index:8;}
#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: 1; }
#dt img{width: 100%;
   height: 100%;
}
#vid {width: 100%; height: 120%;
position:absolute;
top:-20%; left:0%;
object-fit: cover; pointer-events: none; -webkit-mask: radial-gradient(transparent 10%, red);
}
#bfq{height: 40px;position:absolute;left:35%; bottom:3%;overflow: hidden; z-index:1;}
#picBtn { position: absolute; left: 950px; bottom: 130px; width: 300px; height: 300px; background: url('https://pic1.imgdb.cn/item/67c07486d0e0a243d4074c26.jpg') 0 0/100% 100%; z-index: 2;mix-blend-mode:darken; #mplayer img { filter: invert(.8); filter: hue-rotate(90deg);}cursor: pointer; z-index: -2; animation: rot linear 30s infinitevar(--state); transform: rotateX(0deg) rotateY(0deg) rotate(0deg);}@keyframes rot {0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(20deg)scale(0.2);}
50% {transform: rotateX(0deg) rotateY(0deg) rotateZ(-360deg)scale(2);left: 30px;}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(260deg)scale(0.2);top:30px;}
}
</style>
<div id="papa">
<div id="dt">
<img src="https://wimg.588ku.com/gif620/20/10/09/c9d60eb51f17db654715ecf2434c3817.gif" id="IMG" />
</div><div id="picBtn" ></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>
</div>
<video id="vid" src="https://img.tukuppt.com/video_show/2916847/00/17/69/5ecce3d45b6b2.mp4" autoplay loop muted></video>
</div>
<p><audio id="aud" src="https://cccimg.com/view.php/58ab58d6a8051d277b03afc68f734220.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>
picBtn.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => picBtn.style.animationPlayState = 'running');
aud.addEventListener('pause', () => picBtn.style.animationPlayState = 'paused');</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>

红影发表于 2025-2-28 12:36

这个贺帖好欢乐啊。欣赏杨帆好帖，同祝清舟生日快乐{:4_187:}{:4_177:}

梦江南 发表于 2025-2-28 13:43

好漂亮的生日快乐音画，赞！{:4_187:}

梦江南 发表于 2025-2-28 13:44

清舟生日快乐！

https://pic1.imgdb.cn/item/67c02765d0e0a243d4071ee1.png

绿叶清舟 发表于 2025-2-28 21:40

谢谢杨帆{:4_187:}这份礼太精美了谢谢

绿叶清舟 发表于 2025-2-28 21:40

梦江南发表于 2025-2-28 13:44
清舟生日快乐！

谢谢江南{:4_204:}

杨帆发表于 2025-2-28 22:19

红影发表于 2025-2-28 12:36
这个贺帖好欢乐啊。欣赏杨帆好帖，同祝清舟生日快乐

谢谢影子支持与鼓励{:4_204:}

杨帆发表于 2025-2-28 22:20

梦江南发表于 2025-2-28 13:43
好漂亮的生日快乐音画，赞！

谢谢江南支持与鼓励{:4_204:}

杨帆发表于 2025-2-28 22:22

绿叶清舟发表于 2025-2-28 21:40
谢谢杨帆这份礼太精美了谢谢

谢谢清舟喜欢，祝生日快乐{:4_187:}

红影发表于 2025-3-1 08:19

杨帆发表于 2025-2-28 22:19
谢谢影子支持与鼓励

这样的贺帖很让人感受到朋友之间的温暖{:4_187:}

庶民发表于 2025-3-1 08:41

借光祝福生日！

鱼儿发表于 2025-3-1 10:34

清舟生日快乐~{:7_309:}

杨帆发表于 2025-3-1 12:18

红影发表于 2025-3-1 08:19
这样的贺帖很让人感受到朋友之间的温暖

让祝福有温度，谢谢鼓励{:4_176:}

杨帆发表于 2025-3-1 12:19

庶民发表于 2025-3-1 08:41
借光祝福生日！

同祝福，谢谢鼓励{:4_176:}

杨帆发表于 2025-3-1 12:19

鱼儿发表于 2025-3-1 10:34
清舟生日快乐~

同祝福，谢谢支持{:4_176:}

小辣椒 发表于 2025-3-1 14:46

欣赏杨帆好制作，喜庆的场景{:4_178:}

小辣椒 发表于 2025-3-1 14:46

借美帖祝清舟生日快乐！幸福安康！

红影发表于 2025-3-1 17:24

杨帆发表于 2025-3-1 12:18
让祝福有温度，谢谢鼓励

不客气啊，问好杨帆，周六快乐{:4_187:}

杨帆发表于 2025-3-1 17:57

小辣椒发表于 2025-3-1 14:46
欣赏杨帆好制作，喜庆的场景

同祝福，谢谢小辣椒鼓励{:4_204:}

绿叶清舟 发表于 2025-3-1 21:08

杨帆发表于 2025-2-28 22:22
谢谢清舟喜欢，祝生日快乐

杨帆客气了，谢谢情意满满的礼物

页: [1] 2

花潮论坛's Archiver

生日快乐 TO 绿叶清舟