祝樵哥生日快乐，万事顺意！（马黑黑原创）
本帖最后由 朵拉 于 2023-3-16 23:42 编辑 <br /><br /><style>
#papa {
--state: paused;
--s1: 0.8; --s2: 1.6;
margin: 80px 0 0 calc(50% - 593px);
display: grid;
place-items: center;
width: 1024px;
height: 640px;
background: lightblue url('https://638183.freep.cn/638183/t23/webp/iyyb.webp') no-repeat center/cover;
box-shadow: 6px 3px 20px #000;
user-select: none;
position: relative;
z-index: 1;
}
#papa:fullscreen { --s1: 1; --s2: 2; }
#papa:fullscreen .ball { width: 20px; height: 20px; }
#mplayer {
position: absolute;
width: 140px;
height: 140px;
display: grid;
place-items: center;
cursor: pointer;
animation: change 10s linear infinite alternate var(--state);
}
.ball {
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
box-shadow: -5px 0 10px hsla(0,0%,0%,.42) inset;
}
#btnFs {
position: absolute;
bottom: 20px;
width: fit-content;
height: fit-content;
padding: 6px;
border-radius: 6px;
border: 2px solid snow;
color: snow;
text-shadow: 1px 1px 1px #000;
display: none;
cursor: pointer;
}
@keyframes flash { to { box-shadow: 0 0 100px 30px hsla(200, 100%,50%, .35), -2px -2px 8px snow inset; } }
@keyframes change { from { transform: rotate(0) scale(var(--s1)); } to { transform: rotate(1turn) scale(var(--s2)); } }
</style>
<div id="papa">
<div id="mplayer"></div>
<div id="btnFs">全屏观赏</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1889888780.mp3" autoplay loop></audio>
</div>
<script>
(function() {
let total = 18, fs = false, timerId;
for(let i = 0; i < total; i ++) {
let ball = document.createElement('span');
ball.className = 'ball';
ball.style.cssText += `
background: #${Math.random().toString(16).substr(-6)};
transform: rotate(${360/total*i}deg) translate(70px);
animation: flash ${Math.random()+0.1}s infinite alternate var(--state);
`;
mplayer.appendChild(ball);
}
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
aud.addEventListener('ended', () => playNext());
aud.addEventListener('error', () => {
if(aud.error.code === 4) aud.src = 'http://www.kumeiwp.com/sub/filestores/2023/03/01/c6bc152cd2954d79cff5da3a7adba48d.mp3';
});
papa.addEventListener('mousemove', (e) => {
clearTimeout(timerId);
btnFs.style.display = 'block';
timerId = setTimeout('btnFs.style.display = "none"', 3000);
});
btnFs.addEventListener('click', () => fs ? document.exitFullscreen() : papa.requestFullscreen());
document.addEventListener('fullscreenchange', () => document.fullscreenElement !== null ? (fs = true, btnFs.innerText = '退出全屏') : (fs = false, btnFs.innerText = '全屏观赏'));
})();
</script> 有何不可（小提琴版），祝樵哥生日快乐，万事顺意{:4_204:} 我的祝福也捎带来了。快乐樵歌。 这个制作漂亮。借朵宝好帖同祝樵歌生日快乐{:4_187:}
今天出门有事，才回来，收礼来迟，谢谢朵宝{:4_185:} 珍珠象月亮一样，旋转在灿烂的云霞之上，朵儿好创意。音乐也很是欢快动听！
再次谢谢朵儿宝贝{:4_187:} 朵拉 发表于 2023-3-16 23:43
有何不可（小提琴版），祝樵哥生日快乐，万事顺意
喜欢欢快的小提琴音乐！谢谢了哈 庶民 发表于 2023-3-17 05:09
我的祝福也捎带来了。快乐樵歌。
你都捎了若干了，咋谢你呢{:4_204:} 红影 发表于 2023-3-17 09:05
这个制作漂亮。借朵宝好帖同祝樵歌生日快乐
谢谢师妹，过了生日也快乐{:4_173:} 小星世龙 发表于 2023-3-17 09:50
谢谢，小星送来的大蛋糕。{:4_176:} 樵歌 发表于 2023-3-17 10:26
谢谢师妹，过了生日也快乐
祝福师兄365天，天天都快乐{:4_187:} 红影 发表于 2023-3-17 10:43
祝福师兄365天，天天都快乐
有师妹和大伙在，不快乐都不行{:4_173:} 樵歌 发表于 2023-3-17 21:17
有师妹和大伙在，不快乐都不行
师兄的生日时间挺好的，正好消寒结束了，有空玩了{:4_173:} 红影 发表于 2023-3-17 21:25
师兄的生日时间挺好的，正好消寒结束了，有空玩了
嗯，本来是一直过阴历的，但一查，那年正好是315，深得好记就阳历了{:4_189:} 樵歌 发表于 2023-3-18 11:12
嗯，本来是一直过阴历的，但一查，那年正好是315，深得好记就阳历了
是啊，这个日子特别好记，而且师兄私下还能再过一遍阴历，过两次生日很挺乐呵的{:4_173:}
页:
[1]