几团模糊色斑在深空缓慢漂移融合,像极光在流动
← 返回 背景 类特效列表上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果
.fx .aur{height:220px;border-radius:14px;background:#0a0e27;position:relative;overflow:hidden}
.fx .aur i{position:absolute;left:-20%;width:140%;height:110%;border-radius:50%;filter:blur(50px);opacity:.55;mix-blend-mode:screen}
.fx .aur .a1{background:#37d67a;top:-40%;animation:kfx-a1 8s ease-in-out infinite alternate}
.fx .aur .a2{background:#4a9eff;top:-20%;animation:kfx-a1 10s ease-in-out infinite alternate-reverse}
.fx .aur .a3{background:#a371f7;top:-30%;animation:kfx-a1 12s ease-in-out infinite alternate}
@keyframes kfx-a1{to{transform:translateX(20%) rotate(10deg)}}<div class="fx">
<div class="aur"><i class="a1"></i><i class="a2"></i><i class="a3"></i></div>
</div>