html css 实现扫描动画特效

原理：

实现这个特效需要做3个层，所以要用到CSS绝对定位和层级z-index以及设置top、left、bottom、right的值。
大体结构是一个容器，容器里放3个层，底层是4个角的边框效果容器，中间层是要扫描的图片容器，顶层是扫描线容器，这3个层通过z-index来实现层级，它们的高宽度都取父容器的高宽度inherit。
由于图片尺寸可能不同，所以<img>标签的样式设置了object-fit: contain;这样始终能显示图片所有内容并自动按高宽度充满父容器。
扫描效果通过动画实现，定义动画为4秒，并且循环。一次循环扫描线从顶部移动到底部，再从底部移回顶部。

版本一：

<!DOCTYPE html>
<html>
    <head>
        <mate charset="UTF-8"/>
        <title>扫描特效</title>
        <style type="text/css">
            @keyframes scan {
                0% {
                    margin-top: 0px;
                }
                50% {
                    margin-top: 300px;
                }
                100% {
                    margin-top: 0px;
                }
            }
        </style>
    </head>    
    <body>
        <h1>扫描动画</h1>
        <h3>https://www.cnblogs.com/jsper</h3>
        <div style="display:flex;">
            <div style="width:100px;height:100px;background-color: yellow;margin:20px;">网页其他元素块</div>
            <!-- 扫描特效组件 -->
            <div style="width:400px;height:300px;border:1px solid green;">
                <div style="position:absolute;z-index:0;width:inherit;height:inherit;">
                    <div style="position:absolute;width:100px;height:100px;background-color:green;top:-4px;left:-4px;"></div>
                    <div style="position:absolute;width:100px;height:100px;background-color:green;top:-4px;right:-4px;"></div>
                    <div style="position:absolute;width:100px;height:100px;background-color:green;bottom:-4px;left:-4px;"></div>
                    <div style="position:absolute;width:100px;height:100px;background-color:green;bottom:-4px;right:-4px;"></div>
                </div>
                <div style="position:absolute;z-index:10;width:inherit;height:inherit;background-color:white;">
                    <img src="dianzifapiao.png" style="width:inherit;height:inherit;object-fit: contain;"/>
                </div>
                <div style="position:absolute;z-index:20;width:inherit;height:2px;background:greenyellow;box-shadow: 0 0 10px 3px green;animation: scan 4s ease-in-out infinite;"></div>
            </div>
            <div style="width:100px;height:100px;background-color: yellow;margin:20px;">网页其他元素块</div>
        </div>
    </body>
</html>

版本二：

上面的扫描线是用的一个高度2像素的div并给div设置绿色阴影实现的，但线在移动时没有“拖尾焰”的效果，不是太高级的感觉。
下面实现了拖尾焰效果。实现方法是，将线变成一个块，块的颜色是绿色和透明色组成的过渡色，根据“向下扫”、“向上扫”状态修改块的颜色方向和位置来实现扫描效果。
另外下面的例子将相关部件高宽度、颜色变量化了。

<!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(90, 206, 23);
                --scan-wake-size: 60px; /*扫描拖光的长度*/
                --scan-wake-color: rgb(90, 206, 23);/*扫描拖光颜色*/
            }
            @keyframes scan {
                0% {
                    /*最开始块从顶部往下移动，块的位置需要溢出容器，处于容器顶部上方，块的背景颜色从底部到顶部由绿色逐渐透明*/
                    margin-top: calc(0px - var(--scan-wake-size)); 
                    background:linear-gradient(#0000 0%, var(--scan-wake-color) 100%);
                }
                49% {
                    /*动画进行到一半时间时，块必须移动到容器底部并溢出，完成从上到下扫描效果*/
                    margin-top: var(--container-height);
                    background:linear-gradient(#0000 0%, var(--scan-wake-color) 100%);
                }
                50% {
                    /*调转颜色方向，准备往回扫（从下往上）*/
                    margin-top: var(--container-height);
                    background:linear-gradient(var(--scan-wake-color) 0%, #0000 100%);
                }
                100% {
                    /*往回扫*/
                    margin-top: calc(0px - var(--scan-wake-size)); 
                    background:linear-gradient(var(--scan-wake-color) 0%, #0000 100%);
                }
            }
        </style>
    </head>    
    <body>
        <div style="margin-left:100px;">
            <strong>扫描动画</strong>
            <span>https://www.cnblogs.com/jsper</span>
            <br>
            <br>
        </div>
        <div style="display:flex;">
            <div style="width:100px;height:100px;background-color: yellow;margin:20px;">网页其他元素块</div>
            <!-- 扫描特效组件 -->
            <div style="width:var(--container-width);height:var(--container-height);border:1px solid green;">
                <div style="position:absolute;z-index:0;width:inherit;height:inherit;">
                    <div style="position:absolute;width:var(--angle-size);height:var(--angle-size);background-color:var(--angle-color);top:calc(0px - var(--angle-weight));left:calc(0px - var(--angle-weight));"></div>
                    <div style="position:absolute;width:var(--angle-size);height:var(--angle-size);background-color:var(--angle-color);top:calc(0px - var(--angle-weight));right:calc(0px - var(--angle-weight));"></div>
                    <div style="position:absolute;width:var(--angle-size);height:var(--angle-size);background-color:var(--angle-color);bottom:calc(0px - var(--angle-weight));left:calc(0px - var(--angle-weight));"></div>
                    <div style="position:absolute;width:var(--angle-size);height:var(--angle-size);background-color:var(--angle-color);bottom:calc(0px - var(--angle-weight));right:calc(0px - var(--angle-weight));"></div>
                </div>
                <div style="position:absolute;z-index:10;width:inherit;height:inherit;background-color:white;">
                    <img src="dianzifapiao.png" style="width:inherit;height:inherit;object-fit: contain;"/>
                </div>
                <div style="position:absolute;z-index:20;width:inherit;height:inherit;overflow: hidden;">
                    <div style="width:inherit;height:var(--scan-wake-size);animation: scan 4s ease-in-out infinite;"></div>
                </div>
            </div>
            <div style="width:100px;height:100px;background-color: yellow;margin:20px;">网页其他元素块</div>
        </div>
    </body>
</html>