深空渐变上星点错落闪烁,一个元素就是一片星空
← 返回 背景 类特效列表上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果
.fx .sky{position:relative;height:220px;border-radius:14px;margin:20px auto;overflow:hidden;background:radial-gradient(ellipse at top,#1b2735,#090a0f)}
.fx .star{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.2;box-shadow:20px 30px #fff,60px 80px #fff,120px 40px #fff,180px 120px #fff,240px 60px #fff,300px 160px #fff,90px 180px #fff,350px 40px #fff,420px 100px #fff,500px 180px #fff,560px 30px #fff,150px 90px #fff,460px 20px #fff,380px 190px #fff,40px 150px #fff;animation:kfx-twinkle 3s ease-in-out infinite alternate}
.fx .star.s2{animation-delay:1.2s}
.fx .star.s3{animation-delay:2.1s}
@keyframes kfx-twinkle{to{opacity:1}}<div class="fx">
<div class="sky"><div class="star"></div><div class="star s2"></div><div class="star s3"></div></div>
</div>