css实现纵向扫描

小彭友不会写Bug

于 2024-08-07 10:28:20 发布

阅读量282

点赞数 5

分类专栏： css扫描文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_48053972/article/details/140982296

版权

css扫描专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css实现纵向扫描

今天开发需求需要使用扫描来做检测，想着可以用css种animation来实现，就自己写了一下，总体来说也就是控制运动方向，运动速度这些，于是就开始上手了。
在这里插入图片描述

话不多说，直接先附上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    .div1 {
        width: 500px;
        height: 200px;
        position: relative;
    }
    .img1 {
        width: 500px;
        height: 200px;
        position: relative;
    }

    .div1:after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(270deg, #18cdd3, rgba(0, 177, 255, 0)),
        linear-gradient(90deg, #18cdd3, rgba(0, 177, 255, 0));
        background-size: 0, 0;
        background-position: 0, 100%;
        background-repeat: no-repeat;
        animation: scanAnimation 5s infinite linear;
    }

	@keyframes scanAnimation {
        0% {
            background-size: 0, 0;
            background-position: 0, 100%;
        }
        10% {
            background-size: 30%, 0;
            background-position: 0, 100%;
        }
        50% {
            background-size: 30%, 0;
            background-position: 130%, 100%;
        }
        60% {
            background-size: 30%, 30%;
            background-position: 130%, 100%;
        }
        100% {
            background-size: 30%, 30%;
            background-position: 130%, -30%;
        }
    }
    </style>
</head>
<body>
<div class="div1">
    <img src="./img/111.jpg" class="img1" alt="">
</div>
</body>
</html>

最主要的代码还是这点，让实现动画的主要步骤

.div1:after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(270deg, #18cdd3, rgba(0, 177, 255, 0)),
        linear-gradient(90deg, #18cdd3, rgba(0, 177, 255, 0));
        background-size: 0, 0;
        background-position: 0, 100%;
        background-repeat: no-repeat;
        animation: scanAnimation 5s infinite linear;
    }

至此为止，基本已经结束了，有需要的小伙伴可以参考一下！！