[分享]css中如何实现动态扫描动画

<div class="scan"></div>

<style>
.scan {
    background: #888;
    width: 200px;
    height: 200px;
}
</style> 

接着，为该元素添加伪类选择器before和after，并分别设置宽度为0，高度为100%的蒙层。然后，将before选择器的背景色设置为白色，after选择器的背景色设置为透明色，代码如下：

.scan::before,
.scan::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    animation: scan 2s infinite;
}

.scan::before {
    background: #fff;
}

.scan::after {
    background: transparent;
} 

接下来，我们定义一个名为“scan”的动画，通过改变before和after选择器的宽度实现扫描效果。具体代码如下：

@keyframes scan {
    0% {
        width: 0;
    }

    50% {
        width: 100%;
    }

    100% {
        width: 0;
    }
} 

至此，我们就完成了动态扫描动画的实现。完整代码如下：

<div class="scan"></div>

<style>
.scan {
    background: #888;
    width: 200px;
    height: 200px;
    position: relative;
}

.scan::before,
.scan::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    animation: scan 2s infinite;
}

.scan::before {
    background: #fff;
}

.scan::after {
    background: transparent;
}

@keyframes scan {
    0% {
        width: 0;
    }

    50% {
        width: 100%;
    }

    100% {
        width: 0;
    }
}
</style>