css实现扫码循环扫描特效

最新推荐文章于 2026-06-13 20:54:33 发布

原创

最新推荐文章于 2026-06-13 20:54:33 发布 · 2.2k 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍了如何使用HTML、CSS和SVG在移动端开发中为扫描图片添加动态特效，通过CSS动画控制扫描效果，包括块的移动和扫描拖光的变化。

开发过程中总会遇到不常见的需求，移动端扫描图片加个特效，这里记录一下实现场景
在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <mate charset="UTF-8"/>
        <title>扫描特效</title>
        <style type="text/css">
            :root {
   
   
                --container-width: 400px; /*组件宽度*/
                --container-height: 300px; /*组件高度*/
                --angle-size: 100px; /*四角边框效果尺寸*/
                --angle-weight: 4px; /*四角边框粗细，数值越小越粗*/
                --angle-color: rgb(138, 227, 249);
                --scan-wake-size: 60px; /*扫描拖光的长度*/
                --scan-wake-color: rgb(104, 185, 229);/*扫描拖光颜色*/
            }
            @keyframes scan {
   
   
                0% {
   
   
                    /*最开始块从顶部往下移动，块的位置需要溢出容器，处于容器顶部上方，块的背景颜色从底部到顶部由绿色逐渐透明*/
                    margin-top: calc(0px - var(--scan-wake-size)); 
                    background:linear-gradient(#0000 0%, var(--scan-wake-colo