星空
本帖最后由 马黑黑 于 2023-2-27 07:50 编辑 <br /><br /><style>#papa {
--state: paused;
margin: -80px 0 0 calc(50% - 649px);
width: 1136px;
height: 640px;
background: lightblue url('https://638183.freep.cn/638183/t23/webp/xkks.webp') no-repeat center/cover;
box-shadow: 6px 3px 20px #000;
overflow: hidden;
position: relative;
z-index: 1;
}
.moon {
position: absolute;
width: 100px;
height: 100px;
left: calc(50% - 50px);
cursor: pointer;
z-index: 999;
}
.moon::before, .moon::after {
position: absolute;
content: '';
border-radius: 50%;
}
.moon::before {
width: 80px;
height: 80px;
background: transparent;
box-shadow: 20px 10px 0 snow;
animation: swing linear 2s infinite alternate var(--state);
}
.moon::after {
background: snow;
width: 30px;
height: 30px;
left: 35px;
top: 35px;
}
.reflect {
bottom: 20px;
filter: blur(1.2px) opacity(.15);
transform: rotateX(-180deg);
}
.star {
position: absolute;
background: lightblue;
box-shadow: 0 0 2px white inset;
opacity: 0;
filter: blur(.5px);
display: block;
}
#btnFs {
position: absolute;
left: 20px;
bottom: 20px;
width: fit-content;
height: fit-content;
padding: 6px;
border-radius: 6px;
border: 2px solid snow;
color: snow;
display: none;
cursor: pointer;
}
@keyframes swing { to { transform: rotate(45deg); } }
@keyframes flash { to { transform: rotate(45deg); opacity: .6; } }
</style>
<div id="papa">
<div class="moon"></div>
<div class="moon reflect"></div>
<div id="btnFs">全屏观赏</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=433107499.mp3" autoplay loop></audio>
</div>
<script>
(function() {
let moons = document.querySelectorAll('.moon'), fs = false, timerId;
for(let j = 0; j < 600; j ++) {
let star = document.createElement('span'), size = Math.ceil(Math.random() * 4);
star.className = 'star';
star.style.cssText += `
left: ${Math.random() * 100}%;
top: ${Math.random() * 50}%;
width: ${size}px;
height: ${size}px;
animation: flash 1s ${Math.random() * 20}s infinite alternate var(--state);
`;
papa.appendChild(star);
}
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
moons.forEach((item) => item.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/02/26/f8e9ca01f8ae47d00c2fb150b30cee48.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_187:} 看这漫天眨眼的繁星，想起我的童年。我小时候望着满天的星星，总是忍不住伸出自己的小手，对着那满天的星，数着、数着，可是那星星永远也数不完。数了一遍又一遍数的我渐渐进入梦乡…… 代码星星就可以自己设置喜欢的颜色了，这个帖子里的星星设置真漂亮{:4_187:} 音乐暂停后，倒影也暂停了。嗯，影子真的是忠实地跟随着主体{:4_173:} 辽阔大气，感觉舒坦。 貌似这个是大图，边上效果看不全 这个月亮播放器我喜欢的{:4_199:} 这个晚上继续看看了，上来也是就看看有没有新的东西 红影 发表于 2023-2-27 09:30
满天繁星，还有月亮播放器效果。月亮的倒影真好看
用了两个滤镜，外加transform转换 梦油 发表于 2023-2-27 09:36
看这漫天眨眼的繁星，想起我的童年。我小时候望着满天的星星，总是忍不住伸出自己的小手，对着那满天的星， ...
数星星是童年趣事 红影 发表于 2023-2-27 09:38
代码星星就可以自己设置喜欢的颜色了，这个帖子里的星星设置真漂亮
浅蓝色，白色，雪色，都可以的 醉美水芙蓉 发表于 2023-2-27 11:44
夜景很美！欣赏老师佳作！
夜景总是很迷人的 红影 发表于 2023-2-27 09:39
音乐暂停后，倒影也暂停了。嗯，影子真的是忠实地跟随着主体
月亮倒影也可以点击 醉美水芙蓉 发表于 2023-2-27 11:43
好像加了满天繁星特效！
是的 庶民 发表于 2023-2-27 09:59
辽阔大气，感觉舒坦。
夜空通常都这样，不过取景要有地面人间景色才有灵气 醉美水芙蓉 发表于 2023-2-27 11:41
水中捞月很漂亮！
去捞一个吧{:5_106:}