异域风情 贺加林森 生日快乐！
<style>#mydiv {
margin: 80px 0 0 calc(50% - 681px);
width: 1200px;
height: 640px;
background: #000 url('https://pic.imgdb.cn/item/644126e60d2dde5777bd9ee8.jpg') center/cover no-repeat;
overflow: hidden;
cursor: pointer;
position: relative;
--state: paused;
}
.dot {
position: absolute;
left: 310px;
bottom: 160px;
width: 4px;
height: 4px;
border-radius: 50%;
background: snow;
}
#pic {
position: absolute;
left: 30px;
bottom: -10px;
width: 600px;
height: 159px;
mix-blend-mode: multiply;
-webkit-mask-image:radial-gradient(black 35%, transparent 80%);
opacity: 0.9;
}
#pic1 {
position: absolute;
left: 220px;
top: 410px;
width: 200px;
height: 126px;
mix-blend-mode: multiply;
-webkit-mask-image:radial-gradient(black 55%, transparent 70%);
opacity: 0.9; z-index: 9;
}
#pic2 {
position: absolute;
left: 80px;
top: 20px;
width: 700px;
height: 220px; }
body { overflow-x: hidden; }
#baiBox {
margin: auto;
width: 680px;
text-align: center;
font-size: 4.6rem;
font-weight: bold;
font-family: 华文隶书;
color: transparent;
background: linear-gradient(180deg,hsla(14,100%,85%,.65),hsla(41,100%,43%,.85));
filter: drop-shadow(2px 2px 6px hsla(45,0%,0%,.95));
-webkit-background-clip: text;
transform-origin: top;
animation: yao 1.2s linear infinite alternate var(--state);
}
@keyframes yao {
from{transform: perspective(800px) rotatex(20deg); }
to { transform: perspective(800px) rotatex(-20deg); }
}
@keyframes ani { to { transform: rotate(var(--deg)) translateY(-300px); }}
</style>
<div id="mydiv">
<img id="pic" src="https://pic.imgdb.cn/item/643978eb0d2dde57774eac94.gif" alt="" />
<img id="pic1" src="https://pic.imgdb.cn/item/64397ead0d2dde5777553e16.png" alt="" />
<img id="pic2" src="https://pic.imgdb.cn/item/6441528d0d2dde57770b7f42.gif" alt="" />
<div id="baiBox" style="position: absolute; left:40px; top: 20px; ">Princess of Persia</div></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1413055905" loop="loop"
autoplay="autoplay"></audio>
<script>
(function() {
Array.from({length: 400}).forEach( (item,key) => {
let sp = document.createElement('span');
let ww = Math.random() * 6 + 2;
sp.className = 'dot';
sp.style.cssText += `
--deg: ${-50 + Math.random() * 100}deg;
width: ${ww}px;
height: ${ww}px;
background: #${Math.random().toString(16).substr(-6)};
animation: ani 10s ${Math.random() * key - 4}s infinite alternate var(--state);
`;
mydiv.appendChild(sp);
});
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script> 明天是队长的生日了，祝队长生日快乐{:4_187:} 古老神秘的异域音乐一直挺喜欢的，异域风情的美女也挺不错。希望队长看到心情愉快，早日康复{:4_204:} 感谢黑黑的代码。其实黑黑的播放器效果非常多也非常漂亮，正好在练习这个粒子的，就用了这个效果{:4_173:} 整个迷你蛋糕隆重地贺一下下！{:5_166:}
亲爱的，意境特美{:4_199:} 祝福队长生日快乐！健康长寿！永远年轻！ 哇，这场面好大，把楼兰女神请来献舞，贺队长生日快乐，去除一切烦恼，一切灾病，一生平安，幸福安康！俺在旅途中祝福您！ 借影子朋友的精美贺帖祝福队长生日快乐身、体健康！ 真好看的风情，祝加林森队长 生日快乐！{:4_180:} 祝队长生日快乐！{:4_187:} 制作漂亮啊，队长生日快乐 毋问我从哪里来 发表于 2023-4-20 23:26
整个迷你蛋糕隆重地贺一下下！
嗯嗯，一起祝贺{:4_204:} 小辣椒 发表于 2023-4-21 01:28
亲爱的，意境特美
那个骆驼是抓了个视频片段，然后弄到帖子里的{:4_173:} 小辣椒 发表于 2023-4-21 01:28
祝福队长生日快乐！健康长寿！永远年轻！
@加林森队长还没看到，估计看漏了{:4_173:} 樵歌 发表于 2023-4-21 06:29
哇，这场面好大，把楼兰女神请来献舞，贺队长生日快乐，去除一切烦恼，一切灾病，一生平安，幸福安康！俺在 ...
师兄在旅途中还记着队长的生日呢。其实我们都希望队长赶快好起来，继续大家开心玩{:4_204:} 醉美水芙蓉 发表于 2023-4-21 06:40
欣赏红影美女美贴！
谢谢，跟水芙蓉美女一起祝福队长{:4_204:} 梦油 发表于 2023-4-21 09:18
借影子朋友的精美贺帖祝福队长生日快乐身、体健康！
跟梦油一起祝福{:4_187:} 梦缘 发表于 2023-4-21 11:12
真好看的风情，祝加林森队长 生日快乐！
谢谢梦缘，我们一起祝福队长{:4_187:}