贺小九芳辰（4.1）
<style>
#papa { margin: 80px 0 0 calc(50% - 681px); width: 1200px; height: 560px; box-shadow: 2px 4px 8px #333; position: relative; overflow: hidden; z-index: 1; }
#canv { position: absolute; }
#mypic { position: absolute; left: 500px; top: 40px; width: 200px; cursor: pointer; transform: scale(0.9) rotate(-5deg); animation: scale 2.5s infinite alternate var(--state); }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; filter: opacity(.3); pointer-events: none; }
#vid1 { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; filter: opacity(.3); pointer-events: none; }
#pic { position: absolute; left: 300px; width: 600px; height: 217px; bottom: -10px; }
@keyframes scale { to { transform: scale(1.2) rotate(2deg); } }
#tit {
position: absolute;
left: -230px;
top: -30px;
background-image:url('https://pic.imgdb.cn/item/6562c38dc458853aef9d7d27.gif'); background-size:cover;
width:700px; height:260px; font: bold 2.8em serif;
text-align:center; line-height:200px; color:transparent;
-webkit-background-clip:text;
border:0px #FF4A20 solid; z-index: 10; transform: rotate(-5deg);
}
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1354262595" autoplay loop></audio>
<canvas id="canv"></canvas>
<video id="vid" src="https://img.tukuppt.com/video_show/2414777/00/01/68/5b4846127e497.mp4" loop muted></video>
<video id="vid1" src="https://img.tukuppt.com/video_show/2269348/00/14/64/5e5940fc4d4a6_10s_big.mp4" loop muted></video>
<img id="mypic" src="https://pic.imgdb.cn/item/660531519f345e8d03bcd22a.png" alt="" title="播放/暂停" />
<img id="pic" src="https://pic.imgdb.cn/item/66052a929f345e8d039b7dbe.png" alt=""/>
<div id="tit">TO 小九</div>
</div>
<script>
(function() {
var w = canv.width = papa.offsetWidth, h = canv.height = papa.offsetHeight;
var raf = null, dx = 0, step = .3, iw = 1794;
var ctx = canv.getContext('2d');
var img = new Image();
img.src = 'https://pic.imgdb.cn/item/6604d8609f345e8d03fe6b9f.jpg';
img.onload = () => mState();
function render() {
ctx.clearRect(0,0,w,h);
dx = (dx + step) % iw;
ctx.drawImage(img, dx, 0, w - dx, h, 0, 0, w - dx, h);
ctx.drawImage(img, w, 0, iw - w, h, w - dx, 0, iw - w, h);
ctx.drawImage(img, 0, 0, w + dx - iw, h, iw - dx, 0, w + dx - iw, h);
raf = aud.paused ? cancelAnimationFrame(raf) : requestAnimationFrame(render);
};
function mState() {
aud.paused ?
(papa.style.setProperty('--state', 'paused'), mypic.title = '点击播放', vid.pause()) :
(papa.style.setProperty('--state', 'running'), mypic.title = '点击暂停', vid.play());
render();
};
aud.onpause = aud.onplaying = () => mState();
aud.onseeking = () => raf = cancelAnimationFrame(raf);
mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script> 这段时间有点忙，很多作业来不及完成，但九儿的生日不能忘。一个小帖祝九儿生日快乐@小九 {:4_187:} 学习黑黑的《胜利》帖子效果，谢谢黑黑的代码@马黑黑 {:4_187:} 小九生日到了{:4_204:} 和红影一起祝福小九生日快乐！心想事成！
蛋糕来助兴，心愿来达成！岁岁幸福平安。
https://pic.52112.com/180705/JPG-180705_940/ATVT8hMA0Z_small.jpg
{:4_204:}{:5_166:}{:4_176:}{:4_177:}{:4_178:}
跟着恩师送祝福，并混点吃、混点喝。{:4_428:} 祝贺小九生日快乐{:4_204:} 很高兴借红影美帖祝小九朋友生日快乐。 小九来吃蛋糕{:4_170:} 大猫咪 发表于 2024-3-28 20:20
小九生日到了 和红影一起祝福小九生日快乐！心想事成！
蛋糕来助兴，心愿来达成！岁岁幸福平安 ...
这个大蛋糕太给力了，跟猫猫一起祝福小九{:4_187:} 小文 发表于 2024-3-28 20:21
跟着恩师送祝福，并混点吃、混点喝。
和小文一起祝福小九{:4_187:} 四海八荒 发表于 2024-3-28 21:09
祝贺小九生日快乐
和四海一起祝福{:4_187:} 梦油 发表于 2024-3-28 21:31
很高兴借红影美帖祝小九朋友生日快乐。
和梦油一起祝福小九{:4_187:} 马黑黑 发表于 2024-3-28 22:10
小九来吃蛋糕
那个底图不知道怎么出现两层的感觉了，还挺好，就没去改{:4_173:} 红影 发表于 2024-3-28 22:25
那个底图不知道怎么出现两层的感觉了，还挺好，就没去改
有夹层不更好吗 马黑黑 发表于 2024-3-28 22:25
有夹层不更好吗
是啊，只是我自己倒不知道是怎么弄出来的了{:4_173:} 借题发挥，祝福快乐。 红影 发表于 2024-3-28 22:23
和梦油一起祝福小九
这支《生日快乐》乐曲很好听。 红影 发表于 2024-3-28 23:00
是啊，只是我自己倒不知道是怎么弄出来的了
歪打正着呗 师妹百忙中不忘朋友生日，这份友谊长长久久！
同祝九小生日快乐！ 真喜庆啊，和影一起贺九生日快乐