这是前端挑战 v24.09.04，CSS 艺术：空间的提交。
“欢迎回家”场景的灵感源自长途太空旅行后返回地球的感觉，借鉴了科幻电影的美学。
为了创建星空背景，我使用了三个 .stars-layer div，它们具有不同的 translateZ 和缩放值以实现视差效果：
.stars-layer {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
animation: rotate 240s linear infinite;
}
.stars-layer-1 {
transform: translateZ(-300px) scale(2);
}
.stars-layer-2 {
transform: translateZ(-200px) scale(1.75);
}
.stars-layer-3 {
transform: translateZ(-100px) scale(1.5);
}
具有径向渐变背景的伪元素创建闪烁的星星，使用关键帧进行动画处理：
.stars-layer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: 350px 350px;
animation: twinkle 4s infinite ease-in-out;
}
地球发光效果是通过 .earth-glow div、径向渐变背景和模糊滤镜实现的：
.earth-glow {
position: absolute;
bottom: -20vh;
left: 0;
width: 100%;
height: 40vh;
background: radial-gradient(...);
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
filter: blur(16px);
}
以上是欢迎回家的详细内容。更多信息请关注PHP中文网其他相关文章！
