光球游走背景 · 背景
前端Wiki/CSS 特效合集/光球游走背景

光球游走背景

一团紫色光晕在暗中游走,适合做聚光氛围背景

← 返回 背景 类特效列表

上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果

CSS 代码

CSS
.fx .orb{height:220px;border-radius:14px;background:#0a0f1c;position:relative;overflow:hidden}
.fx .orb::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(#a371f7,transparent 65%);animation:kfx-orb 8s ease-in-out infinite alternate}
@keyframes kfx-orb{0%{transform:translate(-60px,-40px)}50%{transform:translate(140px,60px)}100%{transform:translate(40px,120px)}}

HTML 结构

HTML
<div class="fx">
<div class="orb"></div>
</div>
实现要点:radial-gradient 圆斑 + 多关键点 translate 路径游走

其它背景类特效

回到 前端Wiki 首页 · CSS 特效合集