实现二维码扫码器动画效果

前言

在需求开发中，二维码扫码已经是一个非常常见的操作。前端实现中扫码需要添加对应的动画效果，是一个非常友好的体验。本文将详细介绍实现二维码扫码器动画效果。

1. 效果实现思路

需要实现这个效果，二维码扫码器动画需要模拟扫描设备的工作状态，包含三个主要动态元素：

扫描线动画：一条明亮的绿色横线从上至下循环移动，模拟真实扫描过程
二维码局部显示效果：通过遮罩动画展示二维码被逐步识别的视觉效果
边框闪烁效果：外围边框以脉冲方式闪烁，增强视觉吸引力

话不多说，下面我们直接上代码。

2. 代码实现

2.1 HTML结构设计

根据上面的介绍，动画的HTML结构应该有三个模块，分别是二维码、扫描文字提示和扫描线。结构如下所示：

xml 复制代码

<div class="scan">
    <div class="qrcode"></div>
    <h3>二维码扫描中...</h3>
    <div class="border"></div>
</div>

.scan 作为整个动画的容器
.qrcode 用于展示二维码和扫描线效果
h3 显示状态文本
.border 实现外围边框闪烁效果

2.2 CSS动画实现细节

2.2.1. 扫描线动画实现

扫描线效果通过伪元素和关键帧动画实现：

css 复制代码

.scan .qrcode::after {
    content: '';
    position: absolute;
    inset: 20px;
    width: calc(100% - 40px);
    height: 2px;
    background: #35fd5c;
    filter: drop-shadow(0 0 20px #35fd5c) drop-shadow(0 0 60px #35fd5c);
    animation: animateLine 4s ease-in-out infinite;
}

@keyframes animateLine {
    0% { top: 20px }
    50% { top: calc(100% - 20px) }
}

主要是创建了一条2像素高的绿色线条，从顶部移动到底部，添加了发光效果增强视觉冲击力。

2.2.2 二维码局部显示效果

通过两个二维码图片的叠加和遮罩动画实现。

具体代码如下：

css 复制代码

.scan .qrcode::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 400px;
    height: 400px;
    background: url("QR_Code02.png");
    background-size: 400px 400px;
    overflow: hidden;
    animation: animate 4s ease-in-out infinite;
}

@keyframes animate {
    0%, 100% { height: 20px; }
    50% { height: calc(100% - 20px); }
}

主要模拟了二维码被逐步识别的过程，增强了交互的真实感。

2.2.3. 边框闪烁效果

边框使用单独的div元素实现脉冲闪烁,css代码如下：

css 复制代码

.border {
    position: absolute;
    inset: 0;
    background-image: url("border.png");
    background-size: 400px;
    background-repeat: no-repeat;
    animation: animateText 0.5s linear infinite;
}

@keyframes animateText {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

快速闪烁的边框主要吸引了用户注意力，强化了扫描过程中的交互体验。

2.2.4 添加发光效果

发光效果通过CSS filter属性实现：

css 复制代码

filter: drop-shadow(0 0 20px #35fd5c) drop-shadow(0 0 60px #35fd5c);

亮绿色 (#35fd5c)：用于扫描线和发光效果，代表活跃和成功状态
纯黑色背景：突出二维码区域，减少视觉干扰
白色文字：清晰显示状态信息

3. 效果展示

4. 完整代码实现

xml 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二维码扫描动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #111;
        }

        .scan {
            position: relative;
            display: flex;
            align-items: center;
            flex-direction: column;
        }

        .scan .qrcode {
            position: relative;
            width: 400px;
            height: 400px;
            background: url("QR_Code01.png");
            background-size: 400px 400px;
        }

        .scan .qrcode::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 400px;
            height: 400px;
            background: url("QR_Code02.png");
            background-size: 400px 400px;
            overflow: hidden;
            animation: animate 4s ease-in-out infinite;
        }

        @keyframes animate {
            0%, 100% {
                height: 20px;
            }
            50% {
                height: calc(100% - 20px);
            }
        }

        .scan .qrcode::after {
            content: '';
            position: absolute;
            inset: 20px;
            width: calc(100% - 40px);
            height: 2px;
            background: #35fd5c;
            filter: drop-shadow(0 0 20px #35fd5c) drop-shadow(0 0 60px #35fd5c);
            animation: animateLine 4s ease-in-out infinite;
        }

        @keyframes animateLine {
            0% {
                top: 20px
            }
            50% {
                top: calc(100% - 20px)
            }
        }

        .border {
            position: absolute;
            inset: 0;
            background-image: url("border.png");
            background-size: 400px;
            background-repeat: no-repeat;
            animation: animateText 0.5s linear infinite;
        }

        @keyframes animateText {
            0%, 100% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
        }

        .scan h3 {
            text-transform: uppercase;
            font-size: 2em;
            margin-top: 20px;
            color: #ffffff;
            letter-spacing: 2px;
            filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 60px #fff);
            animation: animateText 0.5s steps(1) infinite;
        }
    </style>
</head>

<body>
    <div class="scan">
        <div class="qrcode"></div>
        <h3>二维码扫描中...</h3>
        <div class="border"></div>
    </div>
</body>

</html>

5. 总结

最后总结一下，使用伪元素和关键帧动画实现了一条从上至下移动的发光扫描线，通过两个二维码图片的叠加和遮罩动画模拟了扫描过程，边框闪烁效果为整个扫描区域添加了脉冲闪烁的边框增强视觉效果。

如有错误，请指正O^O!