如何制作CSS炫酷的扫描线特效_通过linear-gradient与位移动画实现-css教程-PHP中文网

用 linear-gradient 配合 background-position 动画可实现高兼容低开销扫描线：单色渐变（如 rgba(0,0,0,0) 49%, #0af 50%, rgba(0,0,0,0) 51%）+ 固定宽高容器 + overflow: hidden + background-size 与 animation-duration 匹配位移，支持 vh 响应式及 will-change 优化。

如何制作css炫酷的扫描线特效_通过linear-gradient与位移动画实现

直接用 linear-gradient 配合 @keyframes 位移动画就能做出高兼容、低开销的扫描线，不需要 SVG 或 JS。

扫描线本质是「单色渐变 + 容器裁剪 + 持续位移」

所谓扫描线，视觉上是一条亮带从上往下（或左往右）匀速划过元素。它不是真在“扫描”，而是靠一个高度仅几像素的线性渐变背景，在固定尺寸容器里不断向下平移，配合 overflow: hidden 裁剪掉超出部分，形成“扫过”的错觉。

渐变必须是单方向、强对比：比如 linear-gradient(to bottom, transparent 49%, #fff 50%, transparent 51%)，中间 2% 是亮线，上下全透明
容器需设明确宽高和 overflow: hidden，否则动画会溢出可见区域
动画只需移动 background-position，不要用 transform: translateY()——后者会触发重绘，且对 background-size/position 的控制更弱

关键 CSS 写法：background-size 与 animation-duration 要匹配

扫描速度感由 background-size 和 animation-duration 共同决定。如果渐变高度是 100px，但动画只动了 50px，就会卡顿或跳帧。

设渐变重复单元为 background-size: 100% 100px（即每 100px 高出现一次亮线）
动画需让背景图完整滚动一个单元：用 background-position: 0 0 → 0 100px，时长定为 1s，就是 100px/s 的扫描速度
若想更慢，改 animation-duration: 2s；若想更密（细线），把 100px 换成 20px，同时调短 duration 避免太慢

div.scan-line {
  height: 200px;
  background: linear-gradient(to bottom, transparent 49%, #0af 50%, transparent 51%);
  background-size: 100% 20px;
  animation: scan 1.5s linear infinite;
  overflow: hidden;
}

@keyframes scan {
  0% { background-position: 0 0; }
  100% { background-position: 0 20px; }
}

常见翻车点：透明通道没处理好，导致边缘发灰或闪烁

用 transparent 不等于“完全无色”，尤其在非 sRGB 显示器或开启色彩管理的浏览器里，transparent 可能被解析为 rgba(0,0,0,0)，和父层混合后出现灰边。更稳的方式是显式指定透明色值。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

避免写 transparent 49%, #0af 50%，改用 rgba(0,0,0,0) 49%, #0af 50%, rgba(0,0,0,0) 51%
如果底色是深色，亮线建议用带 alpha 的浅色，比如 rgba(255,255,255,0.7)，比纯白更柔和、抗锯齿更好
加 will-change: background-position 可提示浏览器提前升层，减少 iOS Safari 上的闪烁