使用css实现扫描效果

最新推荐文章于 2024-07-23 16:10:02 发布

MusiCoder32

最新推荐文章于 2024-07-23 16:10:02 发布

阅读量2.3k

点赞数 1

分类专栏： css 文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_42129248/article/details/120293949

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实现下图中的扫描效果

请添加图片描述

需求分析

1.扫描图层有一个宽度为0增加到固定宽度的过程，之后再开始移动
2.到达一边时，扫描图层逐渐消失，之后再调转方向
3.扫描图层两侧为一个梯形

实现方案

1. 首先使用clip-path将div切出容器形状

让ui切一张大小一样的纯色svg，一定要是纯色，不带边框阴影等各种效果的svg,这样可以快速得到容器尺寸，下图便是我们ui切出来的svg
在这里插入图片描述
可以看到容器尺寸有了，但是很不方便计算，原因在于存在一个translate ,写个方法处理一下（慕客下载的svg都存在这个毛病，下面自己处理下数据，有更好方法的话，请留言告知）

// svg文件中取出polygon中取出translate
let polygon = '54 441 43.000824 451.999176 43.000824 492 54.0012817 503.000458 158 503.000458 169 492 169 452 158 441'
let translate = [-43.000000, -441.000000]

polygon = handler(polygon, translate)
console.log(polygonStr)
//11px 0, 0 11px, 0 51px, 11px 62px, 115px 62px, 126px 51px, 126px 11px, 115px 0,


function handler(str, origin) {
    let arr = str.split(' ')
    arr = arr.map((item, index) => {
        if (index % 2 === 0) {
            item = +item + origin[0]
        }
        else {
            item = +item + origin[1]
        }
        item = Math.round(item)
        if (item !== 0) {
            item += 'px'
        }
        if (index % 2 !== 0) {
            item += ','
        }
        return item
    })
    return arr.join(' ')
}

现在我们来复现容器，通过上一步计算出的polygon,知道容器的高宽为62，126

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    div {
        width:126px;
        height:62px;
        clip-path: polygon(11px 0, 0 11px, 0 51px, 11px 62px, 115px 62px, 126px 51px, 126px 11px, 115px 0);
        background: linear-gradient(270deg, #00b1ff, rgba(0, 177, 255, 0))
    }
    </style>
</head>
<body>
<div></div>
</body>
</html>

实现的容器效果如下
在这里插入图片描述

2. 实现动画效果

这一步采用两个background过渡的方式来实现
主要利用background的position与size属性，动画设计部分见代码，完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    div {
        width: 126px;
        height: 62px;
        position: relative;
        background: gray;
        clip-path: polygon(11px 0, 0 10px, 0 51px, 11px 62px, 115px 62px, 126px 51px, 126px 11px, 115px 0);

    }

    div:after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        clip-path: polygon(11px 0, 0 10px, 0 51px, 11px 62px, 115px 62px, 126px 51px, 126px 11px, 115px 0);
        background: linear-gradient(270deg, #00b1ff, rgba(0, 177, 255, 0)),
        linear-gradient(90deg, #00b1ff, rgba(0, 177, 255, 0));
        background-size: 0, 0;
        background-position: 0, 100%;
        background-repeat: no-repeat;
        animation: scanAnimation 10s infinite linear;
    }

	@keyframes scanAnimation {
        /*状态1：bg1与bg2均不可见*/
        0% {
            background-size: 0, 0;
            background-position: 0, 100%;
        }
        /*状态2：bg1宽度从0到30%，bg2不可见*/
        10% {
            background-size: 30%, 0;
            background-position: 0, 100%;
        }
        /*状态3：bg1宽度保持30%不变，位置从0到130%，即位置从可见变为不可见，bg2不可见*/
        50% {
            background-size: 30%, 0;
            background-position: 130%, 100%;
        }
        /*状态4：bg1保持不可见，bg2宽度从0到30%，*/
        60% {
            background-size: 30%, 30%;
            background-position: 130%, 100%;
        }
        /*状态5：bg1保持不可见，bg2宽度保持30%不变，位置从100%到-30%，变为不可见*/
        100% {
            background-size: 30%, 30%;
            background-position: 130%, -30%;
        }
    }
    </style>
</head>
<body>
<div></div>
</body>
</html>

MusiCoder32

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
使用css实现扫描效果

实现下图中的扫描效果需求分析1.扫描图层有一个宽度为0增加到固定宽度的过程，之后再开始移动2.到达一边时，扫描图层逐渐消失，之后再调转方向3.扫描图层两侧为一个梯形实现方案1. 首先使用clip-path将div切出容器形状让ui切一张大小一样的纯色svg，一定要是纯色，不带边框阴影等各种效果的svg,这样可以快速得到容器尺寸，下图便是我们ui切出来的svg可以看到容器尺寸有了，但是很不方便计算，原因为在于存在一个translate ,写个方法处理一下（慕客下载的svg都存在这个毛病，下
复制链接

扫一扫

专栏目录