光芒旋转背景 · 背景
前端Wiki/CSS 特效合集/光芒旋转背景

光芒旋转背景

中心太阳光芒四射缓慢旋转,温暖治愈系背景

← 返回 背景 类特效列表

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

CSS 代码

CSS
.fx .rays{height:220px;border-radius:14px;background:#0c1424;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.fx .rays .sun{width:80px;height:80px;border-radius:50%;background:radial-gradient(#fff,#ffd76a 60%,#ff9a3e);box-shadow:0 0 40px #ffd76a;position:relative;z-index:1}
.fx .rays::before{content:"";position:absolute;width:700px;height:700px;background:repeating-conic-gradient(rgba(255,215,106,.26) 0deg 6deg,transparent 6deg 18deg);animation:kfx-rays 30s linear infinite}
@keyframes kfx-rays{to{transform:rotate(360deg)}}

HTML 结构

HTML
<div class="fx">
<div class="rays"><div class="sun"></div></div>
</div>
实现要点:repeating-conic-gradient 光芒条 + 整体缓慢旋转 + 径向渐变太阳

其它背景类特效

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