网格科技背景
科技网格背景：两组线性渐变（横向 + 纵向）拼出网格，再叠一层 radial 渐变做中心光晕，常用于科技风后台、数据大屏。颜色随主色调整，一行 background 搞定。
网格间距由 background-size 控制；想让它“流动”就加 animation 移动 background-position，立刻有扫描线既视感。
- 两组 linear-gradient 横竖交叉生成网格
- background-size 即网格单元尺寸（如 40px 40px）
- 叠 radial-gradient 光晕 + 移动动画 = 科技感
HTML
<style> .grid-bg { height: 220px; border-radius: 14px; margin: 30px auto; background: radial-gradient(circle at 50% 50%, rgba(74,158,255,.25), transparent 60%), linear-gradient(rgba(74,158,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(74,158,255,.18) 1px, transparent 1px), #0d1117; background-size: auto, 40px 40px, 40px 40px, auto; animation: gridMove 8s linear infinite; } @keyframes gridMove { to { background-position: 0 0, 40px 40px, 40px 40px, 0 0; } } </style> <div class="grid-bg"></div>
本节要点网格背景 = 横竖线性渐变交叉 + background-size 定格；叠光晕与动画出科技感。
